) 14 optimization rules for web page Acceleration

Translation: http://developer.yahoo.com/performance/rules.html

Recently, youmonitor. Us is optimizing the performance of web applications and foundArticleHigh Performance Web sites: the importance of front-end performance, I feel that its 14 optimization rules are very practical and operational. Therefore, it is translated for your reference.

WebPrime rule for Application Performance Optimization: First optimize the front-endProgram(Front-end)Because it is 80%Or the above end user response time is spent.

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? The following 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 the HTML file. 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 combines multiple script files to a single file to reduce the number of HTTP requests. Style Sheets can also be processed in a similar way. This method is simple but not widely used. On average, 10 U.S. websites have 7 script files and 2 style sheets on each page. 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. According to tenni Theurer's article browser cache usage-exposed! Description: 40-60% of daily access is the first visit. Therefore, speeding up page access for the first visitor is the key to user experience.

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 perspective, deploying content to servers with multiple geographically dispersed locations can 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 session statuses and replicating database transactions among 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 facilitates the distribution of 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. Switch to CDNCodeModification is easy, 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 10 years 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 and mod_deflate must be used in version 2. x.

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 stored 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 webpage content. 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 subsequent content display 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, you can download more than two images concurrently. 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 contain 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. However, from another perspective, 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 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 CSS expressions executed is a one-time expression, that is, when the first execution is performed, it replaces the expression with a clear value. 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. Place 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 as Yahoo! And my Yahoo! Both use the embedded method. In general, in a session, the home page is rarely accessed at this time, so the embedded method can get 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 of IE is 30 minutes, while that of Firefox is 1 minute.

Reducing host names reduces the number of DNS queries, 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 reverse engineer. 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. According to a survey of the top 10 websites in the United States, 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 and transmitted according to rule 4, the file size is reduced by 5% or higher at least the script moment.

Rule 11. Avoid redirection

The redirection function is completed through the HTTP status codes 301 and 302, such:

 
HTTP/1.1 301 moved permanently
 

 
Location: http://example.com/newuri
 

 
Content-Type: text/html
 

 

The browser automatically redirects requests to the URL specified by the location. The main issue of redirection is to reduce the user experience.

One of the most resource-consuming, frequent occurrence, and easily overlooked redirection is the final lack of/in the URL, such as accessing the ingress /. 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 OK10c24bc-4ab-457e1c1f"
 

 
Content-Length: 12195
 

Later, if the browser needs to verify an element, it uses the IF-None-match header to return 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
 

 
10c24bc-4ab-457e1c1f"
 

 
HTTP/1.1 304 not modified
 

 

Etags are constructed based on certain unique attributes of the server, such as apache1.3 and 2.x. the format is inode-size-timestamp, while in iis5.0 and 6.0, the format is 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 apply to Ajax as well. Of course, rule 3 is the most effective method:

Rule 4. Compress page elements

Rule 9. Reduce DNS queries

Rule 10. Minimize script files

Rule 11. Avoid redirection

Rule 13. Configure etags.