Some tips to improve the speed of Web page opening

Internet bandwidth is more and more wide, it seems that the loading speed of the Web page has been a qualitative leap. In fact, because with the increase in bandwidth, more and more objects on the Web page, so speed up the speed of the Web page is an important topic.

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 for 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.

Four, add a slash after the URL

Some URLs, such as "www.kenengba.com/220", take time to determine the file type of the address when the server receives such an address request. If 220 is a directory, you may want to add a slash after the URL, let it become www.kenengba.com/220/, so that the server can clearly know to access the directory index or default file, thus saving load time.

V. Indicate height and width

This is important, but many people tend to ignore it because of laziness or other reasons. When you add a picture or a table to a Web page, you should specify the height and width of the data. If the browser does not find these two parameters, it needs to download the picture side to calculate the size, if a lot of pictures, browsers need to constantly adjust the page. This not only affects speed, it also affects the browsing experience.

Here is a more friendly picture code:


Http://www.kenengba.com/moon.png"alt=" Moon image "/>


When the browser knows the height and width parameters, even if the picture is temporarily unable to display, the page will free up the picture, and then continue to load the later content. Thus the load time is fast, the browsing experience is also better.

Vi. Reduction of HTTP requests

When a viewer opens a Web page, the browser makes many object requests (images, scripts, and so on), and depending on the latency of the network, each object will be loaded with a delay. If you have a lot of objects on your Web page, this can take a lot of time.

Therefore, you want to lighten the HTTP request. How to lighten the burden?

1, remove some unnecessary objects.

2, will be adjacent to the two pictures to synthesize a sheet.

3. Merge CSS

Take a look at the code below, you need to load three CSS:


<link rel= "stylesheet" type= "Text/css" href= "/body.css"/>
<link rel= "stylesheet" type= "Text/css" href= "/side.css"/>
<link rel= "stylesheet" type= "Text/css" href= "/footer.css"/>


We can synthesize it into one:


<link rel= "stylesheet" type= "Text/css" href= "/style.css"/>


Thus reducing HTTP requests.

Vii. Other Tips (translator added)

1, remove the need to add items.

2, if the Web page embedded in other web widgets, if there is room for choice, be sure to choose the speed.

3, as far as possible with pictures instead of Flash, which is also good for SEO.

4, some content can be static to static, in order to reduce the burden of the server.

5, the statistics code at the end of the page.