Web site performance Optimization practices

Content Directory

before optimization, the key is to analyze the current Web performance, to find performance bottlenecks, so as to identify the most need to improve the place, if the energy is limited, first focus on the improvement can significantly improve the performance point;

The High Performance website Construction Guide proposes a golden rule of performance:

only 10%-20% of the end-user response time is spent on downloading HTML documents, while the remaining 80%-90% of the time is spent on all components of the download page.

as this article will implement a complete optimization process, so we still start from the background;

Case Description:

optimize the size of your site before:

2 js, a page header, a footer, 3 css;

Type: Blog class site; background logic simple; homepage less than 10 SQL queries;

Home HTML document 52KB;

The first step: Background optimization, enable page caching;

Experiment site Home background logic is not complex, no more than 10 SQL queries, by viewing the timeline, this site in the acquisition of HTML documents, the time spent less than 20% of the total response time, optimization did not use the cache, all the data is read from the database, here, we use static page cache, The entire page of the homepage is fully stored in the cache (for the use of Yii static page cache, refer to Here );

Check the HTML document generation time to detect the optimization effect;

The first byte time is significantly shortened for 376ms;html generation, and the background time is reduced by a factor.

before optimization:

after optimization:

The second step, DNS domain name resolution acceleration:

DNS resolution is the first step for a user to visit a site, before which your site cannot do anything;

The DNS resolution time of the site should not exceed 500ms, if the site original DNS resolution time is too long, it should consider the use of third-party resolution accelerator service;

Experimental site of the original DNS resolution is slow, the average time-consuming 1017ms, is very long; for DNS acceleration, you can use the DNS domain name resolution Accelerator service, the site adopted a free DNS accelerator service Dnspod, the effect is good, after use average time to 370ms;

Pre-acceleration test:

using DNS domain name resolution service after the test:

Step Three: Use CDN acceleration;

with the third-party CDN acceleration, the time is reduced to 2.1s, and the main cost is that the number of concurrent downloads is somewhat low, if the number of concurrent downloads can be increased, the overall load time will be reduced;

Note: Personal advice, enable CDN Best put in the last step, and so on the site itself after the optimization is done, then enable CDN can obviously see the optimization effect. (After the CDN, due to the reason of the CDN cache, the observation site itself optimization is not very convenient);

in the fourth step, multiple servers are used to increase the amount of parallel loading:

principle: The number of concurrent downloads of a browser to the same domain name is 2 by default, and the http.1.0 is set at 4. In this way, we can use different domain names to improve the speed of the download;

the number of downloads in the observation, the first parallel download is 4, the initial view is the browser for the same domain name source of the download limit, so consider to put some static files on different servers; by putting CSS and JS on different servers; The results are not ideal and the speed is not improved.

think of where have seen, the browser must be placed in the page header of the CSS and JS download completed before the download of other static components;

On the parallel download point, the following will continue to experiment whether there is room for optimization.

The fifth step, merging scripts and style sheets;

the homepage of the site uses 2 JS and 3 CSS. If the simple copy of the way, JS and CSS are integrated into a file, not only the operation of trouble, but also inconvenient to manage later. There are many merged tools on the network, this site uses CSS and JS Merge optimization tool-minify (:http://code.google.com/p/minify/). If using the Yii framework, more YII integrated version (minscript Extension), a few simple steps of the configuration, the page will automatically merge all the JS and CSS files;

about the Minscript Extension for use, please refer to: Https://bitbucket.org/TeamTPG/minscript/wiki/Usage

Sixth step, compress css/js/html/xml;

different Web server settings differ, the site uses the Linux/apache,

Add the following code to the. htaccess file in the Web root directory:

#set Compress

<ifmodule mod_deflate.c>

addoutputfilter DEFLATE html xml PHP js CSS

</ifmodule>

The Firefox tool can be seen, before compression, the size of the HTML document is 25KB; the combined JS size is 138KB;

after compression, the HTML document size is 6.2KB. JS size is 39.8KB, reduce transmission time by 2/3 ;

Sixth step, maximize the reduction of HTTP requests;

add Expires header, enable the static content cache, JPG, GIF and other files cache;

The method is also added in. htaccess:

# Image and Flash content Caching for one Month

<filesmatch ". (flv|gif|jpg|jpeg|png|ico|swf) $ ">

Header Set Cache-control "Max-age=2592360″

</FilesMatch>

Conclusion

View the final test results, the overall implementation of a large performance improvement, the final page display time of 1.62s (the test is using a third-party web Velocimetry tool, all test results are not cached in the third party local conditions). Take a closer look at the last few add-ons on this site: there is a third-party website AD (the moment when the ad is loaded, the page has all been rendered, has little impact on the user experience), and CNZZ statistics. In this case, after the 12th item is loaded, the entire page is presented in front of the user, optimizing the final result is 1.1s, faster than the optimization load speed 2s; Due to physical conditions (virtual machines, foreign sites) limit, this optimization will be the end of this (follow-up on the parallel download to make a fuss, See if there is room for further improvement).

This optimization is primarily based on front-end optimizations, most of which are guided by the book's Guide to High-performance Web building If your web front end is not fully optimized, it is strongly recommended to read this book;

This is a book you can only draw on for three hours, but the value of the harvest is much greater than the one you pay.

Enclose the catalogue in this book:

Introduction A: The importance of front-end performance

The 1th Chapter: Rules to reduce HTTP requests

2nd: Rule 2--Use content Publishing Network

3rd Chapter: Rule 3--Add expires head

4th chapter: Rule 4--Compression Components

5th: Rule 5--putting style sheets on top

6th: Rule 6--put the script at the bottom

7th: Rule 7--avoid CSS expressions

Chapter 8th: Rules 8--using external JavaScript and CSS

9th: Rule 9--reduce DNS lookups

Chapter 10th: Rules 10--streamlining JavaScript

11th: Rule 11--Avoid redirection

12th: Rule 12--removing duplicate scripts

13th: Rule 13--Configuration ETag

14th: Rule 14--make Ajax cacheable

The 15th chapter: The ten sites of destruction

page size, response time, YSlow level

How to test

Web site performance Optimization practices