Tips for web designers to optimize the speed of web pages

With the increase in bandwidth, more and more objects are on the web page. Therefore, it is an important task to speed up the opening of the web page. There are three ways to speed up web page opening. One is to increase network bandwidth, the other is to optimize the user on the local machine, and the third is to optimize the webpage by the website designer. This article shares some tips on optimizing webpage loading speed from the perspective of a Website designer.

 

1. optimize images

Almost no web page has images. If you have been through the 56 k cat age, you will not really like websites with a large number of images. Because loading such a webpage takes a lot of time.

Even now, the network bandwidth has improved a lot, and the 56 k cat gradually fades out. It is necessary to optimize images to speed up the web page.

Optimized images include reducing the number of images, reducing image quality, and using appropriate formats.

1. Reduce the number of images: Remove unnecessary images.

2. Reduce image quality: if it is not necessary, try to reduce the image quality, especially in JPG format. Reducing the quality by 5% does not seem to change significantly, however, the file size changes greatly.

3. Use the appropriate format: See the following.

Therefore, before uploading an image, you need to edit the image. If you think Photoshop is too troublesome, you can try some online image editing tools. Are you too lazy to edit and want the image to have a special effect? You can try to use JavaScript to implement image effects.

 

2. Image Format Selection

Generally, three image formats are used on webpages: JPG, PNG, and GIF. the specific technical indicators of the three formats are not discussed in this article. We only need to know when the format should be used to reduce the loading time of webpages.

1. jpg: It is generally used to show photos of scenery, characters, and art photos. It is sometimes used on a computer screenshot.

2. GIF: provides less colors and can be used in areas with low color requirements, such as website logos, buttons, and expressions. Of course, an important application of GIF is animated images. It is like a mirror image created with lunapic.

3. PNG: The PNG format provides a transparent background. It is an image format designed for webpage display. It is generally used on webpages that require transparent background display or that require high image quality.

3. Optimize CSS

CSS stacked style sheets make webpage loading more efficient and improve browsing experience. With CSS, the table layout can be retired.

However, sometimes we use some wordy statements when writing CSS, such as the following:

Margin-top: 10px;
Margin-Right: 20px;
Margin-bottom: 10px;
Margin-left: 20px;

You can simplify it:

Margin: 10px 20px 10px 20px;

Or this sentence:

<P class = "decorated"> a paragraph of decorated text </P>
<P class = "decorated"> second paragraph </P>
<P class = "decorated"> third paragraph </P>
<P class = "decorated"> forth paragraph </P>

You can use Div to include:

<Div class = "decorated">
<P> a paragraph of decorated text </P>
<P> second paragraph </P>
<P> third paragraph </P>
<P> forth paragraph </P>
</Div>

Simplified CSS can remove redundant attributes and improve operation efficiency. If you are too lazy to simplify CSS after writing it, you can use some online simplified CSS tools, such as cleancss.