34 golden rules for Yahoo website page performance optimization_html/css_WEB-ITnose

Yahoo team experience: 34 golden rules for website page performance optimization
1. Minimize the number of HTTP requests
80% of the end user’s response time is used to download various items content. This part of the time includes downloading images, style sheets, scripts, Flash, etc. in the page. The number of HTTP requests can be reduced by reducing the number of elements in the page. This is a crucial step in improving web page speed.
The way to reduce page components is actually to simplify the page design. So is there a way to maintain the richness of page content and speed up response time? Here are a few techniques for reducing the number of HTTP requests while potentially keeping your page content rich.

Merge files is a way to reduce HTTP requests by putting all scripts into one file. For example, you can simply put all CSS files into one style sheet. When scripts or style sheets need to be modified differently when used in different pages, this may be relatively troublesome, but even so, this method should be regarded as an important step in improving page performance.

CSS Sprites are an effective way to reduce image requests. Put all the background images into a picture file, and then use the CSS background-image and background-position properties to display different parts of the picture;

Picture map integrates multiple pictures into one picture middle. Although the overall size of the file will not change, the number of HTTP requests will be reduced. Image maps can only be used if all components of the image are close together on the page, such as a navigation bar. Determining the coordinates and sum of images may be tedious and error-prone. At the same time, using image map navigation is not readable, so this method is not recommended;

Inline images use the data:URL scheme. Image data is loaded into the page. This may increase the size of the page. Placing inline images in a stylesheet (cacheable) can reduce HTTP requests without increasing the page file size. But inline images are not yet supported by mainstream browsers.

Reducing the number of HTTP requests for the page is the first step you need to do. This is the most important way to improve first-time user wait times. As Tenni Theurer explains on her blog Browser Cahe Usage - Exposed!, HTTP requests take up 40% to 60% of response time without caching. Make the experience faster for those visiting your website for the first time!

2. Reduce the number of DNS lookups
The Domain Name System (DNS) provides the corresponding relationship between domain names and IPs, just like the relationship between names and their phone numbers in the phone book. When you enter www.dudo.org in the browser address bar, the DNS resolution server will return the IP address corresponding to this domain name. The process of DNS resolution also takes time. Generally, it takes 20 to 120 milliseconds to return the IP address corresponding to a given domain name. And during this process the browser will do nothing until the DNS lookup is completed.

Caching DNS lookups can improve page performance. This kind of caching requires a specific caching server, which is generally controlled by the user's ISP provider or local LAN, but it will also generate a cache on the computer used by the user. DNS information will be retained in the DNS cache of the operating system (DNS Client Service in Microsoft Windows systems). Most browsers have their own cache that is independent of the operating system. Since the browser has its own cache record, it is not affected by the operating system during a request.

By default, Internet Explorer caches DNS lookup records for 30 minutes, and its key value in the registry is DnsCacheTimeout. Firefox's cache time for DNS lookup records 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 (both browser and operating system are empty), the number of DNS lookups is the same as the number of host names in the page. This includes the host names contained in URLs, images, script files, style sheets, Flash objects, etc. in the page. Reducing the number of hostnames reduces the number of DNS lookups.

Reducing the number of hostnames can also reduce the number of parallel downloads on the page. Reducing the number of DNS lookups saves response time, but reducing parallel downloads increases response time. My guideline is to split the content on these pages into at least two but no more than four parts. The result is a trade-off between reducing the number of DNS lookups and maintaining a high degree of parallel downloads.

3. Avoid jumps
Jumps are implemented using 301 and 302 codes. The following is an HTTP header with response code 301:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
The browser will point the user to the URL specified in Location. All information in the header file is required in a jump, and the content part can be empty. Regardless of their name, 301 and 302 responses will not be cached unless an additional header option such as Expires or Cache-Control is added to specify that it be cached. The refresh tag and JavaScript of the element can also implement URL jumps, but if you must jump, the best way is to use the standard 3XX HTTP status code. This is mainly to ensure "back" Buttons work correctly.

But remember that jumping will reduce the user experience. Adding a jump between the user and the HTML document will delay the display of all elements in the page, because no files (images, Flash, etc.) will be downloaded before the HTML file is loaded.

There is a jump phenomenon that is often ignored by web developers but often wastes response time. This phenomenon occurs when the URL should have a slash (/) but is ignored. For example, when we want to visit http://astrology.yahoo.com/astrology, what is actually returned is a jump containing a 301 code, which points to http://astrology.yahoo.com/astrology/ (note trailing slash). In the Apache server, you can use Alias ​​or mod_rewrite or the DirectorySlash to avoid this.

Connecting new websites and old websites is another situation where the jump function is often used. In this case, it is often necessary to connect different content of the website and then jump according to different types of users (such as browser type, user account type). It is very simple to use jumps to switch between two websites, and the amount of code required is not much. Although using this approach reduces complexity for developers, it also reduces user experience. An alternative is to use Alias ​​and mod_rewrite if both are on the same server. If the redirect is due to different domain names, you can use Alias ​​or mod_rewirte to create a CNAME (a DNS record that saves the relationship between one domain name and another domain name) instead.

4. Cacheable AJAX
One of the often mentioned benefits of Ajax is the immediacy of feedback it brings to users due to its asynchronous nature of transmitting information from the backend server. However, using Ajax does not guarantee that users will not spend time waiting for asynchronous JavaScript and XML responses. In many applications, whether the user needs to wait for a response depends on how Ajax is used. For example, in a Web-based email client, users must wait for Ajax to return email query results that meet their criteria. It's important to remember that "asynchronous" does not mean "immediate".

In order to improve performance, it is important to optimize Ajax responses. The most important method to improve Ajxa performance is to make the response cacheable. For a detailed discussion, see Add an Expires or a Cache-Control Header. Several other rules also apply to Ajax:
Gizp compressed files
Reduce the number of DNS lookups
Streamline JavaScript
Avoid jumps
Configure ETags

Let’s take a look An example: A Web 2.0 email client will use Ajax to automatically download the user's address book. If the user has not made any changes to the address book since the last time they used the Email web application, and the Ajax response is cached via the Expire or Cacke-Control header, then the address book can be read directly from the last cache. . The browser must be told whether to use the cached address book or send a new request. This can be achieved by adding a timestamp containing the last edit time to the Ajax URL that reads the address book, for example, &t=11900241612, etc. If the address book has not been edited since the last download, the timestamp will not change, and it will be loaded from the browser's cache, thereby eliminating one HTTP request process. If the user has modified the address book, the timestamp is used to determine that the new URL does not match the cached response, and the browser will issue a request to update the address book.
Even if your Ajxa response is dynamically generated, even if it only applies to one user, it should be cached. Doing so can make your Web 2.0 applications faster.

5. Defer loading content
You can take a closer look at your web page and ask yourself "What content must be loaded first when the page is rendered? What content and structure can be loaded later?
To separate the entire process into two parts based on the onload event, JavaScript is an ideal choice. For example, if you have JavaScript for drag and drop and animation, then it can wait for the drag and drop element on the page to be loaded later. It occurs after the initial rendering. Other content such as hidden parts (content that appears after user operation) and images in the collapsed part can also be delayed.
Tools can save you work: YUI Image Loader can help you defer loading images in the fold, and YUI Get utility is a convenient way to include JS and CSS. For example, you can open Firebug's Net tab and take a look at Yahoo's homepage.
Performance goals and other website development practices complement each other when they are aligned. In this case, the method of improving website performance through programs tells us that if JavaScript is supported, the user experience can be removed first, but this must ensure that your website can run normally without JavaScript. After making sure the page is running properly, load the script to implement more fancy effects such as drag-and-drop and animation.

6. Preloading
Preloading and postloading seem to be exactly the opposite, but in fact preloading is to achieve another goal. Preloading is when the browser is idle, requesting page content (such as images, stylesheets, and scripts) that may be needed in the future. Using this method, when the user wants to access the next page, most of the content in the page has been loaded into the cache, so the access speed can be greatly improved.

Several preloading methods are provided below:
Unconditional loading: When the onload event is triggered, additional page content is loaded directly. 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 google.com homepage, but it can be used on the search results page.
Conditional loading: Based on the user's operations, we can basely determine the pages that the user may go to next and preload the page content accordingly. In search.yahoo.com you can see how additional page content is loaded as you type.
Have anticipatory loading: Use preloading when loading redesigned pages. This situation often occurs when users complain that "the new page looks cool but is slower than before" after the page is redesigned. The problem may be that users have a full cache of your old site but nothing cached for the new site. Therefore, you can avoid this result by loading a piece of content before visiting the new site. In your old site, use the browser's spare time to load the images and scripts used in the new site to improve 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 traverses the DOM more slowly. For example, when you add an event handler, the effect of looping through 500 and 5000 DOM elements will definitely be different.
The existence of a large number of DOM elements means that there are parts of the page that can be streamlined without removing the content and just replacing the element tags. Do you use tables in your page layout? Have you ever introduced more

elements just for layout? There may be a label that is suitable or semantically more appropriate for you to use.
YUI CSS utilities can bring great help to your layout: grids.css can help you achieve the overall layout, font.css and reset.css can help you remove the browser default format. It provides an opportunity to revisit the tags in your page, such as using

only when it makes sense semantically, rather than using it because it has a line-breaking effect.
The number of DOM elements is easy to calculate. You only need to enter in the Firebug console:
document.getElementsByTagName('*').length
So how many DOM elements are too many? This can be compared to similar pages that have good markup usage. For example, the Yahoo! homepage is a page with a lot of content, but it only uses 700 elements (HTML tags).

8. Divide the page content according to the domain name
Dividing the page content into several parts can enable you to maximize parallel downloading. Due to the impact of DNS lookups you first need to make sure that the number of domain names you use is between 2 and 4. For example, you can put the HTML content and dynamic content used on www.example.org, and store various components of the page (images, scripts, CSS) on statics1.example.org and statics.example.org respectively. .
You can find more relevant information in the article Maximizing Parallel Downloads in the Carpool Lane co-written by Tenni Theurer and Patty Chi.

9. Minimize the number of iframes
The ifrmae element can insert a new HTML document into the parent document. It's important to understand how iframes work so you can use them more effectively.

, because the header part of HTML is easy to generate and the header often contains CSS and JavaScript files, so that the browser can compile the remaining HTML in the background Download them in parallel at the same time. Example:

...



...

To prove the benefits of using this technology, Yahoo! Search took the lead in researching and completing user testing.

16. Use GET to complete AJAX requests
The Yahoo! Mail team discovered that when using XMLHttpRequest, the POST method in the browser is a "two-step" process: first send the file header, and then before sending data. So using GET is most appropriate because it only needs to send one TCP packet (unless you have a lot of cookies). The maximum length of a URL in IE is 2K, so if you want to send a data that exceeds 2K, you cannot use GET.
An interesting difference is that POST does not actually send data like GET. According to the HTTP specification, GET means "getting" data, so it makes more sense (semantically speaking) to use GET when you are just getting data, and conversely, use POST when sending and saving data on the server side.

17. Place the style sheet at the top
When studying the performance of Yahoo!, we found that placing the style sheet inside the of the document seems to speed up the page download speed. This is because placing the style sheet within

will cause the page to load and display in steps.
Performance-focused front-end servers often want pages to load in an orderly manner. At the same time, we also hope that the browser will display the received content as much as possible. This is especially important for pages with a lot of content and for users with slow connections. Returning visual feedback to the user, such as a process pointer, has been well studied and formally documented. In our study the HTML page is the process pointer. When the browser loads the file header in an orderly manner, the navigation bar, the logo at the top, etc. can all serve as visual feedback for users waiting for the page to load. This improves the user experience overall.
The problem with placing the stylesheet at the bottom of the document is that it interrupts the orderly rendering of content in many browsers, including Internet Explorer. The browser aborts rendering to avoid redrawing page elements caused by style changes. The user has to face a blank page.
The HTML specification clearly states that style sheets should be included in the

area of ​​the page: "Unlike , can only appear in the area, although it can use it multiple times". Whether it causes a white screen or unstyled content, it's not worth trying. The best solution is to load your style sheet in the document