14 Rules for faster-loading Web Sites

These rules are the key to speeding up your web pages.
They 've been tested on some of the most popular sites on the Internet
And have successfully specified ced the response times of those pages
25-50%.

The key insight behind these best practices is the realization that
Only 10-20% of the total end-user response time is spent getting
HTML document to the browser.
You need to focus on the other 80-90% if you want to make your pages
Noticeably faster.
These rules are the best practices for optimizing the way servers and
Browsers handle that 80-90% of the user experience.

These pages are the companion web site for the book high
Performance Web Sites
.
The examples referenced in the book are hosted here.
Navigate through the rules listed below to find the associated examples.
Each rule page also contains a link to the Yahoo!
Developer Network Performance blog
.
There you will find a brief summary of the rule along with comments.

• Rule
  1-make fewer HTTP requests
• Rule 2-Use a content
  Delivery Network
• Rule 3-add
  Expires header
• Rule 4-Gzip
  Components
• Rule 5-put
  Stylesheets at the top
• Rule 6-put
  Scripts at the bottom
• Rule 7-avoid CSS
  Expressions
• Rule 8-make
  JavaScript and CSS external
• Rule 9-Reduce DNS
  Lookups
• Rule 10-Minify
  Javascript
• Rule 11-avoid
  Redirects
• Rule 12-Remove
  Duplicate scripts
• Rule 13-configure
  Etags
• Rule 14-make Ajax
  Cacheable

Read more:

• How these rules
  Came about
• Yslow
  ,
  Yahoo's Performance Analysis Tool
• Ydn
  Performance blog
• Yui
  Performance blog
• Links from
  The book
• sleep.cgi
  
  Source code

 

 

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
Combine 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.
Definition is an annoying and error-prone job. CSS Sprites is a better method. It can combine images on the page to a single file and use the CSS
The background-image and background-position attributes are used to specify the desired image. Use Inline images
Data: URL scheme to embed images in the page. This will increase the size of HTML files. Combination of Inline images
To your (cache) style sheet, you can reduce HTTP requests and avoid increasing the size of HTML files. Combined files
You can combine 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. 10
The U.S. website has an average of 7 script files and 2 style sheets per page. When the script and style sheet between pages change
This method will face a lot of challenges when it is very large, 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.
Function. Tenni Theurer's article browser cache usage-exposed! Description: 40-60% data.
Is the first access, So 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 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 sessions
Status, where data is copied 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
80-90% of the end user response time is 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 own their own CDN, but use such as Akamai Technologies, Mirror Image Internet, or
The services provided by limelight networks and other CDN service providers will be cost-effective. In yahoo! Distribution of static content to CDN reduces user impact time
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,
Expires header, which can be cached on the client. This avoids unnecessary HTTP requests in subsequent access. Expires header
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 HTTP
The number and size of requests to 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 to release.
Step: the version number is embedded in the file name, for example, 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 passes
The accept-encoding header indicates the supported compression types, for example:

Accept-encoding: gzip, deflate. If the Web server detects accept-Encoding
Header, which uses the methods supported by the client to compress the HTTP response, and sets the content-encoding header, such as content-encoding:
Gzip. Gzip is currently the most popular and effective compression method. Other methods, such as deflate, are ineffective and not popular. Gzip can reduce the content
70%. For Apache, The mod_gzip module must be used in version 1.3, while for version 2.x, mod_deflate must be used.
The Web server determines whether to compress Based on the file type. Most websites compress HTML files. However
Compression of script files and style sheets is also worthwhile. 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 a compressed 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, put style sheets in
The problem at the bottom of the document is that it disables 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
The display will not be blocked, 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 specifications 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 is not included
Document. Write, indicating that the browser will continue to display. Unfortunately, Firefox does not support the defer attribute. IE
Script execution 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 from version 5, such
Backgourd-color: expression (New
Date (). gethours () % 2 ?" # B8d4ff ":" # f08a00 "), that is, the background color is switched once every hour. CSS
The problem with the expression is that the number of executions exceeds the expectation of most people. Not only when the page is displayed and resize
Calculates the expression, and recalculates the expression when the page is rolled or even when the mouse moves on the page. One way to reduce CSS
The expression execution frequency is a one-time expression, that is, when the first execution is performed, it is replaced by a clear number. 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 have to ask a question: JavaScript and CSS.
Should it 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
Although JavaScript and CSS reduce the number of HTTP requests on the page, they increase the page size.
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. Generally, in a session
Page access is less at this time, so embedded methods 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 by the ISP
Or the caching server maintained by the LAN, the operating system cache of the Local Machine (such as the 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 host names to Reduce DNS
The number of 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
The content is distributed to at least 2 and at most 4 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
According to surveys on large websites, by minimizing, files can be reduced by 21%, while 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 the HTTP status codes 301 and 302, such as HTTP/1.1 301 moved permanently.
Location: http://example.com/newuri Content-Type: text/html browser auto redirect request
On the URL specified by location, the main issue of redirection is to reduce the user experience. URL is the most resource-consuming, frequent, and easily overlooked redirection.
The last missing/, such as the access question http://astrology.yahoo.com/astrology will be redirected

Http://astrology.yahoo.com/astrology /. In Apache, you can use
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
But Firefox does not generate additional 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 duplicate script files, this module can also perform dependency checks and add version numbers to script file names.
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.
More flexible element verification mechanism. Etag is a string used to uniquely represent an element version. It must be included in quotation marks. The Web server first specifies
Etag: 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
The IF-None-match header is returned to the Web server. If the 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
The problem is that they are constructed based on some 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 same element is deployed on different Web servers.
Its etag is different. In this way, in a multi-web server environment, the browser first requests an element from server1 and then sends it to server2.
Verify this element. 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 HTTP Response
And the size of the HTTP header for subsequent requests. Microsoft supports articles describing how to delete etags. In Apache, you only need to set fileetag in the configuration file.
None.

 

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, just as "rule 3 adds
The Expires header is discussed as follows. The following rules also apply to Ajax. Of course, rule 3 is the most effective method: