YAHOO34--Yahoo! Web front-end website optimization

Yahoo gives a detailed description of the 34 rules that optimize the loading speed of the website (including the YSlow rule 22), and download the translation of the forwarded ponytail (from the Palanga image).

1.Minimize HTTP requests reduces HTTP requests

Images, CSS, script, Flash, and so on all increase the number of HTTP requests, reducing the number of these elements to reduce response time. The multiple JS, CSS in the possible case of writing into a file, the page directly written to the picture is not good practice, it should be written into the CSS, using CSS sprites to use the background to locate the small image.
2.Use a Content Delivery Network leverages CDN Technology

CDN is really a good thing, 8 over the server provider of this service is generally charged, I used to buy the domestic space there is this but I did not know what to use, now no ...
3.Add an Expires or a Cache-control header set header file expiration or static cache

The browser will use the cache to reduce the number of HTTP requests to speed up page loading time, if the page header with a long expiration time, the browser will always cache the elements in the page. However, if the contents of the page will change the name, otherwise the user will not be active refresh, look at their own measurement ~ This can be done by modifying the. htaccess file.
4.Gzip Components Gzip Compression

Gzip format is a very popular compression technology, almost all browsers have the ability to unzip the gzip format, and it can compress the proportion is very large, the general compression rate of 85%. Compression is not compressed, you can do the next test here.
5.Put stylesheets at the top place CSS

Allow the browser to see the full style of the site as early as possible.
6.Put Scripts at the Bottom put JS on the bottom

After the site has been rendered, the function settings, of course, these JS to your loading process does not affect the performance of the content.

7.Avoid css Expressions Avoid CSS Expressions

CSS expression is very scary, this is only supported by IE, the operation of the execution time is very large, you move the mouse it will be recalculated, but sometimes in order to do browser compatibility must use this | | | IE6 to Die! ~
8.Make JavaScript and CSS External JS and css outside the chain

In front of the cache this thing, some of the more common JS and CSS, we can use the form of the chain, for example, I am from Google outside the chain of jquery files, if my browser in the browsing of other websites using this external link file has downloaded and cached this file, Then he doesn't need to download it when he's browsing my website! ~
9.Reduce DNS lookups reduce DNS lookups

It seems to be to reduce the site from the external call resources, my Google Analytics and Picasa outside the chain of images are counted inside.
10.Minify JavaScript and CSS reduce the volume of JS and CSS

Write JS and CSS are skilled, with the least code to achieve the same function, reduce whitespace, enhance logic, abbreviated way, and of course, there are many tools can also help you achieve this.
Avoid redirects avoid redirection

When you write the link again, although the "http://www. Today-s-ooxx. com "and" http://www. Today-s-ooxx. com/"Only one Last"/"only difference, but the result is different, the server needs to take the time to redirect the former and then jump, this to their own attention, can also be in Apache with alias or mod_rewrite or Directoryslash solution.
Remove Duplicate Scripts Delete duplicate script

Repeated calls to the Code browser do not recognize the ignore, but will be again the operation again, which is of course a big waste.
Configure etags Configuration Etags

I don't know what the hell is going on, anyway. It was removed in the htaccess.
Make Ajax cacheable Cache Ajax

Ajax is a real-time response, and the old data is cached before the browser receives the new data, which can improve efficiency.
Flush the buffer Early early release buffer

When a user makes a page request, the server takes 200 to 500 milliseconds to flatten the HTML, writes between the head and body, releases the buffer, and then sends the file header before sending the file content to improve efficiency.
Using Get for AJAX requests AJAX requests in Get mode

The Get method interacts with the server only once (sending data), and the Post is two times (sending the header and then sending the data).
Post-load Components Delay Loading component

First load the necessary components for page initialization, and then load the other, YUI Image Loader is a good example.
Preload components pre-loaded

Things that might be used later in the load are not conflicting with deferred loading, and it is intended to provide a quicker response to subsequent requests, see the CSS Sprites app on the Google home page.
. Reduce the number of Dom Elements reduce DOM elements

Complex page structure means longer download and response times, more reasonable and more efficient use of tags to structure the page, is a good front-end prerequisite.
Split components Across Domains cross-domain separation component

Multiple sources of page components can increase your parallel downloads, but be careful not to do too much, with more than 2-4 domain names causing the DNS lookup waste mentioned above.
Minimize the number of iframes reduce IFRAME count

More effective use of ifames is needed.
IFRAME Advantages: Facilitates download of slow ads and other third-party content, security sandbox, parallel download script
IFrame disadvantage: Even if empty, there will be a large resource consumption, will block the page onload, non-semantic
No 404s do not appear on page 404

There are 404 pages in the site itself (non-search results), and meaningless 404 pages can affect the user experience and consume server resources.
. reduce cookie Size Decrease cookie

The cookie is exchanged between the server and the browser through the file header, minimizing the cookie volume and setting a reasonable expiration time, which can improve the efficiency.
Using Cookie-free Domains for component use a Cookie-free domain name

Cookie reading of static components is a waste of a good way to store your static components using another cookie-free domain name, or you can store only domain names with www in the cookie.
Minimize DOM Access reduces the number of DOM accesses

JS access to the DOM is very slow, try not to use JS to set the page layout.
Develop Smart event handlers developing flexible handling handles

If too many elements on the DOM tree are added to the event handle, the reaction efficiency will certainly be low, and the Yui event tool has a onavailable method to help you set the DOM event handle flexibly.
Choose < link >over @import use < link > rather than @import

Using @import in IE is just like < link > at the bottom of the page, we said to put < link > top.
Avoid Filters Avoiding the use of filters

If alpha transparency is required, do not use alphaimageloader, it is inefficient and only applies to IE6 and the following versions, using the PNG8 image. If you have to use, add _filter to avoid affecting ie7+ users.
Optimize Images Optimized picture

Turning your GIF into PNG8 is a great way to reduce volume, and there are a number of ways to work with your JPG and PNG images to achieve optimal results.
Optimize css Sprites optimizing CSS Sprites

In the CSS sprites vertical and as close as possible to arrange the picture, as far as possible color similar pictures together, will reduce the size of the image itself and improve the speed of the page image display.
Images in HTML do not scale the picture in HTML

How big the picture to use how big, 1000x1000 picture is width= "100″height=" 100″, the KB number of itself is not reduced.
Make Favicon. ICO Small and cacheable reduce favicon. The size of the ICO and caches it

The site's browser ico should not often change it, it will be cached for a long time, and preferably under 1K control.
Keep components under 25K guaranteed to be under 25K

iphone cannot cache more than 25K of components, and this is still before being compressed.
Pack component into a Multipart document package components in a multi-part documentation

Just like adding an attachment to a message, an HTTP request is enough, but this technology needs to ensure that your proxy support is not supported by the iphone.

YAHOO34--Yahoo! Web front-end website optimization