Website performance optimization principles

We recommend that you install the firebug and yslow plug-ins in Firefox to facilitate debugging.

Golden rule for Web Application Performance Optimization: First optimize the front-end performance, because this is the cost of 80% or more of the end user response time.

Rule 1. Reduce the number of HTTP requests
80% of the end user response time is spent on front-end programs, and most of the time is spent on downloads of various page elements, such as style sheets, scripts, and Flash. Reducing page elements reduces the number of HTTP requests. This is the key to quickly display pages. One way to reduce the number of page elements is to simplify the page design. But is there any other way to achieve both rich content and quick response time? Here are some technologies: image maps combines multiple images into one image. The total file size does not change much, But it reduces the number of HTTP requests and accelerates the page display speed. This method is only applicable to consecutive images. At the same time, the definition of coordinates is annoying and error-prone.
CSS Sprites is a better method. It can combine images on the page to a single file, and use the background-image and background-position attributes of CSS to realistic part of the image. Inline images uses data: URL scheme to embed images in the page. This will increase the size of HTML files. Combining Inline images to your (cache) style sheet can not only reduce HTTP requests, but also avoid increasing the size of HTML files. Combined files can be reduced by combining multiple script files to a single file.
The number of HTTP requests. Style Sheets can also be processed in a similar way. This method is simple but not widely used. 10 U.S. websites each page has an average of 7 script files and 2 style sheets. When the scripts and style sheets between pages change greatly, this method will face great challenges, but if it is done, it will speed up the response time. Reducing the number of HTTP requests is the starting point for performance optimization. This improves the efficiency of the first visit. Tenni Theurer's article browser cache usage-exposed! Description: daily access of 40-60% data is the first visit. Therefore, accelerating the page access speed for the first visitor is a key to the user experience.
Key.

Rule 2. Use CDN (Content Delivery Network)

The user distance from the Web server also has a great impact on the response time. From the user's point of view, deploying the content department to multiple geographically dispersed servers will effectively increase the page loading speed. But where should we start?

As the first step to achieve the geographic distribution of content, do not try to reconstruct web applications to adapt to the distributed architecture. Changing the architecture will lead to multiple periodic tasks, such as synchronizing the session status, and copying data base transactions between multiple servers. In this way, attempts to shorten the distance between users and content may be delayed or prevented by the application architecture revision. We still remember that the 80-90% end user response time was spent on various elements on the download page, such as files, style sheets, scripts, and Flash. Instead of focusing on restructuring the system, it is better to distribute static content first. This not only greatly reduces the response time, but also makes it easy to implement distributed static content due to the presence of CDN.
CDN is a collection of geographically distributed Web servers for more efficient content publishing. Generally, the web server is selected for a specific user based on the network distance. Some large websites have their own CDN, but it is cost-effective to use services provided by CDN service providers such as Akamai Technologies, Mirror Image Internet, or limelight networks. In yahoo! Distribution of static content to CDN reduces the user impact time by 20% or more. It is easy to switch to the CDN for code modification, but it can speed up the website.

Rule 3. Add the Expires header
Webpage content is becoming richer and richer, which means more script files, style sheets, image files and Flash files. The first visitor will have to face multiple HTTP requests, but by using the Expires header, You Can cache these elements on the client. This avoids unnecessary HTTP requests in subsequent access. Expires header is most commonly used in image files, but it should also be used in script files, style sheets, and Flash. Browsers (and proxies) Use cache to reduce the number and size of HTTP requests and accelerate webpage loading. The Web server uses the Expires header to tell the client how long an element can be cached.
If the server is Apache, you can use expiresdefault to set the expiration date based on the current date. For example, expiresdefault "access plus 10 years" sets the expiration time to the 10-year calculation from the request time. Remember, if you use a long expiration time, you must modify the file name when the content changes. In yahoo! We often change our name as a step of Release: the version number is embedded in the file name, such as yahoo_2.0.6.js.

Rule 4. Compress page elements
By compressing the HTTP Response content, you can reduce the page response time. Starting from HTTP/1.1, the Web Client uses the accept-encoding header in the HTTP request to indicate the supported compression types, for example:

Accept-encoding: gzip, deflate. if the Web server detects the accept-encoding header, it uses the methods supported by the client to compress the HTTP Response and sets the content-encoding header, for example, content-encoding: gzip. Gzip is currently the most popular and effective compression method. Other methods, such as deflate, are ineffective and not popular. By using gzip, the content can be reduced by 70%. For Apache, The mod_gzip module must be used in version 1.3, while
In version, use mod_deflate. The Web server determines whether to compress Based on the file type. Most websites compress HTML files. However, it is worthwhile to compress the script file and style sheet. In fact, it is worthwhile to compress the task text information, including XML and JSON. Image files and PDF files should not be compressed because they are saved in compression format. Compressing them not only wastes the CPU, but may also increase the file size. Therefore, compressing as many file types as possible is a simple way to reduce the page size and improve user experience.

Rule 5. Place the style sheet on the head
We found that moving the style sheet to the head can increase the loading speed of the interface, so that the page elements can be displayed in sequence. In many browsers, such as IE, the problem that the style sheet is placed at the bottom of the document is that it prohibits the sequential display of the content on the web page. The browser blocks the display to avoid re-painting the page elements. The user can only see the blank page. Firefox does not block display, but this means that after the style sheet is downloaded, some page elements may need to be re-painted, which leads to flickering issues. The HTML specification clearly requires that the style sheet be defined in the head. Therefore, to avoid blank screen or flickering issues, the best way is to follow the HTML specification and put the style sheet in the head.

Rule 6: put the script file at the bottom
Like style files, we need to pay attention to the location of the script files. We need to try to put them at the bottom of the page, so that they can be displayed in sequence, and the maximum parallel download can be achieved. The browser will block the display until the style sheet is downloaded, so we need to put the style sheet in the head section. For a script, the display of the content after the script is blocked. Therefore, placing the script at the bottom means that more content can be quickly displayed. The second problem caused by the script is that it blocks the number of parallel downloads. The HTTP/1.1 Specification suggests that the number of concurrent downloads per host of the browser should not exceed 2. Therefore, if you distribute image files to multiple machines

Up to two parallel downloads are supported. However, when a script file is downloaded, the browser does not start parallel downloads or even downloads from other hosts. In some cases, it is not easy to move the script to the bottom. For example, the script uses the document. Write method to insert the page content. Domain issues may also exist. However, in many cases, there are still some methods. One alternative is to use a latency script ). The defer attribute indicates that the script does not include document. Write, indicating that the browser will continue to display the script. Unfortunately, Firefox does not support the defer attribute. In ie, the script may be delayed, but it may not be a long delay.
In addition, if the script can be delayed, it can be placed at the bottom.

Rule 7. Avoid CSS expressions
CSS expressions are powerful (and dangerous) Expressions used to dynamically set CSS attributes. IE, which supports CSS expressions starting from version 5, such as backgourd-color: expression (new date (). gethours () % 2 ?" # B8d4ff ":" # f08a00 "), that is, the background color is switched once every hour. The problem with CSS expressions is that they are executed more frequently than most people expect. Not only is the expression calculated when the page is displayed and resize, but also when the page is rolled, or even when the mouse moves on the page, the expression is recalculated. One way to reduce the number of times CSS expressions are one-time expressions.
A definite value replaces the expression. If dynamic settings are required, use the event handler function instead. If you must use CSS expressions, remember that they may be executed thousands of times, thus affecting page performance.

Rule 8. Set Javascript

And CSS in external files

Many of the above performance optimization rules are optimized based on external files. Now, we must ask the following question: should JavaScript and CSS be included in an external file or in a page file? In the real world, using external files will speed up page display, because external files will be cached by the browser. If the built-in JavaScript and CSS reduce the number of HTTP requests on the page, the page size increases. On the other hand, when an external file is used, it will be cached by the browser, and the page size will be reduced without increasing the number of HTTP requests. Therefore, in general, external files are more feasible. The only exception is that the embedded method is more effective for the home page, such
Yahoo! And my Yahoo! Both use the embedded method. Generally, in a session, the primary page has less access at this time, so the embedded method can get a faster user response time.

Rule 9. Reduce DNS queries
DNS is used to map host names and IP addresses. Generally, it takes 20 ~ 120 ms. To achieve higher performance, DNS resolution is usually cached at multiple levels, such as the caching server maintained by the ISP or LAN, local Machine operating system cache (such as DNS Client Service on Windows), browser. The default DNS cache time is 30 minutes, and Firefox's default buffer time is 1 minute. IE reduces the number of DNS queries by the host name, but may reduce the number of parallel downloads. Avoiding DNS queries can reduce the response time, while reducing the number of parallel downloads may increase the response time.
A feasible compromise is to distribute the content to at least two, at most four different host names.

Rule 10. Minimize Javascript

Code

To minimize JavaScript code, you can delete unnecessary characters in JavaScript code to reduce the download time. Two popular tools are jsmin and Yui compressor. Obfuscation is an alternative method to minimize source code. Like minimization, it reduces the source code size by deleting comments and spaces, and can also confuse the code. As part of obfuscation, function names and variable names are replaced with short strings, making the code more compact and more difficult to read, making it difficult to be reversed. Dojo compressor (shrinksafe) is the most common obfuscation tool. Minimization is a secure and straightforward process, while obfuscation is more complex and prone to problems. From to the United States
According to the survey of the top 10 websites, by minimizing the number of files, the number of files can be reduced by 21%, and the number of obfuscation can be reduced by 25%. In addition to minimizing external script files, embedded script code should also be minimized. Even if the script is compressed to 4 according to the method, the script is minimized to reduce the file size by 5% or higher.

Rule 11. Avoid redirection
The redirection function is completed through both HTTP status codes 301 and 302, such as: HTTP/1.1 301 moved permanently location: http://example.com/newuri Content-Type: the text/html browser automatically redirects requests to the URL specified by location. The main issue of redirection is to reduce the user experience. One of the most resource-consuming, frequently occurring and easily overlooked redirection is the final lack of URL/, such as the access to the http://astrology.yahoo.com/astrology
Will be redirected

Http://astrology.yahoo.com/astrology /. In Apache, you can solve this problem through alias, mod_rewrite, or directoryslash.

Rule 12. Delete duplicate script files
Adding duplicate JS script files to a page will affect the performance, that is, it will create unnecessary HTTP requests and additional JS execution. Unnecessary HTTP requests occur in IE, while Firefox does not generate redundant HTTP requests. Additional JS execution will occur in IE or Firefox. One way to avoid repeated script files is to use the template system to create a script management module. In addition to preventing repeated script files, this module can also perform dependency check and add version numbers to the script file name to achieve a long expiration time.

Rule 13. Configure etags
Etags is a mechanism used to determine whether the elements in the browser cache match those in the Web server. It is more flexible than last-modified date. Etag is a string used to uniquely represent an element version. It must be included in quotation marks. The Web server first specifies the etag in response: HTTP/1.1 200 OK <03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f "Content-Length: 12195. Later, if the browser needs to verify an element, it uses if-None-match
The header returns etag to the Web server. If etag matches, the server returns code 304, saving the download time: Get/I/yahoo.gif HTTP/1.1 Host: us.yimg.com <03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f "HTTP/1.1 304 not modified etags are constructed based on certain unique attributes of the server, for example, the format of apache1.3 and 2.xis inode-size-timestamp, while
And 6.0 in the format of filetimestamp: changenumber. In this way, the etag of the same element is different on different Web servers. In this way, in a multi-web server environment, the browser first requests an element from server1, and then verifies the element from server2. because the etag is different, the cache is invalid and must be downloaded again.

Therefore, if you do not use the flexible verification mechanism provided by the etags system, it is best to delete etag. Deleting etag reduces the size of the HTTP response header and subsequent requests. Microsoft supports articles describing how to delete etags. In Apache, you only need to set fileetag none in the configuration file.

Rule 14. cache Ajax
The performance optimization rules are also applicable to Web 2.0 applications. The most important way to improve Ajax performance is to make its response cacheable, as discussed in "add Expires header in rule 3. The following rules also apply to Ajax. Of course, rule 3 is the most effective method:

Find and organize them online.

We recommend that you install the firebug and yslow plug-ins in Firefox to facilitate debugging.

Golden rule for Web Application Performance Optimization: First optimize the front-end performance, because this is the cost of 80% or more of the end user response time.

Rule 1. Reduce the number of HTTP requests
80% of the end user response time is spent on front-end programs, and most of the time is spent on downloads of various page elements, such as style sheets, scripts, and Flash. Reducing page elements reduces the number of HTTP requests. This is the key to quickly display pages. One way to reduce the number of page elements is to simplify the page design. But is there any other way to achieve both rich content and quick response time? Here are some technologies: image maps combines multiple images into one image. The total file size does not change much, But it reduces the number of HTTP requests and accelerates the page display speed. This method is only applicable to consecutive images. At the same time, the definition of coordinates is annoying and error-prone.
CSS Sprites is a better method. It can combine images on the page to a single file, and use the background-image and background-position attributes of CSS to realistic part of the image. Inline images uses data: URL scheme to embed images in the page. This will increase the size of HTML files. Combining Inline images to your (cache) style sheet can not only reduce HTTP requests, but also avoid increasing the size of HTML files. Combined files can be reduced by combining multiple script files to a single file.
The number of HTTP requests. Style Sheets can also be processed in a similar way. This method is simple but not widely used. 10 U.S. websites each page has an average of 7 script files and 2 style sheets. When the scripts and style sheets between pages change greatly, this method will face great challenges, but if it is done, it will speed up the response time. Reducing the number of HTTP requests is the starting point for performance optimization. This improves the efficiency of the first visit. Tenni Theurer's article browser cache usage-exposed! Description: daily access of 40-60% data is the first visit. Therefore, accelerating the page access speed for the first visitor is a key to the user experience.
Key.

Rule 2. Use CDN (Content Delivery Network)

The user distance from the Web server also has a great impact on the response time. From the user's point of view, deploying the content department to multiple geographically dispersed servers will effectively increase the page loading speed. But where should we start?

As the first step to achieve the geographic distribution of content, do not try to reconstruct web applications to adapt to the distributed architecture. Changing the architecture will lead to multiple periodic tasks, such as synchronizing the session status, and copying data base transactions between multiple servers. In this way, attempts to shorten the distance between users and content may be delayed or prevented by the application architecture revision. We still remember that the 80-90% end user response time was spent on various elements on the download page, such as files, style sheets, scripts, and Flash. Instead of focusing on restructuring the system, it is better to distribute static content first. This not only greatly reduces the response time, but also makes it easy to implement distributed static content due to the presence of CDN.
CDN is a collection of geographically distributed Web servers for more efficient content publishing. Generally, the web server is selected for a specific user based on the network distance. Some large websites have their own CDN, but it is cost-effective to use services provided by CDN service providers such as Akamai Technologies, Mirror Image Internet, or limelight networks. In yahoo! Distribution of static content to CDN reduces the user impact time by 20% or more. It is easy to switch to the CDN for code modification, but it can speed up the website.

Rule 3. Add the Expires header
Webpage content is becoming richer and richer, which means more script files, style sheets, image files and Flash files. The first visitor will have to face multiple HTTP requests, but by using the Expires header, You Can cache these elements on the client. This avoids unnecessary HTTP requests in subsequent access. Expires header is most commonly used in image files, but it should also be used in script files, style sheets, and Flash. Browsers (and proxies) Use cache to reduce the number and size of HTTP requests and accelerate webpage loading. The Web server uses the Expires header to tell the client how long an element can be cached.
If the server is Apache, you can use expiresdefault to set the expiration date based on the current date. For example, expiresdefault "access plus 10 years" sets the expiration time to the 10-year calculation from the request time. Remember, if you use a long expiration time, you must modify the file name when the content changes. In yahoo! We often change our name as a step of Release: the version number is embedded in the file name, such as yahoo_2.0.6.js.

Rule 4. Compress page elements
By compressing the HTTP Response content, you can reduce the page response time. Starting from HTTP/1.1, the Web Client uses the accept-encoding header in the HTTP request to indicate the supported compression types, for example:

Accept-encoding: gzip, deflate. if the Web server detects the accept-encoding header, it uses the methods supported by the client to compress the HTTP Response and sets the content-encoding header, for example, content-encoding: gzip. Gzip is currently the most popular and effective compression method. Other methods, such as deflate, are ineffective and not popular. By using gzip, the content can be reduced by 70%. For Apache, The mod_gzip module must be used in version 1.3, while
In version, use mod_deflate. The Web server determines whether to compress Based on the file type. Most websites compress HTML files. However, it is worthwhile to compress the script file and style sheet. In fact, it is worthwhile to compress the task text information, including XML and JSON. Image files and PDF files should not be compressed because they are saved in compression format. Compressing them not only wastes the CPU, but may also increase the file size. Therefore, compressing as many file types as possible is a simple way to reduce the page size and improve user experience.

Rule 5. Place the style sheet on the head
We found that moving the style sheet to the head can increase the loading speed of the interface, so that the page elements can be displayed in sequence. In many browsers, such as IE, the problem that the style sheet is placed at the bottom of the document is that it prohibits the sequential display of the content on the web page. The browser blocks the display to avoid re-painting the page elements. The user can only see the blank page. Firefox does not block display, but this means that after the style sheet is downloaded, some page elements may need to be re-painted, which leads to flickering issues. The HTML specification clearly requires that the style sheet be defined in the head. Therefore, to avoid blank screen or flickering issues, the best way is to follow the HTML specification and put the style sheet in the head.

Rule 6: put the script file at the bottom
Like style files, we need to pay attention to the location of the script files. We need to try to put them at the bottom of the page, so that they can be displayed in sequence, and the maximum parallel download can be achieved. The browser will block the display until the style sheet is downloaded, so we need to put the style sheet in the head section. For a script, the display of the content after the script is blocked. Therefore, placing the script at the bottom means that more content can be quickly displayed. The second problem caused by the script is that it blocks the number of parallel downloads. The HTTP/1.1 Specification suggests that the number of concurrent downloads per host of the browser should not exceed 2. Therefore, if you distribute image files to multiple machines

Up to two parallel downloads are supported. However, when a script file is downloaded, the browser does not start parallel downloads or even downloads from other hosts. In some cases, it is not easy to move the script to the bottom. For example, the script uses the document. Write method to insert the page content. Domain issues may also exist. However, in many cases, there are still some methods. One alternative is to use a latency script ). The defer attribute indicates that the script does not include document. Write, indicating that the browser will continue to display the script. Unfortunately, Firefox does not support the defer attribute. In ie, the script may be delayed, but it may not be a long delay.
In addition, if the script can be delayed, it can be placed at the bottom.

Rule 7. Avoid CSS expressions
CSS expressions are powerful (and dangerous) Expressions used to dynamically set CSS attributes. IE, which supports CSS expressions starting from version 5, such as backgourd-color: expression (new date (). gethours () % 2 ?" # B8d4ff ":" # f08a00 "), that is, the background color is switched once every hour. The problem with CSS expressions is that they are executed more frequently than most people expect. Not only is the expression calculated when the page is displayed and resize, but also when the page is rolled, or even when the mouse moves on the page, the expression is recalculated. One way to reduce the number of times CSS expressions are one-time expressions.
A definite value replaces the expression. If dynamic settings are required, use the event handler function instead. If you must use CSS expressions, remember that they may be executed thousands of times, thus affecting page performance.

Rule 8. Set Javascript

And CSS in external files

Many of the above performance optimization rules are optimized based on external files. Now, we must ask the following question: should JavaScript and CSS be included in an external file or in a page file? In the real world, using external files will speed up page display, because external files will be cached by the browser. If the built-in JavaScript and CSS reduce the number of HTTP requests on the page, the page size increases. On the other hand, when an external file is used, it will be cached by the browser, and the page size will be reduced without increasing the number of HTTP requests. Therefore, in general, external files are more feasible. The only exception is that the embedded method is more effective for the home page, such
Yahoo! And my Yahoo! Both use the embedded method. Generally, in a session, the primary page has less access at this time, so the embedded method can get a faster user response time.

Rule 9. Reduce DNS queries
DNS is used to map host names and IP addresses. Generally, it takes 20 ~ 120 ms. To achieve higher performance, DNS resolution is usually cached at multiple levels, such as the caching server maintained by the ISP or LAN, local Machine operating system cache (such as DNS Client Service on Windows), browser. The default DNS cache time is 30 minutes, and Firefox's default buffer time is 1 minute. IE reduces the number of DNS queries by the host name, but may reduce the number of parallel downloads. Avoiding DNS queries can reduce the response time, while reducing the number of parallel downloads may increase the response time.
A feasible compromise is to distribute the content to at least two, at most four different host names.

Rule 10. Minimize Javascript

Code

To minimize JavaScript code, you can delete unnecessary characters in JavaScript code to reduce the download time. Two popular tools are jsmin and Yui compressor. Obfuscation is an alternative method to minimize source code. Like minimization, it reduces the source code size by deleting comments and spaces, and can also confuse the code. As part of obfuscation, function names and variable names are replaced with short strings, making the code more compact and more difficult to read, making it difficult to be reversed. Dojo compressor (shrinksafe) is the most common obfuscation tool. Minimization is a secure and straightforward process, while obfuscation is more complex and prone to problems. From to the United States
According to the survey of the top 10 websites, by minimizing the number of files, the number of files can be reduced by 21%, and the number of obfuscation can be reduced by 25%. In addition to minimizing external script files, embedded script code should also be minimized. Even if the script is compressed to 4 according to the method, the script is minimized to reduce the file size by 5% or higher.

Rule 11. Avoid redirection
The redirection function is completed through both HTTP status codes 301 and 302, such as: HTTP/1.1 301 moved permanently location: http://example.com/newuri Content-Type: the text/html browser automatically redirects requests to the URL specified by location. The main issue of redirection is to reduce the user experience. One of the most resource-consuming, frequently occurring and easily overlooked redirection is the final lack of URL/, such as the access to the http://astrology.yahoo.com/astrology
Will be redirected

Http://astrology.yahoo.com/astrology /. In Apache, you can solve this problem through alias, mod_rewrite, or directoryslash.

Rule 12. Delete duplicate script files
Adding duplicate JS script files to a page will affect the performance, that is, it will create unnecessary HTTP requests and additional JS execution. Unnecessary HTTP requests occur in IE, while Firefox does not generate redundant HTTP requests. Additional JS execution will occur in IE or Firefox. One way to avoid repeated script files is to use the template system to create a script management module. In addition to preventing repeated script files, this module can also perform dependency check and add version numbers to the script file name to achieve a long expiration time.

Rule 13. Configure etags
Etags is a mechanism used to determine whether the elements in the browser cache match those in the Web server. It is more flexible than last-modified date. Etag is a string used to uniquely represent an element version. It must be included in quotation marks. The Web server first specifies the etag in response: HTTP/1.1 200 OK <03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f "Content-Length: 12195. Later, if the browser needs to verify an element, it uses if-None-match
The header returns etag to the Web server. If etag matches, the server returns code 304, saving the download time: Get/I/yahoo.gif HTTP/1.1 Host: us.yimg.com <03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f "HTTP/1.1 304 not modified etags are constructed based on certain unique attributes of the server, for example, the format of apache1.3 and 2.xis inode-size-timestamp, while
And 6.0 in the format of filetimestamp: changenumber. In this way, the etag of the same element is different on different Web servers. In this way, in a multi-web server environment, the browser first requests an element from server1, and then verifies the element from server2. because the etag is different, the cache is invalid and must be downloaded again.

Therefore, if you do not use the flexible verification mechanism provided by the etags system, it is best to delete etag. Deleting etag reduces the size of the HTTP response header and subsequent requests. Microsoft supports articles describing how to delete etags. In Apache, you only need to set fileetag none in the configuration file.

Rule 14. cache Ajax
The performance optimization rules are also applicable to Web 2.0 applications. The most important way to improve Ajax performance is to make its response cacheable, as discussed in "add Expires header in rule 3. The following rules also apply to Ajax. Of course, rule 3 is the most effective method:

Find and organize them online.