Yahoo team experience: 34 golden rules for website performance optimization

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

1. Minimize the number of HTTP requests

(1) Merging files 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 a stylesheet. When a script or style sheet is used in different pages, it may be a bit more cumbersome to make different changes, but even so, this approach is an important step in improving the performance of the page. CSS Sprites is an effective way to reduce image requests by placing all background images in an image file, and then displaying the different parts through the CSS's Background-image and Background-position properties. A picture map integrates multiple images into a single image, although the overall size of the file does not change, but it can reduce the number of HTTP requests. Image maps can only be used when all parts of the picture are close together on the page, such as the navigation bar.

2. Reduce the number of DNS lookups

3. Avoid jumping

4. cacheable Ajax

5. Delay Load Time

6, pre-loading,

7. Reduce the number of DOM elements

8, according to the Domain name Division page content

9. Minimize the number of IFRAME

10, do not appear 404 errors

11. Use Content distribution network

12. Specify expires or Cache-control for the file header

13, Gzip compressed file content

14. Configuring the ETag

15. Refresh the output buffer as soon as possible

16. Use get to complete AJAX requests

17. Place the style sheet on top

18. Avoid using CSS expressions

19. Using external JavaScript and CSS

20. Cut JavaScript and CSS

21. Replace @import with <link>

22. Avoid using filters

23. Place the script at the bottom of the page

24. Eliminate duplicate scripts

25. Reduced DOM Access

26. Develop Intelligent event handlers

27. Reduce Cookie Volume

28. Use no cookie domain name for page content

29. Optimize the image

30. Optimize CSS Sprite

31. Do not scale the image in HTML

32, Favicon.ico to be small and cacheable

Favicon.ico is a picture file located in the root directory of the server. It must exist, because even if you don't care if it's useful, the browser makes a request for it, so it's best not to return a 404 Not Found response. Because it is on the same server, it is sent once every time Coockie is requested. This image file also affects the download order, for example, in IE when you request additional files in onload, Favicon will download the additional content before it is loaded. Therefore, in order to reduce the favicon.ico caused by the drawbacks, to do:
File as small as possible, preferably less than 1K
At the right time (that is, you do not want to change favicon.ico, because it cannot be renamed when the new file is replaced), set the expires file header for it. You can safely set the expires file header to the next few months. You can make a judgment by checking the last editing time of the current favicon.ico.

ImageMagick can help you create a compact Favicon

33. Keep single content less than 25k

This limitation is mainly because the iphone cannot cache files larger than 25k. Note that this refers to the size after compression. Because simple GIZP compression may not be required, it is important to streamline files.

34. Packaging components into compound text

Wrapping page content into compound text is like an email with multiple attachments, which enables you to get multiple components in an HTTP request (remember: HTTP requests are extravagant). When you use this rule, first determine whether the user agent is supported (iphone is not supported).

Yahoo team experience: 34 golden rules for website performance optimization