14 Yahoo!: 14 Principles for website front-end webpage optimization and 14 Principles

14 Yahoo!: 14 Principles for website front-end webpage optimization and 14 Principles
Golden rule for Web Application Performance Optimization: First optimize the front-end performance, because this is the cost of 80% or more of the end user response time.Rule 1. the end user response time, which reduces the number of HTTP requests by 80%, is spent on the front-end program, and most of the time is spent on various page elements, such as, style sheets, scripts, and Flash,. Reducing page elements reduces the number of HTTP requests. This is the key to quickly display pages. One way to reduce the number of page elements is to simplify the page design. But is there any other way to achieve both rich content and quick response time? Here are some technologies: Image maps combines multiple images into one Image. The total file size does not change much, But it reduces the number of HTTP requests and accelerates the page display speed. This method is only applicable to consecutive images. At the same time, the definition of coordinates is annoying and error-prone. CSS Sprites is a better method. It can combine images on the page to a single file, and use the background-image and background-position attributes of CSS to realistic part of the image. Inline images uses data: URL scheme to embed images in the page. This will increase the size of the HTML file. Combining inline images to your (cache) style sheet can not only reduce HTTP requests, but also avoid increasing the size of HTML files. Combined files combines multiple script files to a single file to reduce the number of HTTP requests. Style Sheets can also be processed in a similar way. This method is simple but not widely used. On average, 10 U.S. websites have 7 script files and 2 style sheets on each page. When the scripts and style sheets between pages change greatly, this method will face great challenges, but if it is done, it will speed up the response time. Reducing the number of HTTP requests is the starting point for performance optimization. This improves the efficiency of the first visit. According to Tenni Theurer's article Browser Cache Usage-Exposed! Description: 40-60% of daily access is the first visit. Therefore, speeding up page access for the first visitor is the key to user experience.Our applications:Foreign Trade: The dozens of small icons on the home page are combined into one, and CSS is used to control their display, reducing the number of HTTP requests. Rule 2. Using CDN (Content Delivery Network), the user distance from the web server also has a great impact on the response time. From the user's perspective, deploying content to servers with multiple geographically dispersed locations can effectively increase the page loading speed. But where should we start? As the first step to achieve the geographic distribution of content, do not try to reconstruct web applications to adapt to the distributed architecture. Changing the architecture will lead to multiple periodic tasks, such as synchronizing session statuses and replicating database transactions among multiple servers. In this way, attempts to shorten the distance between users and content may be delayed or prevented by the application architecture revision. We still remember that the 80-90% end user response time was spent on various elements on the download page, such as files, style sheets, scripts, and Flash. Instead of focusing on restructuring the system, it is better to distribute static content first. This not only greatly reduces the response time, but also facilitates the distribution of static content due to the presence of CDN. CDN is a collection of geographically distributed web servers for more efficient content publishing. Generally, the web server is selected for a specific user based on the network distance. Some large websites have their own CDN, but it is cost-effective to use services provided by CDN service providers such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. In Yahoo! Distribution of static content to CDN reduces the user impact time by 20% or more. It is easy to switch to the CDN for code modification, but it can speed up the website.Our applications:It is not used yet. However, according to the customer's report, the network conditions in Shandong and other places in Guangdong are relatively poor. If static resources that occupy the main bandwidth can be released through CDN, it is believed that the current website access speed can be greatly mitigated. Rule 3. Adding Expires Header web pages is becoming richer and richer, which means more script files, style sheets, image files, and Flash files. The first visitor will have to face multiple HTTP requests, but by using the Expires header, You Can cache these elements on the client. This avoids unnecessary HTTP requests in subsequent access. Expires header is most commonly used in image files, but it should also be used in script files, style sheets, and Flash. Browsers (and proxies) Use cache to reduce the number and size of HTTP requests and accelerate webpage loading. The Web server uses the Expires header to tell the client how long an element can be cached. If the server is Apache, you can use ExpiresDefault to set the expiration date based on the current date. For example, ExpiresDefault "access plus 10 years" sets the expiration time to the 10-year calculation from the request time. Remember, if you use a long expiration time, you must modify the file name when the content changes. In Yahoo! We often change our name as a step of release: the version number is embedded in the file name, such as yahoo_2.0.6.js.Our applications:Foreign Trade: the cache for JS, CSS, and image is configured in Apache. If static resources need to be updated, use the file version modification solution to ensure that the client gets the latest version: the e-Network-Exhausted probe rules (JS) are generated based on the customer's settings, but they will not change for a long period of time. Therefore, append an expires Response Header while generating the rule to minimize the number of requests from the client and the number of times the probe rule is generated. Rule 4. compressing page elements reduces page response time by compressing HTTP Response content. Starting from HTTP/1.1, the web Client uses the Accept-Encoding header in the HTTP request to indicate the supported compression types, such as Accept-Encoding: gzip and deflate. if the Web server detects the Accept-Encoding header, it uses the methods supported by the client to compress the HTTP Response and sets the Content-Encoding header, for example, Content-Encoding: gzip. Gzip is currently the most popular and effective compression method. Other methods, such as deflate, are ineffective and not popular. By using Gzip, the content can be reduced by 70%. For Apache, The mod_gzip module must be used in version 1.3 and mod_deflate must be used in version 2. x. The Web server determines whether to compress Based on the file type. Most websites compress HTML files. However, it is worthwhile to compress the script file and style sheet. In fact, it is worthwhile to compress the task text information, including XML and JSON. Image files and PDF files should not be compressed because they are stored in compression format. Compressing them not only wastes the CPU, but may also increase the file size. Therefore, compressing as many file types as possible is a simple way to reduce the page size and improve user experience.Our applications:Foreign trade, enetwork exhausted, K plan: more than 600 K ext2 package, people will want to compress it, the compression effect is good, only more than 150 K. In addition, JavaScript, CSS, and HTML are also compressed as much as possible. We need to know that many of our customers are still using 1 m ADSL. Rule 5. Put the style sheet on the HEAD. We found that moving the style sheet to the HEAD can increase the interface loading speed, so that page elements can be displayed in sequence. In many browsers, such as IE, the problem that the style sheet is placed at the bottom of the document is that it prohibits the sequential display of webpage content. The browser blocks the display to avoid re-painting the page elements. The user can only see the blank page. Firefox does not block display, but this means that after the style sheet is downloaded, some page elements may need to be re-painted, which leads to flickering issues. The HTML specification clearly requires that the style sheet be defined in the HEAD. Therefore, to avoid blank screen or flickering issues, the best way is to follow the HTML specification and put the style sheet in the HEAD.Our applications:I haven't encountered any situation where I put the style sheet behind the document? Rule 6: place the script file at the bottom, just like the style file. Pay attention to the location of the script file. We need to try to put them at the bottom of the page, so that they can be displayed in sequence, and the maximum parallel download can be achieved. The browser will block the display until the style sheet is downloaded, so we need to put the style sheet in the HEAD section. For a script, the subsequent content display is blocked. Therefore, placing the script at the bottom means that more content can be quickly displayed. The second problem caused by the script is that it blocks the number of parallel downloads. The HTTP/1.1 Specification suggests that the number of concurrent downloads per host of the browser should not exceed 2. Therefore, if you distribute image files to multiple machines, you can download more than two images concurrently. However, when a script file is downloaded, the browser does not start parallel downloads or even downloads from other hosts. In some cases, it is not easy to move the script to the bottom. For example, the script uses the document. write method to insert the page content. Domain issues may also exist. However, in many cases, there are still some methods. One alternative is to use a latency script ). The DEFER attribute indicates that the script does not contain document. write, indicating that the browser will continue to display the script. Unfortunately, Firefox does not support the DEFER attribute. In IE, the script may be delayed, but it may not be a long delay. However, from another perspective, if the script can be delayed, it can be placed at the bottom.Our applications:We may not be aware of this before, but we have implemented this rule in our XCube XUI. We believe this can further improve the page access performance. 7. Avoid CSS expressions. CSS expressions are powerful (and dangerous) and used to dynamically set CSS attributes. IE, which supports CSS expressions starting from version 5, such as backgourd-color: expression (new Date (). getHours () % 2 ?" # B8D4FF ":" # F08A00 "), that is, the background color is switched every hour. The problem with CSS expressions is that they are executed more frequently than most people expect. Not only is the expression calculated when the page is displayed and resize, but also when the page is rolled, or even when the mouse moves on the page, the expression is recalculated. One way to reduce the number of CSS expressions executed is a one-time expression, that is, when the first execution is performed, it replaces the expression with a clear value. If dynamic settings are required, use the event handler function instead. If you must use CSS expressions, remember that they may be executed thousands of times, thus affecting page performance.Our applications:Currently, the UI personnel are mainly responsible for CSS maintenance. They have tried their best to avoid this situation. Rule 8. Place JavaScript and CSS in external files. The above many performance optimization rules are optimized based on external files. Now, we must ask the following question: should JavaScript and CSS be included in an external file or in a page file? In the real world, using external files will speed up page display, because external files will be cached by the browser. If the built-in JavaScript and CSS reduce the number of HTTP requests on the page, the page size increases. On the other hand, when an external file is used, it will be cached by the browser, and the page size will be reduced without increasing the number of HTTP requests. Therefore, in general, external files are more feasible. The only exception is that the embedded method is more effective for the home page, such as Yahoo! And My Yahoo! Both use the embedded method. In general, in a session, the home page is rarely accessed at this time, so the embedded method can get faster user response time.Our applications:Foreign trade, e-network exhausted, K plan: ext2 code is a good guide. Currently, front-end developers pay great attention to the encapsulation and reuse of client modules, try to improve code reuse by using other JS methods. Be sure not to introduce too many external resources because this violates Rule 1.
Currently, CSS is well encapsulated, but it is mainly for solutions of the IE series. You can consider introducing CSS frameworks such as YAML and blueprint to easily solve browser compatibility problems. Rule 9. Reduce the number of DNS queries. DNS is used to map host names and IP addresses. Generally, 20 ~ 120 ms. To achieve higher performance, DNS resolution is usually cached at multiple levels, such as the caching server maintained by the ISP or LAN, local Machine operating system cache (such as DNS Client Service on windows), browser. The default DNS Cache Time of IE is 30 minutes, while that of Firefox is 1 minute. Reducing host names reduces the number of DNS queries, but may reduce the number of parallel downloads. Avoiding DNS queries can reduce the response time, while reducing the number of parallel downloads may increase the response time. A feasible compromise is to distribute the content to at least two, at most four different host names.Our applications:Foreign Trade: to bypass the browser's restrictions on the number of download threads, we have enabled multiple domain names for static resources, but this violates this rule. However, for windows IE, DNS caching can alleviate this problem. Rule 10. Minimize JavaScript code minimize JavaScript code refers to removing unnecessary characters from JavaScript code to reduce the download time. Two popular tools are # JSMin and YUI Compressor. Obfuscation is an alternative method to minimize source code. Like minimization, it reduces the source code size by deleting comments and spaces, and can also confuse the code. As part of obfuscation, function names and variable names are replaced with short strings, making the code more compact and more difficult to read, making it difficult to reverse engineer. Dojo Compressor (ShrinkSafe) is the most common obfuscation tool. Minimization is a secure and straightforward process, while obfuscation is more complex and prone to problems. According to a survey of the top 10 websites in the United States, by minimizing the number of files, the number of files can be reduced by 21%, and the number of obfuscation can be reduced by 25%. In addition to minimizing external script files, embedded script code should also be minimized. Even if the script is compressed and transmitted according to rule 4, the file size is reduced by 5% or higher at least the script moment.Our applications:We didn't directly use JS compression, but many of the components we use, such as ext2 and jquery, are already practicing this rule for us. Rule 11. The redirect avoidance function is completed through the HTTP status codes 301 and 302, for example:

      HTTP/1.1 301 Moved Permanently

      Location: http://example.com/newuri

      Content-Type: text/html

The browser automatically redirects requests to the URL specified by the Location. The main issue of redirection is to reduce the user experience. One of the most resource-consuming, frequent occurrence, and easily overlooked redirection is the final lack of/in the URL, such as accessing the ingress /. In Apache, you can solve this problem through Alias, mod_rewrite, or DirectorySlash. Our applications:The experienced SA has already considered this issue for us. If you are interested, you can check the Apache configuration file httpd. conf in the online environment. Rule 12. deleting duplicate script files on a page containing duplicate JS script files will affect performance, that is, it will create unnecessary HTTP requests and additional JS execution. Unnecessary HTTP requests occur in IE, while Firefox does not generate redundant HTTP requests. Additional JS execution will occur in IE or Firefox. One way to avoid repeated script files is to use the template system to create a script management module. In addition to preventing repeated script files, this module can also perform dependency check and add version numbers to the script file name to achieve a long expiration time. Our applications:This problem is serious in the old version of Xplatform, but I believe the new version of XCube will not be the same. Rule 13. configuring ETagsETags is a mechanism used to determine whether the elements in the browser cache match those in the Web server. It is more flexible than last-modified date in element verification. ETag is a string used to uniquely represent an element version. It must be included in quotation marks. The Web server first specifies the ETag in response:

      HTTP/1.1 200 OK

      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

      ETag: "10c24bc-4ab-457e1c1f"

      Content-Length: 12195

Later, If the browser needs to verify an element, it uses the If-None-Match header to return ETag to the Web server. If ETag matches, the server returns code 304, saving the 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: "10c24bc-4ab-457e1c1f"

      HTTP/1.1 304 Not Modified

ETags are constructed based on certain unique attributes of the server, such as Apache1.3 and 2.x. the format is inode-size-timestamp, while in IIS5.0 and 6.0, the format is Filetimestamp: changeNumber. In this way, the ETag of the same element is different on different web servers. In this way, in a multi-Web server environment, the browser first requests an element from server1, and then verifies the element from server2. because the ETag is different, the cache is invalid and must be downloaded again. Therefore, if you do not use the flexible verification mechanism provided by the ETags system, it is best to delete ETag. Deleting ETag reduces the size of the http response header and subsequent requests. Microsoft supports articles describing how to delete ETags. In Apache, you only need to set FileETag none in the configuration file. Our applications:EIP: Customize the ETag generation policy to minimize the number of times the probe rule is generated. This problem does not exist because the default ETag of the server is not used. Other product lines: pay attention to this. We have never paid attention to this point. Check the configuration in Apache. Rule 14. cache Ajax performance optimization rules are also applicable to web 2.0 applications. The most important way to improve Ajax performance is to make its response cacheable, as discussed in "add Expires Header in rule 3. The following rules also apply to Ajax. Of course, rule 3 is the most effective method: Rule 4. page element compression rule 9. this rule reduces the number of DNS queries by 10. minimize script file Rules 11. avoid redirection rule 13. configure ETags. Our applications:In more cases, we do not want the Ajax request to be cached. Now we can append a timestamp to the url of each Ajax request.