[Switch] Yahoo front-end Optimization of military rules

Yahoo gave a detailed description of 34 front-end optimization rules (including 22 yslow rules) and downloaded and forwarded ponytail translations (from The Palan image ).

• Minimize HTTP requests reduces HTTP requests
  

Images, CSS, scripts, Flash, and so on all increase the number of HTTP requests. Reducing the number of these elements can reduce the response time.

Writing multiple JS and CSS files into a file whenever possible. It is not good to write images directly into the page. It should be written into CSS, use CSS Sprites to splice small images and use background to locate them.

• Use a content delivery network using CDN Technology
• Add an expires or a cache-control header to set the header file expiration or static Cache

The browser uses cache to reduce the number of HTTP requests to speed up page loading. If a long expiration time is added to the page header, the browser will always cache the elements on the page. However, if something on the page changes, you need to change the name. Otherwise, the user will not take the initiative to refresh the page ~ This can be done by modifying the. htaccess file.

Note: The htaccess file can help us achieve: webpage 301 redirection, custom 404 error pages, changing file extensions, allowing/blocking access to specific users or directories, forbidding directory lists, and configuring default documents.

• Gzip components gzip Compression

The GZIP format is a common compression technology. Almost all browsers have the ability to decompress the GZIP format, and it can be compressed in a very large proportion. Generally, the compression rate is 85%. Compression is not compressed. You can perform the test here.
5. Put stylesheets at the top. Place CSS on the top so that viewers can see the complete style of the website as soon as possible.

• Put scripts at the bottom put JS at the bottom

After the website is rendered, set the function. Of course, these JS files do not affect the content performance during your loading process.

• Avoid CSS expressions avoid CSS expressions

The CSS expression is terrible. It only takes a lot of effort to execute the content supported by IE. You need to move the mouse to perform re-calculation, but sometimes this must be used for browser compatibility. | IE6 is used to die! ~

• Make JavaScript and CSS external link JS and CSS external links

As mentioned above, some common JS and CSS files can be used as external links. For example, I am a jquery file from Google's external links, if a visitor has downloaded and cached this file when Browsing another website that uses this external link file, he does not need to download it when browsing my website! ~

• Reduce DNS lookups reduces DNS Lookup

It seems that we want to reduce the number of resources that the website calls from outside. My Google analysis and Picasa's external link images are included.

• Minify JavaScript and CSS reduces the size of JS and CSS

Writing JS and CSS is skillful. You can use the least code to implement the same function, reduce gaps, enhance logic, and use abbreviations, of course, there are also many tools that can help you achieve this.

• Avoid redirects avoid redirection

When the link is written, although "http: // www. today-S-ooxx. COM and http: // www. today-S-ooxx. COM/"has only one final"/", but the results are different. The server needs to take the time to redirect the former to the latter and then perform the jump. Pay attention to this, you can also use alias, mod_rewrite, or directoryslash in Apache.

• Remove duplicate scripts Delete duplicate scripts

The browser that repeatedly calls the Code does not recognize and ignore the code, but will calculate it again, which is of course a big waste.

• Configure etags configure etags

Note: The client requests a page (). The server returns to page A and adds an etag to page. The client displays the page and caches the page together with etag. The customer requests page a again and passes the etag returned by the server in the last request to the server. The server checks the etag and determines that the page has not been modified since the last client request. The server returns the response 304 (not modified -- not modified) and an empty response body.

• Make Ajax cacheable cache Ajax

Ajax responds in real time. Before the browser receives new data, the old data is cached, which improves the efficiency.

• Flush the buffer early release the buffer as early as possible

When a user makes a page request, the server needs to spend 200 to 500 milliseconds to splice HTML, write it between the head and the body, and release the buffer. In this way, the file header can be sent first, then, send the file content to Improve the efficiency.

• Use get for Ajax requests Ajax request using get

The get method has only one interaction with the server (sending data), while the POST method requires two (sending the data in the header ).

• Post-Load components delayed component loading

Yui image loader is a good example of Loading required components first for page initialization and loading others.

• Preload Components

Content that may be used after loading in advance does not conflict with delayed loading. Its purpose is to provide faster response for subsequent requests. For details, refer to the CSS Sprites application on the Google homepage.

• Note: http://www.cnblogs.com/lecaf/archive/2011/04/08/lazyload.html

Reduce the number of DOM elements to reduce the number of DOM elements

A complex page structure means a longer download and response time, and a more reasonable and efficient use of tags to construct pages. This is a prerequisite for a good front-end.

• Split components internal SS domains cross-origin separation component

Multiple sources of page components can increase your parallel downloads, but be careful not to use too many. If you have more than 2-4 domain names, the DNS search mentioned above will be wasted.

• Minimize the number of iframes to reduce the number of IFRAME

Ifames needs to be used more effectively.
IFRAME advantages: it is helpful for downloading slow third-party content such as advertisements, security sandbox, and parallel downloading scripts.
IFRAME disadvantage: even if it is empty, there will be a large amount of resource consumption, it will block the onload of the page, non-semantic

• 22. Do not display the 404 page for no 404 S

404 pages appear in the site itself (non-Search Results). Meaningless 404 pages will affect user experience and consume server resources.

• 23. Reduce cookie size reduce cookie

The cookie is exchanged between the server and the browser through the file header to minimize the cookie volume and set a reasonable expiration time, which can greatly improve the efficiency.

• 24. Use cookie-free domains for components use a cookie-free domain name for the component

Cookie reading of Static components is a waste. It is a good way to store your static components using another domain name without cookies, alternatively, you can store only domain names with WWW in cookies.

• 25. Minimize Dom access reduces Dom access times

JS is slow to access the Dom. Try not to use js to set the page layout.

• 26. Develop smart Event Handlers develops flexible event handling handles

If too many elements on the DOM tree are added to the event handle, the response efficiency will be low. The Yui event tool has an onavailable method that helps you flexibly set the DOM Event handle.

• 27. Use choose <link> over @ import instead of @ import

Using @ import in IE is the same as using <link> at the bottom of the page. We mentioned that we should put <link> on the top.

• 28. Avoid filters avoid the use of filters

If Alpha transparency is required, do not use alphaimageloader. It is inefficient and only applicable to IE6 and earlier versions. Use png8 images. If you want to use it, add _ filter to avoid affecting IE7 + users.

• 29. optimize images Optimized images

Converting your GIF to png8 will be a good way to reduce the volume. There are also many ways to process your jpg and PNG images to achieve the optimization effect.

• 30. Optimize CSS Sprites optimize CSS Sprites

In CSS Sprites, you can arrange images vertically and compact as much as possible, and arrange images of similar colors together to reduce the size of the image and increase the display speed of the page image.

• 31. Don't scale images in HTML. Do not scale the image in HTML.

The size of the image to be used is large. After the width of the 1000x1000 image is "100" Height = "100", the size of KB will not be reduced.

• 32. Make favicon. ICO small and cacheable reduce the size of favicon. ICO and cache it

The website's browser ICO should not be changed frequently, so it will be cached for a long time, and it is best to control it below 1 K.

• 33. Keep components under 25 k ensures that the component is less than 25 K

The iPhone cannot cache more than 25 KB of components, and this must be before being compressed.

• 34. Pack components into a multipart document package the component into a multi-part document

Just like adding an attachment to an email, an HTTP request is enough, but this technology requires your proxy support, which is not supported by the iPhone.

[Switch] Yahoo front-end Optimization of military rules