Best practices for improving website performance

Translated part of "http://developer.yahoo.com/performance/rules.html,

 

Class 1: content
1 make fewer HTTP requests reduce the number of HTTP requests most of the response time occurs on the front end, most of the time is used to download page components: image, CSS, JS, Flash, and so on. Reducing the number of these components is the key to accelerating page rendering. One method is to simplify the design of the page, but is there a way to show rich content and make the response time faster? The following are some methods: Merge files by merging all the steps or styles into a script or style to reduce HTTP requests; CSS Sprites is one of our favorite methods to reduce HTTP requests, that is, to merge your background image, and then display the background image through background-image and background-position; Inline images use data: URL scheme embeds image data on the page, which increases the size of the HTML page, but you can write it into CSS, which is not supported by some browsers.
2 Reduce DNS lookups Reduce DNS queries
3 avoid redirects avoid redirection
4 make Ajax cacheable
5 post-Load components post load component if you have javascript Code or library for drag-and-drop or animation, this part can be waited, because drag and drop will not be available until the page rendering is complete. Yui image loader can delay image loading. Yui get Utility is a convenient method to call JS and CSS.
6 preload components:
7 Reduce the number of DOM elements reduce the number of DOM elements. Enter document on the firebug console. getelementsbytagname ('*'). length: You can see the number of DOM elements.
8. Split components into SS domains cross-origin Placement component
9. Minimize the number of iframes to minimize the number of IFRAME
10 no 404 s no 404

I found fenng has been translated and sorted out.
Yahoo! The predictional performance team has made outstanding contributions to the Web Front-end. The well-known optimization rules also range from 13 to 14, and then to 20, and even 34 today-they are keeping pace with the times. The latest 34 articles are also classified for different angles.

Web Front-end optimization Best Practices

2. Minimize HTTP requests (make fewer HTTP requests)
   As the first one, it may be the most important one. According to Yahoo! The data analysis of the research team, a large part of user access will be the biggest benefit of this article. There are several common methods to effectively reduce HTTP requests:
   · 1) Merge files, such as merging multiple CSS files into one;
   · 2) CSS Sprites uses CSS background-related elements to absolutely locate the background image. For details, see: CSS Sprites: Image slicing's kiss of death.
   · 3) image map
   · 4) Inline images use data: URL scheme to embed image data into actual pages.
4. Reduce DNS lookups)
   It must be clear that the DNS search overhead is very high. In addition, I think this is Yahoo! Common Faults of all sites, Yahoo! The main site may not be obvious enough. Some sites have similar problems. For domestic sites, if too many widgets outside the site are used, too many DNS lookup problems may occur.
6. Avoid redirection (avoid redirects)
   It is not an absolute avoidance. Try to reduce it as much as possible. In addition, pay attention to unnecessary redirection. For example, adding a/(slash) next to the Web site subdirectory can effectively avoid a redirection. There is a difference between http://www.dbanotes.net/arch and http://www.dbanotes.net/arch. If it is an Apache server, this problem can be eliminated by configuring alias, mod_rewrite, or directoryslash.
8. Make Ajax cacheable)
   Response time is crucial to Ajax. Otherwise, the user experience will never be better. The effective method to increase the response time is cache. Other optimization rules are also valid for this article.
10. Delayed loading component (post-Load components)
12. Preload Components)
    Strictly speaking, the above two are all about the flexible use of the asynchronous idea.
14. Reduce the number of DOM elements)
16. Split components into multiple domains (split components into SS domains)
    The main purpose is to improve the parallel download capability of page components. But do not cross too many domain names, otherwise there will be some conflicts with the second one.
18. Minimum number of IFRAME (Minimize the number of iframes)
    If you are familiar with Seo, IFRAME is a secret of SEO. For front-end optimization, IFRAME has its own advantages and disadvantages. Let's look at the problem.
20. Eliminate HTTP 404 errors (no 404 S)
    The full test of page links and continuous tracking of Web server error logs can effectively reduce 404 errors and improve user experience. It is worth mentioning that the 404 error caused by CSS and Java Script is often overlooked because of its slight "difficulty" in positioning.

 Web Front-end optimization best practices-Server

2. Use CDN (use a content delivery network)
   The popularity of CDN in China is not enough. However, we have a unique problem between China Telecom and China Netcom. If we optimize this problem, we can basically get CDN or similar results (pretend to be so ).
4. Add an expires or a cache-control header)
   Each browser has a specific solution. For Apache example, [Note: the example below is not detailed enough, and some adjustments need to be added to the specific environment ]:
   Expiresactive on
   Expiresbytype image/GIF "modification plus 1 weeks"
   After the mod_expire module is enabled for Lighttpd:
   $ HTTP ["url"] = ~ "\. (JPG | GIF | PNG) $ "{
   Expire. url = ("" => "Access 1 years ")
   }
   Nginx example reference:
   Location ~ * \. (JPG | GIF | PNG) $ {
   If (-F $ request_filename ){
   Expires Max;
   Break;
   }
   }
6. Compressed Content (gzip components)
   For the vast majority of sites, this is a necessary step to effectively reduce the network traffic pressure. Some people may worry about the impact of CPU compression on the CPU. Don't worry about it. Nginx example:
   Gzip on;
   Gzip_types text/plain text/HTML text/css ext/JavaScript;
   For more information, see:
   How does IIS enable gzip compression?
8. Set etags (configure etags)
   Etag may be ignored by most website maintainers. Before this series of optimization rules emerged, most websites on the Internet may ignore this problem. Of course, etag does not have a significant impact on the performance of most sites. Unless it is an RSS-oriented website. [I saw a friend criticize and say that the write is simple, and that IE does not support etag. Specifically, ie supports etag, but you should pay attention to the etag bug when using IIS .]
10. Refresh the buffer as early as possible (flush the buffer early)
    After thinking about this article for a long time, it seems that it is still asynchronous. Can it better improve user experience?
12. Use the get Method for Ajax requests (use get for Ajax requests)
    XMLHttpRequest Post takes two steps, while get takes only one step. Note that the maximum length of the URL that can be processed by get on IE is 2 K.
    Cookie for Web Front-end optimization Best Practices
    The third part is Cookie-oriented. Currently, there are only two practice rules.
    1. Reduce cookie size)
    Cookie is an interesting topic. According to RFC 2109, each client can maintain a maximum of 300 cookies and a maximum of 20 cookies for each domain name. (In fact, most browsers have more than this cookie, for example, Firefox has 50 cookies ), each cookie can contain a maximum of 4 K. Note that the 4 K here may not be a strict 4096 cookie based on different browsers. Do not leave it far. The most important thing for cookies is to control the cookie size as much as possible and avoid inserting useless information.
    2. Use cookie-free domains for components to use domain name-independent cookies for Web Components)
    This topic was mentioned in previous discussions on Web image servers. Here, the Web component (Component) refers to static files, slice CSS, and Yahoo! The static files are all on yimg.com. When the client requests static files, the impact of repeated cookie transmission on the primary domain name (Yahoo.com) is reduced.
    

CSS for Web Front-end optimization Best Practices
Best practices for Web Front-end optimization Part 4 Targets CSS. Currently, there are a total of 6 practice rules. For more information, seeArticle: Writing efficient CSS

1. Put CSS at the top of the code page (put stylesheets at the top)
   I think the official explanation is a bit vague. This is actually related to user access expectations. CSS is placed at the top, and the browser can parse and render HTML pages from top to bottom. No one like to wait, and the browser has taken this into consideration.
2. Avoid CSS expressions (avoid CSS expressions)
   I personally think that things that can be done through CSS expressions can also be done through other means and the risk is lower.
3. Strip JavaScript and CSS from the page (make JavaScript and CSS external)
   After divestiture, it can be individually processed, such as compression or cache policies.
4. Simplified JavaScript and CSS (Minify JavaScript and CSS)
   It may be better without JavaScript or CSS. However, this is not possible. So, try to be smaller. The short syntax can be abbreviated.
5. Use <link> instead of @ importchoose <link> over @ import
   In ie, the @ import command is equivalent to the link mark written at the bottom of HTML. This is against the first article.
6. Avoid using filter (avoid filters)

Web Front-end optimization best practices in Javascript
Javascript for Web Front-end optimization best practices. There are six rules, several repeated in CSS. The most important thing for front-end optimization is "practice". It is easy to understand this. The key is to "practice", "execute", and "feedback ", to get benefits.

1. put the script at the bottom of the HTML code page (put scripts at the bottom)
   when a script is being downloaded, the browser cannot do anything else (serialized ). So, throw it to the end for processing. Some functional Scripts may be implemented in a dilemma. However, many Chinese websites use the Google Analytics service for website data analysis. For this, it is absolutely feasible to put it at the bottom of the page.
2. make JavaScript and CSS external
3. simplified JavaScript and CSS (Minify JavaScript and CSS)
4. remove duplicate scripts (remove duplicate scripts)
   This is quite common for some websites with historical or forum content. There are too many changes before and after taking over the maintenance personnel, and everyone has their own set. This will cause some potential troubles.
5. reduce Dom access (minimize Dom access)
   there are three suggestions:
   · cache references to accessed elements)
   · update nodes offline and add them to the tree (update nodes "offline" and then add them to the tree)
   · avoid using JavaScript to output the page layout-it should be about CSS (avoid fixing layout with JavaScript)
6. develop smart Event Handlers
   in addition to the English explanation, this article also reminds you about Java Script Memory leakage.

Web Front-end optimization best practices: Image
Best practices for Web Front-end optimization Part 6 is image-oriented, which currently has four rules. Yahoo! The image optimization: How many of these 7 Mistakes are also very useful for reference. Let's talk about it together.

2. Optimize images)
   Are images in GIF, JPG, or PNG format used? Use images in PNG format as much as possible, with more functions and smaller sizes (compared with GIF ).
   For PNG images, use pngcrush or similar tools for optimization. Common tools are as follows:
   · Pngcrush http://pmt.sourceforge.net/pngcrush/
   · Pngrewrite http://www.pobox.com /~ Jason1/pngrewrite/
   Optipng http://www.cs.toronto.edu /~ Cosmin/pngtech/optipng/(refer: tutorial)
   · Pngouthttp: // advsys.net/ken/utils.htm
   For more information, see five tips for the valid tive use of PNG images.
   JPEG image optimization tool:
   · Megatran (http://jpegclub.org /)
   It must be emphasized that, for image design personnel, please consider designing web-oriented images. It should be a habit to design large ones out of acceptable sizes without moving them, instead of superb skills, you only need to remember it.
4. Use CSS Sprites to optimize images (optimize CSS Sprites)
   As mentioned before, simply put, "using CSS background-related elements to absolutely locate the background image" turns multiple HTTP calls into one call. For more information, see: CSS Sprites: image slicing's kiss of death
   I have seen abuse of this technique. It is a good idea to merge multiple background images into one to reduce HTTP calls. But remember that this large image cannot be too "heavy". I have seen more than 100 K background images. A single image slows down the entire website. For better examples, refer to the Yahoo relationship diagram.
6. Do not use scaled images in HTML (don't scale images in HTML)
   In more cases, it may be because you are too lazy to make images of the appropriate size. If you are processing images in batches, you may be able to use an imagemagic command (convert. It must be mentioned that there are too many pages that are difficult to stretch images to save them!
8. Use a smaller and cacheable favicon. ICO (make favicon. ICO small and cacheable)
   Smaller and cacheable, both of which may not be a problem. The problem is that too many sites do not have favicon. ICO at all. Sometimes, to determine whether the blog of an independent domain name is professional, you can check whether there is favicon. ICO.

Web Front-end optimization best practices-mobile (iPhone)
The last part of the best web browser optimization practices is for mobile apps, but only for the iPhone. Currently, there are only two rules.

1. A Single Data Object smaller than 25 K (keep components under 25 k)
   This seems to be only for iPhone research. We recommend that you keep a single web data object below 25 kb. Why 25 k? Apple official information indicates that the web objects that can be cached in memory can support a maximum of 10 MB, but after testing, it was found that it is about 25 kb. The iPhone's outstanding performance in the market has forced web workers to consider how to optimize it. I believe this part is constantly changing.
2. pack components into a multipart document
   package web page components into a multi-part document. The purpose is to reduce HTTP requests.