Web Design tips: A way to optimize the front page

With the WEB2.0 era, the network has brought unprecedented development. The front-end user experience becomes more and more important, in order to make up for the B/s structure of the user interaction of some drawbacks, but this will bring a problem is to increase the pressure on the client, such as a large number of use of JS code, we all know that the JS code is running on the client, will affect the entire Web page in the browser parsing efficiency This may also imply increased client traffic, so whether from the server load angle or from the user's point of view, the client code optimization is particularly important! In this paper, the main internal and external aspects of the Web front-end optimization method. Hope to give readers some experience and inspiration.

First, we look at the HTTP traffic data that opens the http://yahoo.com via a Yahoo statistics chart:

We can find a page from the first issue of the server request to the full load to the client process, reading HTML code accounts for only 5% of the total response time, which applies to most Web sites, with only one of the top ten sites in the United States having more than 5% but less than 20%, and the rest 80% The time is used to read the other content of the page, that is, the front end (the original is front-end, meaning is not include the rest of the HTML code, can be pictures, scripts, flash, video, all kinds of things). That's why we have to focus on these things to improve the speed of the display.

There are three main reasons why you should start with the front end :

1. There is a potential for ascension and improvement. If you can reduce the volume by half, you can reduce the response time by 40%.
2. Improving the front end takes less time and resources than improving the back end. (Improved backend to redesign application planning, code, search for optimized code, add or change hardware configuration, distributed database, etc.)
3. Our golden rule is to first optimize the front end performance, which consumes 80% of the client response time.

First, from the code, we have the following three ways

1. Using CDN Technology

Specific way, you can Google a bit. (The general principle seems to be to determine the location of the visitors and access to the content so as to select the nearest server to handle the user's request)

2. Add a long time expired head

Expires:thu, APR 20:00:00 GMT

The browser uses caching to reduce the number of HTTP requests to speed up the page load, and if the page has a long expiration time, the browser caches the elements in the page.
However, this will bring a problem, that is, if the page changes in the word will change the name, otherwise the user will not be active refresh, the Yahoo Working Group with the version number, such as Yahoo_2.0.6.js

3.Gzip compression

Gzip is now the most popular and most effective compression method, she is GNU developed, RFC1952 standardization.
(gzip is the server-side compression of pictures, CSS, scripts, etc., sent to the user side of the browser to decompress, this can improve transmission speed, but the pressure on the server will increase, the general selection of some elements of compression is more appropriate.)