Yahoo! Team practices: 34 golden codes for website performance optimization (I)-content

Yahoo! The predictional performance team brings best practices to improve web performance. They conducted a series of experiments, developed various tools, and wrote a lotArticleAnd blogs and participate in discussions at various meetings. The core of the best practice is to improve the website performance.

The excetional performance team summarized a series of methods to speed up the website. There can be 34 entries in 7 categories. It includes seven parts: content, server, Cookie, CSS, JavaScript, image, and mobile app.

There are 10 suggestions in the content section:

I. Content

1. Minimize HTTP requests
2. Reduce DNS Lookup
3. Avoid redirection
4. Cache ajxa
5. Postponed Loading
6. Advance Loading
7. Reduce the number of DOM elements
8. Divide page content by domain name
9. Minimum number of frames
10. Avoid 404 errors

1. Minimize the number of HTTP requests
80% of the end user response time is used to download various content. This part of time includes images, style sheets, scripts, and flash on the download page. You can reduce the number of HTTP requests by reducing the page elements. This is a key step to speed up the web page.
The method to reduce page components is to simplify the page design. Is there a way to maintain the richness of the page content and speed up the response time? Here there are several technologies that reduce the number of HTTP requests while keeping the page content rich.

Merge filesIt is a method to reduce HTTP requests by placing all scripts in one file. For example, you can simply put all CSS files into a style sheet. Different modifications are required when the script or style sheet is used on different pages, which may be relatively troublesome, but even so, this method should be taken as an important step to improve the page performance.

CSS SpritesIs an effective method to reduce image requests. Put all background images in an image file, and then use the CSSBackground-ImageAndBackground-PositionAttribute to display different parts of the image;

Image MapYes
Integrate multiple images into one image. Although the overall file size does not change, it can reduce the number of HTTP requests. An image map is only available when all the components of an image are close together on the page.
Can be used, such as the navigation bar. Determining the coordinates of an image is cumbersome and error-prone, and the use of image map navigation is not readable. Therefore, this method is not recommended;

Inline ImageThe data: URL scheme method is used to load image data to the page. This may increase the page size. Placing Inline images in a style sheet (Cache available) can reduce HTTP requests and avoid increasing the size of page files. However, Inline images are not supported by mainstream browsers.

Reducing the number of HTTP requests on a page is the first step. This is the most important way to improve the waiting time for the first access user. Like tenni Theurer's blog browser cahe usage-exposed! As mentioned in, HTTP requests occupy 40% to 60% of the response time without caching. Let those who visit your website for the first time get a faster experience!

2. Reduce DNS lookup times
The Domain Name System (DNS) provides a ing relationship between the domain name and the IP address, just like the relationship between the person's name and their phone number in the phone book. When you enter www.dudo.org in the address bar of your browser, the DNS server returns the IP address corresponding to this domain name. The DNS resolution process also takes time. Generally, it takes 20 to 120 milliseconds to return the IP address corresponding to the given domain name. In addition, in this process, the browser will not do anything until the DNS search is complete.

Cache DNS lookup can improve page performance. This kind of cache requires a specific cache server, which generally belongs to the user's ISP provider or local LAN control, but it will also be used by the user
Generated on the computer. The DNS information is retained in the DNS cache of the operating system.
Service ). Most browsers have their own caches independent of operating systems. Because the browser has its own cache records, it will not be affected by the operating system in a request.

Internet
By default, Explorer caches DNS lookup records for 30 minutes. Its key value in the registry is dnscachetimeout. Search DNS in Firefox
The record cache time is 1 minute, and its option in the configuration file is network. dnscacheexpiration (fasterfox changed this option to 1 hour ).

When the DNS cache in the client is empty (the browser and operating system are empty), the number of DNS queries is the same as the number of host names on the page. This includes host names contained in URLs, images, script files, style sheets, and flash objects on the page. Reducing the number of host names can reduce the number of DNS searches.

Reducing the number of host names can also reduce the number of parallel downloads on the page. Reducing the number of DNS searches can reduce the response time, but reducing the number of parallel downloads increases the response time. My guiding principle is
Is divided into at least two parts, but no more than four parts. This is a trade-off between reducing the number of DNS searches and maintaining a high degree of parallel downloads.

3. Avoid redirection
For redirection, 301 and 302 are used.Code. The following is an HTTP header with a response code of 301:
HTTP/1.1 301 moved permanently
Location: http://example.com/newuri
Content-Type: text/html

The browser directs the user to the URL specified in location. All information in the header file is required in one jump, and the content part can be blank. Regardless of their names, 301 and 302 rings
Should not be cached unless an additional header option is added, such as expires or cache-control to specify its cache. <Meat
/> The element refresh tag and javascript can also achieve URL jump, but if you have to jump, the best way is to use the standard 3xxhttp status generation.
To ensure that the "back" button can be correctly used.

However, remember that redirection will reduce the user experience. Adding a jump between the user and the HTML document will delay the display of all elements on the page, because no file (image, Flash, etc.) will be downloaded before the HTML file is loaded.

There is a jump that is often ignored by web developers but is often a waste of response time. This occurs when the URL should have a slash (/) but is ignored. For example, to access HTTP:
// Astrology.yahoo.com/astrology
Is actually a jump containing 301 code, it points to the http://astrology.yahoo.com/astrology/
(Note the slash at the end ). You can use alias, mod_rewrite, or the directoryslash on the Apache server to avoid this.

Connecting new websites and old websites is another situation that the jump function is often used. In this case, you often need to connect to different content of the website based on different types of users (such as browser type and User Account type ).
. Using redirection to switch between two websites is very simple and requires a small amount of code. Although this method can reduce complexity for developers, it also reduces user experience. One
The alternative method is to use alias and mod_rewrite and implementation when the two are on the same server. If you use redirection because of different domain names, you can use alias
Or mod_rewirte can be used to establish a cname (to save the DNS record of the relationship between one domain name and another domain name.

4. cacheable Ajax

One of the benefits that AJAX is often mentioned is its asynchronous transmission of information from the backend server, which brings instant feedback to users. However, Ajax does not guarantee that users are not waiting for asynchronous
JavaScript and XML response time. In many applications, whether users need to wait for a response depends on how Ajax is used. For example, in a Web-based email client
The user must wait for Ajax to return the mail query results that meet their conditions. Remember, "Asynchronous" does not smell "instant", which is very important.

To improve the performance, it is very important to optimize the Ajax response. The most important way to improve ajxa performance is to make the response cacheable. For more information, see add an expires or a cache-control header. Other rules also apply to Ajax:
Gizp compressed file
Reduce DNS lookup times
Simplified Javascript
Avoid redirection
Configure etags

Let's take an example: A web email client uses ajax to automatically download the user's address book. If you have used an email before
Web ApplicationsProgramWithout any modification to the address book, and the Ajax response is cached through the expire or cacke-control header, you can directly
Read the address book. You must tell the browser whether to use the address book in the cache or send a new request. This can be done by reading the address book Ajax
Add a timestamp containing the last editing time to the URL, for example, & t = 11900241612. If the address book has not been edited since the last download and the timestamp remains unchanged
Loading from the browser cache reduces an HTTP request process. If you have modified the address book, The timestamp will be used to determine that the new URL does not match the cached response, and the browser will update important requests.
Address book.
Even if your ajxa response is dynamically generated, even if it is only applicable to one user, it should be cached. This will make your web application faster.

5. Delayed content loading
You can take a closer look at your web page and ask yourself, "which content must be loaded first when the page is displayed? What content and structure can be loaded later?

The entire process is separated by the onload event into two parts. Javascript is an ideal choice. For example, if you have javascript for drag and drop and animation
Wait for loading later, because the drag-and-drop elements on the page only occur after initialization and rendering. Others, such as the hidden part of the content (the content displayed after the user operation) and the image in the collapsed part, can also be
Postponed Loading
Tool can save your workload: Yui image loader can help you postpone loading the collapsed image. Yui get Utility is a convenient method that includes JS and CSS. For example, you can open the net tab of firebug to check the Yahoo homepage.

When the performance goal is consistent with the development practices of other websites, it will complement each other. In this case, the method of improving website performance through programs tells us that when Javascript is supported, you can remove
User Experience, but this should ensure that your website can run normally without JavaScript. After confirming that the page is running normally, load the script to achieve more fancy effects such as drag-and-drop and animation.

6. Pre-Load

Pre-load and post-load seem to be the opposite, but in fact pre-load is to achieve another goal. Pre-loading is the page content that may be used in the future when the browser is idle (like, style sheet, and foot)
). In this way, when you want to access the next page, most of the content on the page has been loaded into the cache, which can greatly improve the access speed.

The following provides several pre-loading methods:
unconditional loading: when an onload event is triggered, additional page content is directly loaded. Taking Google.com as an example, you can see how its spirit image is loaded in onload. This spirit image is not required on the .com homepage, but can be used on the search results page.
conditional loading: Based on your operations, you can determine the pages that you may go to and pre-load the page content accordingly. In search.yahoo.com, you can see how to load additional page content when you enter the content.
expected loading: load
pre-load is used when you enter the redesigned page. This often occurs when the page is redesigned and users complain that "the new page looks cool, but it is slower than before ". The problem may be that the user has set up a complete cache for your old site
, but there is no cache for the new site. Therefore, you can load a content before accessing the new site to avoid such a result. Use the free time of the browser in your old site
load the images and scripts used in the new site to increase the access speed.

7. Reduce the number of DOM elements
A complex page means that more data needs to be downloaded, it also means that the efficiency of Javascript DOM traversal is slower. For example, when you add an event handle, the loop effect in the 500 and 5000 DOM elements is definitely different.
the existence of a large number of DOM elements means that there are some elements in the page that can be simplified without removing the content and simply replacing the element tag. Have you used tables in the page layout? Do you introduce more

elements just for layout? There may be a tag that is suitable for you or that is more appropriate for your purpose.
Yui CSS
utilities can bring great help to your layout: grids.css can help you implement the overall layout, and font.css and reset.css can help you remove the default format of the browser.
. It provides an opportunity to review tags on your page. For example, you can use

only when the semantics is meaningful, instead of using it because it has a line feed effect.
the number of DOM elements is easy to calculate. You only need to enter:
document. getelementsbytagname ('*'). length
How many DOM elements are there? This can be compared to a similar page with a good tag. For example, Yahoo! The homepage is a page with a lot of content, but it only uses 700 elements (HTML tags ).

8. Divide the page content based on the domain name

Dividing page content into several parts allows you to achieve parallel download to the maximum extent. Because of the impact of DNS lookup, you must first ensure that the number of domain names you use is between 2 and 4. For example, you can use
The HTML content and dynamic content are stored on www.example.org, and various components (images, scripts, and CSS) on the page are stored in
Statics1.example.org and statics.example.org.
You can find more information in the article maximizing parallel downloads in the carpool lane written by tenni Theurer and Patty chi.

9. Minimize the number of IFRAME
The ifrmae element can insert a new HTML document in the parent document. It is important to understand the mechanism of IFRAME before it can be used more effectively.

<IFRAME> advantages:

• Solve the Problem of loading slow third-party content labels and advertisements.
• Security Sandbox
• Parallel loading script

<IFRAME> disadvantages:

• The real-time content is blank and loading takes time.
• Will block page loading
• No Semantics

10. Do not make a 404 error
HTTP request time consumption is very large, so it is completely unnecessary to use an HTTP request to obtain a useless response (for example, 404 does not find a page, it will only reduce the user experience, but will not be of any benefit.

Some sites change the 404 error response page to "are you looking for ***", which improves the user experience, but also wastes server resources (such as databases ). The worst case is pointing to the external
The javascript link is faulty and Code 404 is returned. First, this kind of loading will destroy parallel loading. Secondly, the browser will try to find the useful part in the returned 404 response content when
JavaScript code.