10 principles for improving content in Web site performance

English Address: http://developer.yahoo.com/performance/rules.html

Yahoo! 's exceptional Performance team brings best practices for improving Web performance. They conducted a series of experiments, developed tools, wrote a large number of articles and blogs and participated in discussions at various conferences. The core of best practices is designed to improve site performance.

Excetional Performance Team summed up a series of ways to improve the speed of the website. Can be divided into 7 major categories of 34 articles. including content, server, cookies, CSS, JavaScript, pictures, mobile applications, such as seven parts.

The content section altogether has 10 pieces of advice:

I. Part of the content

1. Minimizing HTTP Requests
2. Reduce DNS Lookup
3. Avoid jumping
4. Cache Ajxa
5. Deferred loading
6. Load ahead
7. Reduce the number of DOM elements
8. Dividing page content with a domain name
9. Reduce the size of the IFRAME
10. Avoid 404 errors

1, minimize the number of HTTP requests

80% of the time the end-user responds is used to download the content. This part of the time includes images, stylesheets, scripts, Flash, and so on in the download page. You can reduce the number of HTTP requests by reducing the elements in the page. This is a key step in improving the speed of your Web page.

The way to reduce page components is to simplify page design. So is there a way to keep the richness of the content of the page and to speed up response time? Here are a few techniques to reduce the number of HTTP requests and possibly keep the page content rich.

A merged file is a way to reduce the HTTP request by putting all the scripts in a file, such as simply putting all the CSS files into one style sheet. When a script or style sheet is used on different pages, you need to make different changes, which can be a bit tricky, but even so, this is an important step in improving page performance.

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

The picture map is to integrate multiple images into a single image. Although the overall size of the file does not change, you can reduce the number of HTTP requests. Picture maps can only be used when all parts of a picture are close together in a page, such as a navigation bar. It is not recommended to determine the coordinates of a picture and may be cumbersome and error-prone, while using picture map navigation is not readable;

Inline images are used to load the image data into the page using the Data:url scheme method. This may increase the size of the page. Placing an inline image in a stylesheet (cacheable) can reduce HTTP requests while avoiding increasing the size of the paging file. But inline images are not currently supported by mainstream browsers. Click here to view the content of the Web production tutorial channel

Reducing the number of HTTP requests on a page is the first step you need to take. This is the most important way to improve the first-time access to user latency. As Tenni Theurer's Blog Browser Cahe usage-exposed!, HTTP requests take up 40% to 60% of the response time without caching. Let those who visit your site for the first time get a faster experience!

2, reduce the number of DNS lookups

The Domain Name System (DNS) provides a correspondence between domain names and IP, just as the names in the phone book relate to their phone numbers. When you enter www.dudo.org in the browser's address bar, the DNS resolution server returns the IP address of the domain name. The process of DNS parsing also takes time. Typically, it takes 20 to 120 milliseconds to return an IP address for a given domain name. And in this process the browser will not do anything until the DNS lookup is complete.

Caching DNS lookups can improve page performance. This caching requires a specific caching server, which typically belongs to the user's ISP or local area network control, but it also produces a cache on the computer that the user is using. DNS information remains in the operating system's DNS cache (DNS Client Service in Microsoft Windows System). Most browsers have their own caches that are independent of the operating system. Because the browser has its own cache record, it is not affected by the operating system on a single request. Click here to view the content of the Web production tutorial channel

Internet Explorer caches DNS lookup records by default for 30 minutes, and its key value in the registry is dnscachetimeout. Firefox's DNS Lookup record cache time is 1 minutes, and its option in the configuration file is network.dnscacheexpiration (fasterfox this option to 1 hours).

When the DNS cache in the client is empty (both the browser and the operating system are empty), the number of DNS lookups is the same as the number of host names on the page. This includes the host names included in the page, such as URLs, pictures, script files, style sheets, flash objects, and so on. Reducing the number of host names can reduce the number of DNS lookups.

Reducing the number of host names can also reduce the number of concurrent downloads in the page. Reducing the number of DNS lookups can save response time, but reducing concurrent downloads increases response time. My guiding principle is to divide the contents of these pages into at least two parts, but not more than four parts. The result is a trade-off between reducing the number of DNS lookups and maintaining a high level of concurrent downloads.