1. minimize the number of requests [content] HTTP is
2. Use the CDN (the Content Delivery the Network) [Server]
3. Add Expires header (or Control-the Cache) [Server]
4. Gzip assembly [Server]
5. The CSS will pattern on the top of the page [CSS]
6. the script movement in the end portion (including inline) [JavaScript]
7. the avoid the use of CSS in Expressions [CSS]
8. the JavaScript and CSS will separate into an external file [JavaScript] [ CSS]
9. the reduction DNS query [Content]
10. the compression JavaScript and CSS (including inline) [JavaScript] [CSS]
11. the redirection avoid [Server]
12. the removal of duplicate script [JavaScript]
13. entity configuration tag (ETags) [CSS]
14. A buffer enable AJAX
The first, as far as possible to reduce the number of HTTP requests ( the Make Fewer HTTP Requests )
HTTP request to overhead, to find ways to reduce the number of requests can naturally improve page speed. Commonly used method, merge css, js (one page css and js files are merged) and Image maps and css sprites and so on. Css may of course be split, multiple JS files is because it is considered css structures, and other aspects of the common. At that time the practice is the development of Alibaba Chinese site is still developing separately, then merged to js, css in the background, so for browsers is still a request, but can still be reduced to more development time, ease of management and repeated references . yahoo home page and even suggested that the css and js written directly in the page file inside, rather than external references. Because home visits too, to do so can also reduce the number two requests. In fact many domestic portals are doing.
Css sprites and refers only to the background image on the page are combined into one, and then take his background defined by the background-position attribute, but the value css. Taobao and Alibaba Chinese stations are currently doing so. Interested can look at Taobao and Alibaba's background.
http://www.csssprites.com/ This site is a tool that can automatically upload your pictures merge and give background-position coordinates corresponding. And the result output in the format of png and gif.
The second, using CDN (Content Delivery Network): Use a Content Delivery Network
To be honest, this one for their own CDN is not very understanding, Simply put, by adding a new layer of network architecture in the existing Internet, the content posted to the site in the cache server closest to the user, by DNS load balancing technology, users determine the source of access to the nearest cache server to obtain the required content, user access to content on the Hangzhou nearly server Hangzhou, Beijing's access server near Beijing content on. This can effectively reduce the time of data transmission over the network, to improve speed. In more detail you can refer to explain the contents of a CDN for Baidu Encyclopedia. Yahoo! static content distributed to the CDN to reduce the impact of user time by 20% or more.
CDN technology Illustration:
CDN network diagram:
Third, add Expire / Cache-Control header: Add an Expires Header
now more and more images, scripts, css, flash is embedded into the page, when we visit them when bound to do http request many times. In fact, we can cache the files by setting the Expires header. Expire in fact, to specify the specific types of files in the browser cache time through a header in the message. Most of the pictures, flash are not often released after the modification, made after the cache after this browser do not need to download these files from the server but is read directly from the cache, so the speed of access to the page again It will be greatly accelerated. A typical HTTP 1.1 protocol header information returned:
the HTTP / 1.1 the OK 200 is
a Date: Fri, 30 On Oct 1998 13:19:41 GMT
Server: the Apache / 1.3.3 (the Unix)
the Cache-Control: max-Age = 3600, MUST -revalidate
the Expires: Fri, 30 On Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 On Jun 1998 02:28:12 GMT
the ETag: "3e86-410-3596fbbc"
the Content-the Length: 1040.
the Content-the Type: text / html
wherein Cache-Control and Expires is provided by a server-side script is completed.
As provided in php expire after 30 days:
以下为引用的内容：
<!--pHeader("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 30;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);-->
You can also configure the server itself is complete, these Oujiu not very clear, huh, huh. For with many friends can refer http://www.web-caching.com/
far as I know, currently Expires date Alibaba Chinese Station is 30 days. But there have been problems during the next especially for the script or set an expiration time should be carefully considered, otherwise the corresponding script function to update the client may take a long time to "sense" to such changes. Done before [suggest items] when he encountered this problem. So, what should be cached, which should not be cached or should consider carefully some.
Article IV, enable Gzip compression: Gzip Components
Gzip idea is to compress the files on the server side, and then transfer. This can significantly reduce the size of the file transfer. The browser will re-compressed content to decompress after the transfer is completed, and executed. The current browsers "good" support gzip. Not only can identify the browser, and the major "crawlers" also can be identified, seoer you can put down the heart. Further gzip compression ratio is very large, typically a compression of 85%, that page server 100K to about 25K can be compressed and then sent to the client. Specific Gzip compression principle we can refer to "the CSDN gzip compression algorithm " article. Yahoo emphasized that all of the text should be gzip compression: html (php), js, css, xml, txt ... which we did a good job website, is a A. Our home is also not before A, because there are a lot of advertising on the home page js tags serving, these tags js site owner without gzip compression, will drag on our website.
The above three points are mostly content server-side, and I was superficial understanding of it. It is wrong place to be correct me.
Article V, css on the top of the page (Put Stylesheets at the Top)
The css on the top of the page, which is why? Because ie, firefox and other browsers before all css will not transfer to render any thing. As Ma Ying-jeou spoke so reason is very simple. css, stands for Cascading Style Sheets (cascading style sheets). That means that the back of the laminate can cover the front of the css css, high-level low-level may cover css css. In [css of! Important] the bottom of this article has briefly mentioned this hierarchy, here we only need to know css can be covered. Since the front can be covered under the browser after he fully loaded again rendering is reasonable doubt many browsers, such as IE, the style sheet on the bottom of the page problem is that it prohibits the display order of Web content. So as not to prevent the display of the browser redrawing the page elements that users see only a blank page. Firefox will not prevent the display, but this means that when style sheets download, some page elements may need to be redrawn, which leads to flicker. So we should let css loaded as soon as possible
places along in that sense, if we careful study, then, in fact, there can be optimized. Css above example, two files contained in the site, <Link the rel = "this stylesheet" Rev = "this stylesheet" the href = " http://www.space007.com/themes/google/style/google.css " type = "text / css "media =" screen " /> and <Link the rel =" this stylesheet "Rev =" this stylesheet "the href =" http://www.space007.com/css/print.css"Type =" text / css " media =" print "/>. From the media can be seen for the first one is the css browser, and the second is the css file for printout. From the user's behavior up to to print a page action must occur after the page is the page displayed, so a better approach should be loaded later in the page and then dynamically add css to this page for printing equipment, so that they can improve a little speed . (ha ha)
of Article VI, the script on the bottom of the page (put scripts at the bottom)
the purpose of the script on the bottom of the page there are so two points: 1, because the execution to prevent clogging download page of the script in the script the process of loading the page when the browser reads js execution of the statement will certainly explain it all after the next reading will be completed in the following. Do not believe you can write an infinite loop js page to see the following things will not will come out. (execution setTimeout and setInterval somewhat similar to the multi-threaded, will continue the following content rendering before the corresponding response time.) browser to do so logic Series is possible at any time because js location.href or perform other functions may be completely interrupt this page process that is so, of course, have to wait after he finished reloading slightly so on the last page, you can effectively reduce the visual elements of the page loading time. 2, the second question is that it is caused by the script blocking parallel downloads amount .HTTP / 1.1 specification suggests that browsers download several parallel each host no more than two (IE only two, other browsers such as ff are all default setting is 2, but the new out ie8 can be up to 6). So if you put the image files are distributed to multiple machines, you can achieve concurrent downloads over 2 However when the script file download, the browser will not start other parallel downloads.
of course, for each site, the feasibility of the script into the bottom of the page is loaded or questionable. for example, on page Alibaba Chinese station. there are a lot of places js inline, the show relies heavily on this page, and I admit it's a far cry from the concept of non-invasive script, but a lot of "historical issues" is not so easy to solve
Article VII, avoid using Expressions (Avoid CSS Expressions) in CSS
but so much meaningless two nested, not good enough. Also we need a better way.
Article VIII, the javascript and css are placed in an external file (Make JavaScript and CSS External)
which I think is still very easy to understand. Not only we will do so from a performance optimization, using the code easier to maintain perspective and should do so. The css and js written page content can reduce the time between requests, but also increases the size of the page. If you have to do a css and js cache, twice that there is no extra http requests. Of course, I also said before, some special page developers will choose inline css and js files.
Article IX, to reduce DNS queries (Reduce DNS Lookups)
between domain names and IP addresses on the Internet is one to one, domain name (kuqin.com) easy to remember, but the computer does not recognize "recognize" between computers It will turn into ip address. Each computer on the network there is one independent ip address. Conversion work between domain names and ip addresses as domain name resolution, also known as DNS queries. Once the DNS resolution process consumes 20-120 milliseconds, before the end of dns queries, the browser will not download anything in this domain. Therefore, to reduce the dns query time can speed up the loading speed of the page. yahoo domain names recommendations contained in a page try to control the 2-4. This requires overall planning to have a good page. Currently this point we do not, a lot of RBI's advertising system drag on us.
Article X, compressing JavaScript and CSS (Minify JavaScript)
About compression js and css It is clear that reducing the number of pages bytes. Small capacity naturally fast page loading speed. In addition to reducing the volume of the compression and can also play left than certain protection. This is something we did a good job. Commonly used compression tools JsMin, YUI compressor and so on. Also like http://dean.edwards.name/packer/ also it provides us a very convenient online compression tool. You can see the difference in capacity and compressed js file js file is not compressed in jQuery pages:
Of course, a drawback is caused by the compression code readability gone. I believe that many do the front of my friends have experienced this problem: Google to see the effect of cool, but look at the source code is crowded with a lot of character, even the function names are replaced before, Khan died! own code has this not the maintenance is very inconvenient. All practices Alibaba Chinese station is currently used in compression on the server side when js and css released. In this way we easily maintain their own code.
Article XI, to avoid redirection (Avoid Redirects)
recently saw "on the IEBlog Internet Explorer and Connection Limits ," the article, such as when you enter http://www.kuqin.com/ when the server automatically 301 server generates a steering http://www.kuqin.com/ , you look at the address bar of the browser will be able to see it. This redirection naturally requires time-consuming. Of course, this is just one example, there are many causes of redirection, but the same is each additional time will increase once the redirect web requests, so because of the minimized.
Article XII, remove duplicate scripts (Remove Duplicate Scripts)
which I know does not want to say, not only from the viewpoint of performance, code specification point of view as well. But have to admit, a lot of time because soon we will be at immediate and perhaps add some duplicate code. Perhaps a unified framework for css and js framework can better solve our problems. Pig's point of view is right, not only do not want to repeat, is to do more reusable.
Article 13 configuration entity tag (ETags) (Configure ETags)
which I do not know, huh, huh. Find an explanation was more detailed explanation on inforQ "Web applications using ETags reduce bandwidth and load , "Interested students can go and see.
Article XIV, the AJAX cache (the Make Ajax Cacheable)
ajax wanted to go to the cache? When do ajax requests often have to add a time stamp to avoid his cache. It's important to remember that "asynchronous " does not imply "instantaneous". ( Remember "asynchronous" is not "instant" it is important). Remember, even if AJAX is dynamically generated and only work for a user, they can still be cached.