Web designers should optimize web pages from three aspects

With the increase of bandwidth, there are more and more objects on web pages, so speeding up the opening of web pages is still an important issue. There are three ways to speed up the opening of web pages. The first is to increase network bandwidth, the second is for users to optimize on their local computers, and the third is for website designers to optimize the web pages. This article shares some tips on optimizing web page loading speed from a website designer's perspective.
1. Optimize pictures There is almost no web page without pictures. If you've lived through the days of 56K modems, you'll definitely not like websites with lots of images. Because loading a web page like that would take a lot of time.
Even now, when network bandwidth has improved a lot and 56K modems are gradually fading out, it is still necessary to optimize images to speed up web pages.
Optimizing images includes reducing the number of images, lowering image quality, and using appropriate formats.
1. Reduce the number of pictures: remove unnecessary pictures.
2. Reduce image quality: If it is not necessary, try to reduce the quality of the image, especially the jpg format. Reducing the quality by 5% may not seem to change much, but the change in file size is relatively large.
3. Use appropriate formatting: See the next point.
Therefore, before uploading the picture, you need to edit the picture. If you think Photoshop is too troublesome, you can try some online picture editing tools. Too lazy to edit but want special effects on your pictures? You can try to use javascript to achieve image effects.
2. Selection of image format Generally there are three image formats used on web pages, jpg, png, and gif. The specific technical indicators of the three formats are not discussed in this article. We only need to know when to use which format to reduce the loading time of the web page.
1. JPG: Generally used to display photographic works of landscapes, figures, and artistic photos. Sometimes also used for computer screenshots.
2. GIF: It provides fewer colors and can be used in places where color requirements are not high, such as website logos, buttons, emoticons, etc. Of course, an important application of gif is animated images. Just like the reflection pictures made with Lunapic.
3. PNG: The PNG format can provide a transparent background and is an image format invented specifically for web page display. It is generally used on web pages that require a transparent background or have high requirements for image quality.
3. Optimize CSS
CSS cascading style sheets make web pages load more efficiently and improve the browsing experience. With CSS, tables can be retired as a layout method.
But sometimes when we write CSS, we use some more wordy statements, such as this one:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
You can simplify it to:
margin: 10px 20px 10px 20px;

Or this:
A paragraph of decorated text
Second paragraph
Third paragraph
Forth paragraph
You can use div to contain:
<div class="decorated">
A paragraph of decorated text
Second paragraph
Third paragraph
Forth paragraph
</div>
Simplifying CSS can remove redundant attributes and improve operational efficiency. If you are too lazy to minify your CSS after writing it, you can use some online minification tools, such as CleanCSS.

Previous Page 1 2 Next Page Read Full Article

<<: How to control the proportion of Flex child elements on the main axis

>>: Solve the problem of inconsistent MySQL storage time