Web page designers should optimize web pages from three aspects

With the increase of bandwidth, the number of objects on the Web page is more and more, so it is an important topic to speed up the speed of Web page opening. Speed up the opening of the Web page, there are three paths, one is to improve network bandwidth, the second is the user in this machine to do optimization, the third is the Web site designers to do some optimization. This article stands in a web designer's perspective, sharing some tips to optimize the speed of Web page loading.

　　First, optimize the picture

There are hardly any pages where there is no picture. If you have experienced the age of 56K cats, you will not like a lot of pictures of the site. Because it takes a lot of time to load a Web page like that.

Even now, the network bandwidth has a lot of improvement, 56K cat gradually fade out, optimize the image to speed up the speed of the page is still very necessary.

Optimizing pictures includes reducing the number of pictures, reducing image quality, and using the appropriate format.

1, reduce the number of pictures: Remove unnecessary pictures.

2, reduce image quality: if it is not necessary to try to reduce the quality of the image, especially the JPG format, reduce the quality of 5% seems to change is not very large, but the size of the file changes are relatively large.

3, use the appropriate format: see the next point.

So, before uploading a picture, you need to edit the image, and if you think Photoshop is too much trouble, try some online image editing tools. Too lazy to edit and think the picture has special effects? You can try calling JavaScript to implement a picture effect.

　　Second, the choice of image format

There are three kinds of picture formats commonly used on Web pages, JPG, PNG, GIF. The specific specifications of the three formats are not the content of this article, we just need to know when and what format should be used to reduce the load time of the page.

1, JPG: Generally used to show the scenery, characters, artsy shots of the photographic works. Sometimes it's also used on computer screenshots.

2, GIF: Provide less color, used in some of the color requirements are not high places, such as website logo, buttons, expressions and so on. One of the important applications of GIF, of course, is animated pictures. It's like an inverted image made with lunapic.

3, png:png format can provide a transparent background, is a special page for the invention of the image format. Typically used on pages that require transparent display of background or higher image quality requirements.

　　Third, optimize the CSS

CSS stacked style sheets make it more efficient to load a Web page and improve the browsing experience. With CSS, forms can be laid out in a way that is retired.

But sometimes we use some wordy statements when we're writing CSS, like this:

margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;

You can simplify it to:

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>

Simplifying CSS can remove redundant attributes and improve operational efficiency. If you're tired of simplifying by writing CSS, you can use some of the online simplified CSS tools, such as CLEANCSS.

Click here to browse the website of this site to create a tutorial content.