Yahoo! Content of the best website experience code

Http://developer.yahoo.com/performance/rules.html

Yahoo! The predictional performance team brings best practices to improve web performance. They conducted a series of experiments, developed various tools, wrote a lot of articles and blogs, and participated 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. Reduce the IFRAME size
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. Place all background images in an image file and display different parts of the image through the background-image and background-position attributes of CSS;

Image MapIs to 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 can be used only when all the components of an image are close together on the page, 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 images use the data: URL scheme method 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 http://www.dudo.org/in the address bar of your browser, the dns server returns the IP address of the 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 generate a cache on the user's computer. DNS information is stored in the DNS cache of the Operating System (DNS Client Service in Microsoft Windows ). 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.

By default, Internet Explorer caches DNS lookup records for 30 minutes. The key value in the registry is dnscachetimeout. Firefox caches DNS search records for one minute. The option in the configuration file is network. dnscacheexpiration (fasterfox changed this option to one 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 to divide the content on these pages 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

Redirection is implemented using code 301 and code 302. 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 name, 301 and 302 responses are not cached unless an additional header option, such as expires or cache-control, is added to specify the cache. The <meat/> 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 code, this is mainly to ensure that the "back" button can be used correctly.

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, when we want to access the http://astrology.yahoo.com/astrology, a jump containing 301 code is actually returned, 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 and jump to 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. An alternative method is to use alias and mod_rewrite and implementation when the two are on the same server. If redirection is used because of different domain names, you can use alias or mod_rewirte 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 will not spend time waiting for Asynchronous JavaScript and XML responses. 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, you must wait for Ajax to return mail query results that meet their requirements. 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 haven't made any changes to the address book after using the e-mail web application last time, and the Ajax response is cached through the expire or cacke-control header, then you can read the address book from the cache. You must tell the browser whether to use the address book in the cache or send a new request. This can be achieved by adding a timestamp containing the last editing time to the Ajax URL that reads the address book, for example, & t = 11900241612. If the address book has not been edited since the last download and the timestamp remains unchanged, it will be loaded from the browser cache to reduce 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 the address book for important requests.

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, it will wait for loading later, because the drag-and-drop elements on the page only occur after initialization and rendering. Other images, such as hidden content (content displayed after user operation) and collapsed images, can also be postponed.

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, the user experience can be removed first, however, 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 requests page content (such as, style sheets, and scripts) that may be used in the future when the browser is idle ). 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 the 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: Use preload when loading redesigned pages. 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 established a complete cache for your old site, but there is no cached content for the new site. Therefore, you can load a content before accessing the new site to avoid such a result. In your old site, use the free time of the browser to 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, and it also means that JavaScript traversal of Dom is more efficient. 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 by replacing the element tag. Have you used tables in the page layout? Do you introduce more <div> 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 greatly help your layout: grids.css can help you implement the overall layout. font.css and reset.css can help you remove the default browser format. It provides an opportunity to review tags on your page. For example, you can use <div> only when the semantics is meaningful, instead of using it because it has a line feed effect.

The number of DOM elements can be easily calculated. You only need to enter the following in the firebug console:
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 place the HTML content and dynamic content used on www.example.org, and store various page components (images, scripts, and CSS) on statics1.example.org and statics.example.org respectively.
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 that there is a problem with the link to the external JavaScript and Code 404 is returned. First, this kind of loading will destroy parallel loading. Second, the browser will try to find useful parts in the returned 404 response content as JavaScript code for execution.