The premise of the popular website to improve the speed of Web page opening

The methodology of the user experience of the popular website has many, the most basic: Don't let me wait!! Improve page opening speed.

Why the Thunderbolt in the download software unique? Why are more and more users watching TV serials online on low-resolution video sites instead of downloading clearer video files? The answer is: The user's patience is very limited, the user's pursuit of speed far more than the quality of the pursuit of factors.

Back to the site operation issues, have you ever been tested across the country, access to open your site in a few seconds?

A number of studies have shown that users most satisfied with the open Web page time is 2-5 seconds, if waiting for more than 10 seconds, 99% users will close the page. Perhaps this way, you will not have too many feelings, next, I enumerate a set of data: Google Web Access speed per 400ms slow, resulting in user search request down 0.59%; Amazon's 100ms web site delay will result in a 1% drop in revenue; Yahoo if there is a 400ms delay will lead to a drop in traffic 5-9%.

How do you feel now? Is it time to do the test work right away?

At this point you may ask: What causes the website to open slowly? What can be solved? Don't worry, I'll come in one by one. There are some technical aspects of the following, you need to be patient to read.

1, reduce the number of HTTP requests

When the user opens a webpage, the background program responds to the user's time not much, the user waits the time mainly spends in downloading the webpage element, namely HTML, CSS, JavaScript, Flash, picture and so on, statistics shows, each additional element, Web page loading time increases by 25-40 milliseconds (depending on the bandwidth of the user).

So, to improve the speed of web pages, we need to reduce the number of HTTP requests, there are 3 ways:

1 reduce unnecessary HTTP requests, such as using CSS fillet instead of fillet picture, reduce the use of pictures.

2 merge files, for text files, you can merge content directly. For example, multiple JS (JavaScript abbreviated) files are merged into one, and multiple CSS files are merged into one.

3 optimize the cache, for the unchanged page elements (such as the page header, footer, etc.), the user again visit the time there is no need to download, directly from the browser cache read it.

2. Use CDN (Content Delivery Network, contents distribution network)

The CDN consists of a series of Web servers dispersed across geographically different locations, which specify a server to respond to user requests based on how close the user is to the network. When your site pictures a lot of things, just like to use CDN, such as the current electronic business site, almost all using CDN.

3, compressed page elements

The smaller each element in a Web page, the less time it takes to download it, which is well understood. Now more mature and process of the compression of the Web page way, is through gzip, my own experience in practice, can generally reduce the content of the Web page text more than 70%.

4, the style sheet is placed in the Head section of the page

This is also my actual operation of the case, the style sheet (CSS file) moved to the head of the page, you can improve the loading speed of the page, so that the page element order display.

5, put the JS file to the bottom of the page

When a Web page is open, all elements are displayed sequentially. Because of the specificity of the JS file, compared to other elements, it will load very slowly, in the JS file download complete, the other elements of the sequential display will be blocked, so the JS file as far as possible on the bottom, meaning that the content can be quickly displayed.

6, the style sheet and JS script into the external file

Although writing style sheets and JS scripts directly into Web page HTML can reduce the number of external file calls, doing so increases the file size of the page. Overall, the style sheet and JS script in the external file, perhaps the first time the user will be a bit slow, but the subsequent visit to the site, users directly through the browser cache can be used, so as to reduce the number of HTTP requests for the best practice.

Written in the last words:

One problem that is often overlooked in raising the speed of Web page opening is responsiveness. For users, each operation, whether the return result is slow, or fast, should be timely response, the most typical example is: When users click to open a picture, whether there is a percentage of the progress bar, is a typical response design.