34 golden codes for Yahoo website page Performance Optimization

Yahoo Team Experience: 34 golden codes for website page Performance Optimization

1. Minimize the number of HTTP requests

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.rjboy.cn in the address bar of your browser, the DNS server will return 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.

3. Avoid redirection
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.

4. cacheable AJAX

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 operations) and collapsed images, can also be postponed.

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.

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.

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.

9. Minimize the number of iframe
<Iframe> advantages: Solves the loading problems of slow third-party content labels and advertisements, Security sandbox, and parallel loading scripts.

<Iframe> disadvantages: the real-time content is empty, and loading takes time. This will block page loading, with no semantics.

10. Do not make a 404 error

11. Use the content delivery network
The closeness between users and your website server will affect the response time. Spreading your website content to multiple servers in different regions can speed up download.

12. Specify Expires or Cache-Control for the file header
This Code includes two aspects:
For static content: Set the file header expiration time to "Never expire" (Never expire)
For dynamic content: use the appropriate Cache-Control file header to help the browser with conditional requests

13. Gzip compressed file content
Gzip compression of all possible file types is a simple method to reduce the file volume and increase user experience.

14. Configure ETag
Entity tags (ETags) (Entity tag) it is a mechanism used by web servers and browsers to determine whether the content in the browser cache matches the original content on the server ("entity" is called "internal content ", including images, scripts, and style sheets ). The added ETag provides a more flexible mechanism for entity verification than using "last-modified date (last Edit Time. Etag is a unique string that identifies the version number of the content. The only format restriction is that it must be included in double quotation marks. The original server uses the response containing the ETag file header to specify the ETag of the page content.

15. Refresh the output buffer as soon as possible
When a user requests a page, it takes 200 to 500 milliseconds to organize HTML files in the background. During this period, the browser will remain idle and wait for the data to return. In PHP, you can use the flush () method, which allows you to send Compiled HTML response files to the browser first, in this case, the browser can download the content (scripts, etc.) in the file and process the remaining HTML pages at the same time in the background. The effect will be more obvious in the background or when the front-end is idle.
The best place for an output buffer application is to keep up with

16. Use GET to complete AJAX requests
Yahoo! The Mail team found that when XMLHttpRequest is used, the POST method in the browser is a two-step process: first send the file header before sending data. Therefore, it is most appropriate to use GET because it only needs to send a TCP packet (unless you have many cookies ). The maximum length of the URL in IE is 2 K. Therefore, if you want to send data that exceeds 2 K, you cannot use GET.
An interesting difference is that POST does not actually send data like GET. According to the HTTP standard, GET means "GET" data. Therefore, it is more meaningful to use GET when you only GET data (also in semantics). On the contrary, use POST when sending and saving data on the server.

17. Place the style sheet on the top
Studying Yahoo! When we put the style sheet in the

18. Avoid using CSS expressions)

19. use external JavaScript and CSS
Many performance rules are about how to process external files. However, before you take these measures, you may ask a more basic question: should JavaScript and CSS be placed in external files or in the page itself?
In practical applications, using external files can increase the page speed, because JavaScript and CSS files can generate cache in the browser. The JavaScript and CSS built-in in the HTML document will be re-downloaded with the HTML document in each request. This reduces the number of HTTP requests, but increases the size of HTML documents. On the other hand, if JavaScript and CSS in external files are cached by the browser, the size of the HTML document can be reduced without increasing the number of HTTP requests.
The key issue is that the cache frequency of external JavaScript and CSS files is related to the number of requests to HTML documents. Although it is difficult, there are still some indicators that can be measured. If a user browses multiple pages on your website in a session, and these pages repeatedly use the same script and style sheet, caching external files will bring more benefits.
Many websites do not have the ability to establish these metrics. For these websites, the best way to be determined is to reference JavaScript and CSS as external files. The exception to built-in code is the website homepage, such as Yahoo! Home Page and My Yahoo !. The home page has a small (maybe only once) page views in one session. You can find that the built-in JavaScript and CSS will speed up response time for end users.
For a homepage with large page views, there is a technology that balances the benefits of reducing HTTP requests brought about by built-in code and caching by using external files. One of them is built-in JavaScript and CSS on the homepage, but external files are downloaded dynamically after the page is downloaded. When these files are used on the subpage, they are cached in the browser.

20. Reduce JavaScript and CSS

21. Replace @ import with <link>
As mentioned above, CSS should be placed at the top to facilitate orderly loading and rendering.
In IE, @ import at the bottom of the page serves the same purpose as <link>, so it is best not to use it.

22. Avoid using filters.
The unique attribute of IE AlphaImageLoader is used to modify the translucent Effect of PNG images in versions earlier than 7.0. The problem with this filter is that when the browser loads an image, it terminates the rendering of the content and freezes the browser. Each element (not just an image) is computed once, increasing memory spending. Therefore, it has many problems.
The best way to avoid using AlphaImageLoader is to use the PNG8 format, which can work well in IE. If you really need to use AlphaImageLoader, use the underline _ filter to invalidate IE7 or later versions.

23. Place the script at the bottom of the page
The problem caused by the script is that it blocks parallel download of pages. We recommend that you download up to two concurrent content for each host name in the browser. If your image is placed on multiple host names, you can download more than two files simultaneously in each parallel download. However, when the script is downloaded, the browser will not download other files at the same time, even if the host name is different.
In some cases, it may not be easy to move the script to the bottom of the page. For example, if document. write is used in the script to insert the page content, it cannot be moved down. There may be scope issues. In many cases, this problem occurs.
A commonly used alternative method is to use a latency script. The DEFER attribute indicates that the script does not contain document. write, which tells the browser to continue displaying. Unfortunately, Firefox does not support the DEFER attribute. In Internet Explorer, scripts may be delayed, but the effect will not be as expected. If the script can be delayed, it can be moved to the bottom of the page. This will make your page Load faster.

24. Remove duplicate scripts

25. Reduce DOM access
Using JavaScript to access DOM elements is slow. Therefore, to obtain more pages, you should:
Cache related elements that have been accessed
After offline node updates, add them to the document tree.
Avoid using JavaScript to modify the page layout
For more information about this, see Julien Lecomte's article "high-performance Ajax Applications" in the YUI topic ".

26. develop intelligent event processing programs
Sometimes we will feel slow page response, because too many event handles are attached to the DOM tree element and some event sentences are frequently triggered. This is why event delegation is a good method. If you have 10 buttons in a div, you only need to append the event handle once on the div, instead of adding a handle for each button. When an event is bubbling, you can capture the event and determine which event was triggered.
You also do not have to wait for the onload event to operate the DOM tree. What you need to do is wait for the elements you want to access in the tree structure to appear. You don't have to wait until all the images are loaded.
You may want to replace onload with the DOMContentLoaded event, but you can use the onAvailable method in the YUI event application before all browsers support it.

27. Reduce Cookie volume

28. No coockie domain name is used for the page content
When the browser simultaneously requests a static image and sends coockie in the request, the server will not use these coockie in any way. Therefore, they only create network transmission because of some negative factors. All requests for static content that you should be sure to have no coockie. Create a subdomain name and use it to store all static content.

If your domain name is www.example.org, You can have static content on static.example.org. However, if you set coockie for the top-level domain name example.org instead of www.example.org, all requests for static.example.org contain coockie. In this case, you can purchase a new domain name to store static content, and keep the domain name free of coockie. Yahoo! Ymig.com, ytimg.com, and images-anazon.com are used by Amazon.
Another advantage of using a non-coockie domain name with static content is that some proxies (servers) may refuse to cache coockie content requests. A related suggestion is that if you want to determine whether you should use example.org or www.example.org as your homepage, you should consider the impact of coockie. If you ignore www, you will have no choice except to set coockie to * .example.org (* is a wildcard domain name resolution, representing the dudo note of all subdomain name translators, therefore, in terms of performance, it is best to use a sub-domain with www and set coockie on it.

29. Image Optimization

30. Optimize CSS Spirite
Arrange your images horizontally in Spirite, and vertical arrangement will slightly increase the file size;
The combination of closer colors in Spirite can reduce the number of colors, ideally less than 256 colors for the PNG8 format;
It is easy to move. Do not leave a large gap between Spirite images. Although this will not increase the file size, it requires less memory for the user agent to decompress the image into a pixel map. 100x100 is 10 thousand pixels while 1000x1000 is 1 million pixels.

31. Do not scale the image in HTML
Do not use an image that is larger than the actual size to set the length and width in HTML. If you need:

Your image (mycat.jpg) should be 100x100 pixels instead of downsize a 500x500 pixel image.

32. favicon. ico is small and can be cached.
Favicon. ico is an image file located in the root directory of the server. It must exist, because even if you don't care whether it is useful or Not, the browser will send a request to it, so it is best Not to return a 404 Not Found response. Because it is on the same server, coockie is sent every time it is requested. This image file will also affect the download sequence. For example, in IE, When you request an additional file in onload, favicon will download the additional content before it is loaded.

33. Keep a single content smaller than 25 KB
This restriction is mainly because the iPhone cannot cache files larger than 25 kb. Note that the size after decompression is used. Since gizp compression alone does not meet requirements, it is very important to streamline files.

34. Package components into composite text
Packaging page content into composite text is like an Email with multiple attachments. It allows you to obtain multiple components in an HTTP request (remember: HTTP requests are a luxury ). When using this rule, you must first determine whether the user agent is supported (not supported by the iPhone ).