80% of the end-user response time spent on front-end process, but most of their time is spent on the various page elements, such as images, style sheets, scripts, and Flash, etc. of the download. To reduce the page elements will be reduced the number of HTTP requests. Express This is the key to display the page.
A reduction in the number of page element method is to simplify the page design. However, the existence of other means, to ensure the availability of rich content, but also to obtain fast response time? The following are some such techniques:
Image maps combine multiple images into one picture. Little change in the total file size, but reduced the number of HTTP requests so as to speed up the page display speed. The approach is only suitable for the situation picture; At the same time, the definition of the coordinates are annoying also error-prone work.
CSS Sprites are better ways. It can be combined page picture into a single document, and use CSS's background-image and background-position property to the reality part of the required picture.
Inline images use the data: URL scheme to embed in the page image. This will increase the size of HTML documents. Portfolio inline images into your (cached) stylesheets are not only fewer HTTP requests, but also to avoid increasing the size of HTML documents Ways.
Combined files through the combination of multiple script files into a single document to reduce the number of HTTP requests. Stylesheet treatment may also have recourse to similar methods. This method is simple, but did not receive large-scale use. 10 The United States Web site has seven per page average script file and the two style sheets. When the page between the scripts and style sheets changed greatly, the way will be faced with great challenges, but if so, will be able to speed up response time.
<o:p> </ o: p>
Reduce the number of HTTP requests are the starting point for performance optimization. This is the most improve the efficiency of the first visit to play a very important role. Tenni Theurer, according to the article Browser Cache Usage - Exposed! Described ,40-60% of the day-to-day visit is the first visit, so for the first time visitor to accelerate the speed of page views are the key to user experience.
Rule 2. The use of CDN (Content Delivery Network, Content Distribution Network)
Users from the web server response time for the distance also has a significant impact. From the user point of view, put the contents of the deployment to multiple geographically dispersed servers will effectively improve the speed of page loading. However, where the start?
As the first step in the geographical distribution of content and not try to remodeling to adapt to the distribution of web application architecture. Change the architecture will lead to a number of periodic tasks, such as synchronization session state replication in a number of database transactions between the server. This shortened distance between the user and the content of the application architecture may be trying to change the delay, or prevent.
We also remember that 80-90% of the end-user response time spent on the download page on the various elements, such as image files, style sheets, scripts, and Flash. Reconfigurable System with its spent on this difficult task, not as good as the first distribution of static content. This is not only able to significantly reduce the response time, but also because of the existence of CDN, the distribution of static content is easy to achieve.
CDN is the geographical distribution of a collection of web server for more efficient distribution of content. Usually Web-based distance to give specific users to select services web server.
Some large sites have their own CDN, but the use of such as Akamai Technologies, Mirror Image Internet, or Limelight Networks and other service providers CDN services will be cost-effective. At Yahoo! Put static content distribution to the CDN to reduce the impact of time users 20% or more. Switch to CDN code modifications are very easy job, but can improve the speed of the site.
Rule 3. Increase Expires Header
Web content is becoming more and more rich, which means that more script files, style sheets, image files and Flash. The first time, visitors will have to face multiple HTTP requests, but by using the Expires header, you can cache on the client these elements. This follow-up visits to avoid unnecessary HTTP requests. Expires header is most commonly used image files, but it should also be used in script files, style sheets, and Flash.
Browser (and agent) the use of cache to reduce the number of HTTP requests and size makes web pages to speed up loading. Web server through the Expires header to tell the client can cache an element length of time.
If the server is Apache, you can use ExpiresDefault based on the current date to set the expiration date, such as:
ExpiresDefault "access plus 10 years" Set expiration time of the request time from the start of 10 years.
Please remember, if you use the expired long time, then when the content changes, you must modify the file name. At Yahoo! We often put renamed as the release of a step: the version number embedded in the file name, such as yahoo_ <st1: chsdate w: st = "on" isrocdate = "False" islunardate = "False" day = "30" month = "12" year = "1899"> 2.0.6 </ st1: chsdate>. js.
Rule 4. Compressed page elements
Through the HTTP response content can be compressed to reduce page response time. HTTP/1.1 started from, web at HTTP client request through the Accept-Encoding header to indicate support for compression type, such as:
Accept-Encoding: gzip, deflate.
If the Web server checks the Accept-Encoding header, it will support the use of client-side method to compress HTTP response, will set up a Content-Encoding header, such as: Content-Encoding: gzip.
Gzip is the most popular and effective compression method. Other ways such as deflate, but it is less effective, but also not popular. Through Gzip, content in general can be reduced by 70%. If it is Apache, version 1.3 under the need to use mod_gzip module, and in the 2.x version, the need to use mod_deflate.
Web server under the file type to decide whether or not compressed. Most sites on the HTML file compression. But the script files and style sheets for compression is worthwhile. In fact, including XML and JSON mission, including compressed text information are worth it. Image files and PDF files should not be compressed, because they were originally saved in compressed format. They are compressed, not only a waste of CPU, but also may increase the file size.
Therefore, as many as possible to compress the file type is a reduction in page size and improve the user experience simple way.
Rule 5. Stylesheet put on the head
We found that the style sheet can be moved to HEAD improve loading speed interface, so this makes page elements can appear in the order.
At a lot of browsers, such as IE, put on the document style sheet at the bottom of the problem lies in its prohibition of the order of the contents of a web page display. Block the display of the browser in order to avoid re-draw the page element, then the user can only see a blank page. Firefox will not prevent the show, but this means that when style sheet after the download, some page elements may need to re-draw, which leads to flickering problem.
HTML specification explicitly requested style sheet is defined in the HEAD, so, in order to avoid a blank screen or a blinking question, the best way is follow the HTML specification, the style sheet placed in the HEAD.
Rule 6. Put on the bottom of script file
Documents with the same style, we need to pay attention to the script file. We need to try to put them on the bottom of the page, so that can appear in the order on the one hand, on the other hand, can achieve the maximum parallel download.
Browser will display until the style sheet obstructive download has finished, so we need to put some style sheet on the HEAD. As for the script, the script appear in the order behind the content will be blocked, so try to put the script on the bottom means more content can be quickly displayed.
Scripts arising from the second problem is that it blocking parallel download quantity. HTTP/1.1 specification recommends that the browser for each host a number of parallel download is not more than two. So if you put the distribution of image files to multiple machines, you can achieve more than two parallel download. But when the script file download, the browser will not start other parallel download, and even in other host download do not start.
In some cases, not very easy to put a script at the bottom. For example, the script uses document.write method to insert the page content. May also exist at the same time the problem domain. However, in many cases, there are some methods.
An alternative approach is to use deferred scripts (deferred script). Defer indicates that the script does not contain a property document.write, instructions engraved browser continue to show. Unfortunately, Firefox does not support the Defer property. In IE, the script may be delayed, but not necessarily be required for long delays. But from another perspective, if the script can be delayed, then it can be placed at the bottom of the.
Rule 7. To avoid CSS expressions
CSS expressions are a powerful (and dangerous) for the dynamic way of setting CSS property. IE, from version 5 to start to support the CSS expressions, such as backgourd-color: expression ((new Date ()). GetHours ()% 2? "# B8D4FF": "# F <st1: chmetcnv w: st =" on " tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "8" unitname = "a"> 08A </ st1: chmetcnv> <st1: chmetcnv w: st = "on" tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "0" unitname ="""> 00 "</ st1: chmetcnv>), that is, to switch the background color once every hour.
CSS expressions are questions over the implementation of most people's expectations. Not only resize when the page display and calculation of expression, and when the page scroll, even when the mouse moves on the page will be re-evaluating the expression.
A reduction in the number of CSS expression to implement the method is a one-time expression, that is, when the first implementation on the specific values in place of expression. If you have to dynamically set up, it can function in lieu of the use of case treatment. If you must use CSS expressions, please keep in mind they may be executed thousands of times, thus affecting the performance page.
Therefore, in general, external documents are more workable. The only exception is embedded on the home page more effective, such as Yahoo! And My Yahoo! Using embedded mode. Generally speaking, in a session, the home visit at this time less, so embedded in the way users can get a faster response time.
Rule 9. To reduce the number of DNS queries
DNS for mapping host names and IP addresses, generally required to resolve a 20 ~ 120 ms. In order to achieve higher performance, DNS Resolution is usually to many level cache, such as by the ISP or local area network to safeguard the caching server, local machine operating system cache (such as windows on the DNS Client Service), browser. IE's default DNS cache time is 30 minutes, Firefox's default buffer time is 1 minute.
Reducing the host name can reduce the number of DNS queries, but may result in the reduction of the number of parallel download. Avoid DNS query response time can be reduced, and less likely to increase the number of parallel download response time. One possible compromise is to put content distribution to at least two, a maximum of four different host name on.
Confusion is the smallest of the options in the source. As to minimize the same, it by removing comments and spaces to reduce the source size, at the same time it can also deal with the code confusing. As part of confusion, function names and variable names have been replaced by a short string, which makes the code more compact, but also more difficult to read, making it difficult to be reverse engineering. Dojo Compressor (ShrinkSafe) are the most common tool of confusion.
The smallest is safe, straightforward process, and the confusion is even more complex and prone to question. From 10 large American site survey, by minimizing, documents can be reduced 21 percent, and the confusion can be reduced by 25%.
In addition to minimizing the external script file, the embedded script code should be minimized. Even if the script has been compressed in accordance with rule 4, after transmission, to minimize file size reduction script carved 5 percent or higher.
Rule 11. To avoid redirection
Redirect function is through the 301 and 302 of these two HTTP status code completion, such as:
HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text / html <o:p> </ o: p>
Browser automatically redirects the request to the Location specified URL, the redirection of the main problems is to reduce the user experience.
One of the most expensive resources, and can easily happen often neglected redirect URL's are Finally the lack of /, such as access http://astrology.yahoo.com / astrology will be redirected to http://astrology.yahoo.com / astrology /. At Apache, we can through the Alias, mod_rewrite or DirectorySlash such means to solve the problem.
Rule 12. Delete duplicate script file
At a page contains duplicate JS script file will affect the performance, that is, it will set up unnecessary HTTP requests and the implementation of extra JS.
Unnecessary HTTP requests happen at the next IE, and Firefox does not produce extra HTTP request. Extra JS implementation, whether at the next IE or Firefox, there will happen.
A script to avoid duplication of papers is to use the template system to set up a script management module. Apart from the script file to avoid duplication, the module can also check the implementation-dependent and increased version number to the script file name in order to achieve long time overdue.
Rule 13. ETags configuration
ETags are used to determine the elements in the browser cache with the Web server that matches the elements of the mechanism, it is than the last-modified date element of a more flexible authentication mechanisms. ETag are used to express elements of the only version of the string, it need to be included in quotation marks. Web server specified in the first response at ETag:
HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "<st1: chmetcnv w: st =" on "tcsc =" 0 "numbertype =" 1 "negative =" False "hasspace = "False" sourcevalue = "10" unitname = "C"> 10c </ st1: chmetcnv> 24bc-4ab-457e <st1: chmetcnv w: st = "on" tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "1" unitname = "C"> 1c </ st1: chmetcnv> <st1: chmetcnv w: st = "on" tcsc = "0" numbertype = "1" negative = " False "hasspace =" False "sourcevalue =" 1 "unitname =" F "> 1f </ st1: chmetcnv>" Content-Length: 12195 Later, the browser will need to verify if a certain element, which uses the If-None-Match header back Chuan ETag give Web server, if the ETag matches, the server return 304 code, thus saving download time:
GET / i / yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "<st1: chmetcnv w: st =" on "tcsc =" 0 "numbertype =" 1 "negative =" False "hasspace =" False "sourcevalue =" 10 "unitname =" C "> 10c </ st1: chmetcnv> 24bc-4ab-457e <st1: chmetcnv w : st = "on" tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "1" unitname = "C"> 1c </ st1: chmetcnv> <st1: chmetcnv w: st = "on" tcsc = "0" numbertype = "1" negative = "False" hasspace = "False" sourcevalue = "1" unitname = "F"> 1f </ st1: chmetcnv> "HTTP/1.1 304 Not Modified <o:p> </ o: p>
ETags the problem is that they are the only server-based structure of certain property, such as Apache1.3 and 2.x, its format is inode-size-timestamp, and in IIS5.0 and 6.0, its format is Filetimestamp: ChangeNumber. So the same elements in different web server, its ETag is not the same. This Web server in many circumstances, the browser requests a certain element from server1, server2 later to verify that the element, because different ETag, Cache Invalidation therefore need to re-download.
Therefore, if you do not use ETags system provides a flexible authentication mechanism, it is best to delete ETag. Delete ETag will reduce the http response and follow-up to the HTTP request header size. Microsoft support article describes how to delete ETags, and in Apache, so long as in the configuration file settings can FileETag none.
Rule 14. Cached Ajax
Performance Optimization same rules apply to web 2.0 applications. Ajax improve the performance of the most important way is to make its response can be cached, like "Rule 3 increase Expires Header" as discussed. The following rules apply equally to other Ajax, of course, rule 3 is the most effective way.
Related Posts of Pages 14 to accelerate the optimization of the rules
Because of the recent study used this thing, so recorded for future reference Main function is to use acts_as_tree and XTree to achieve dynamic tree structure 1, about XTREE Download: You can search online, or directly to the official website downloa ...
Visit the slow pace of the Internet has become the past, but the page can be instantaneous only the future will show what is happening. Christianheilmann some skills, you can now visit the site together smoother. First visit to the page when the delay is
1. Check js file $. ajax (( type: "GET", url: "test.js", dataType: "script" )) 2.post data $. ajax (( type: "POST", url: "xxxx", data: "name = zhaoaiqing & age = 25", success: function ( ...