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:
The following are the referenced contents:
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:
The following are the referenced contents:
<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:
The following are the referenced contents:
<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.
Current 1/2 page
12 Next read the full text
