YUI front-end optimization for Server_html/css_WEB-ITnose

Part 2. Website Server: Use content distribution network to specify Expires or Cache-ControlGzip for the file header to compress the file content. Configure ETag to refresh the output buffer as early as possible. Use GET to complete AJAX requests

11 , Use a content delivery network

The proximity of users to your website server will affect the response time. Spreading your website content across multiple servers in different geographical locations can speed up downloads. But what should we do first?

The first step in arranging your website content by geography is not to try to re-architect your website to make it run properly on the distribution server. Change the website structure according to the needs of the application, which may include some more complex tasks, such as synchronizing session status between servers and merging database updates. To shorten the distance between users and content servers, these architectural steps may be inevitable.

Remember that 80% to 90% of the end user's response time is spent downloading page content such as images, stylesheets, scripts, Flash, etc. This is the golden rule of website performance. Rather than undertaking the more difficult task of redesigning your application's architecture, it's better to distribute static content first. Not only does this improve response times, but it's also easier to implement for content delivery networks.

Content Delivery Network (CDN) is composed of a series of Web servers dispersed in different geographical locations. It improves the transmission speed of website content. The servers used to deliver content to users are primarily designated based on their proximity to the user on the network. For example, the server with the fewest network hops and the fastest response time will be selected.

Some large Internet companies have their own CDNs, but the cost of using CDN services like Akamai Technologies, Mirror Image Internet, or Limelight Networks is very high. For businesses and personal websites that are just starting out, they may not have the cost budget to use a CDN, but as the target user base continues to expand and become more global, CDN is necessary to achieve rapid response. In the case of Yahoo, the static content of the website program they transferred to CDN saved more than 20% of the response time of end users. Using a CDN is a relatively simple way to significantly improve website access speed by simply modifying the code.

12. Specify Expires or Cache-Control for the file header

This rule includes two aspects:

For static content: Set the value of the file header expiration time Expires For "Never expire"

For dynamic content: Use appropriate Cache-Control file headers to help the browser make conditional requests

Web content design is now becoming more and more sophisticated Rich, which means that the page should contain more scripts, style sheets, pictures and Flash. The first time a user visits your page means making multiple HTTP requests, but you can make this content cacheable by using the Expires file header. It avoids unnecessary HTTP requests on subsequent page visits. The Expires header is often used for image files, but it should be used for all content, including scripts, style sheets, Flash, etc.

Browsers (and proxies) use caching to reduce the size and number of HTTP requests to speed up page access. Web servers use the Expires header in HTTP responses to tell the client how long the content needs to be cached. The example below is a longer Expires file header, which tells the browser that this response will not expire until April 15, 2010.

Expires: Thu, 15 Apr 2010 20:00:00 GMT

If you are using the Apache server, you can use ExpiresDefault to set the expiration time relative to the current date. The following example uses ExpiresDefault to set a file header that expires 10 years after the request time:

ExpiresDefault "access plus 10 years"

Remember that if you use the Expires file header, when the page When the content changes, the file name of the content must be changed. According to Yahoo!, we often use this step: add the version number to the file name of the content, such as yahoo_2.0.6.js.

Using the Expires header will only work if the user has already visited your website. This is ineffective at reducing the number of HTTP requests when a user first visits your site because the browser's cache is empty. Therefore, the improvement of your website's performance with this method depends on the frequency of clicks on your page when their "pre-cache" exists (the "pre-cache" already contains all the content on the page). Yahoo! established a set of measurement methods, and we found that 75 to 85% of all page views are "pre-cached". By using the Expires header, you increase the amount of content that is cached in the browser and can be reused on subsequent requests from the user, without even having to send a single byte of the request through the user.

13. Gzip compressed file content

The HTTP request and response time in network transmission can be significantly improved through the front-end mechanism. Indeed, the end-user's bandwidth, Internet provider, proximity to peer exchange points, etc. are not something that the website developer can determine. But there are other factors that affect response time. HTTP response time can be saved by reducing the size of the HTTP response.

Starting from HTTP/1.1, web clients support the compression format with Accept-Encoding header in HTTP requests by default:

Accept-Encoding: gzip, deflate

If the web server detects the above code in the request header, it will compress the response content in the manner listed by the client. The web server returns the compression method to the browser through Content-Encoding in the response file header.

Content-Encoding: gzip

Gzip is currently the most popular and most effective compression method. This was developed by the GNU Project and standardized through RFC 1952. The only other compression format is deflate, but its scope of use is limited and its effect is slightly inferior.

Gzip can reduce the response size by about 70%. Currently approximately 90% of Internet exchanges transmitted through browsers support the gzip format. If you are using Apache, the gzip module configuration depends on your version: Apache 1.3 uses mod_zip, and Apache 2.x uses moflate.

Both browsers and proxies will have this problem: there will be a mismatch between what the browser expects to receive and what it actually receives. Fortunately, this particular case is decreasing as usage of older browsers decreases. The Apache module will avoid this situation by automatically adding the appropriate Vary response file header.

The server selects files that need to be gzip compressed based on the file type, but this overly limits the files that can be compressed. Most web servers compress HTML documents. Compressing scripts and stylesheets is also worth doing, but many web servers don't have this capability. In fact, it's worth compressing any text type response, including XML and JSON. Images and PDF files cannot be gzip compressed because they are already compressed. Trying to gizp these files will not only waste CPU resources but also increase the file size.

Gzip compression of all possible file types is an easy way to reduce file size and increase user experience.

14. Configure ETag

Entity tags (ETags) (entity tags) are used by web servers and browsers to determine whether the content in the browser cache matches the original content in the server Mechanism ("entity" is what is called "content", including pictures, scripts, style sheets, etc.). Adding an ETag provides a more flexible mechanism for entity verification than using "last-modified date". Etag is a unique string that identifies the content version number. The only format restriction is that it must be enclosed in double quotes. The origin server specifies the ETag of the page content through a response containing the ETag header.

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 wants to verify a file, it will use the If-None-Match file header to pass the ETag back to the origin server. In this example, if the ETag matches, a 304 status code will be returned, saving 12195 bytes of response. 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

The problem with ETag is that it is unique based on the server that can identify the website. Generated by sexual attributes. When the browser obtains the page content from one server and verifies it on another server, the ETag will not match. This situation is very common for websites that use server groups and handle requests. By default, both Apache and IIS embed data in ETags, which will significantly reduce file verification conflicts between multiple servers.

The ETag format in Apache 1.3 and 2.x is inode-size-timestamp. Even if a file is in the same directory on different servers, and the file size, permissions, timestamps, etc. are exactly the same, their internal codes are also different on different servers.

IIS 5.0 and IIS 6.0 have similar mechanisms for handling ETags. The ETag format in IIS is Filetimestamp:ChangeNumber. Use ChangeNumber to track IIS configuration changes. The ChangeNumber is also different between different IIS servers used by the website. The ETags generated by Apache and IIS on different servers are different even for the exact same content. Users will not receive a small and fast 304 response; instead, they will receive a normal 200 response and download the entire content. If your website is only placed on one server, this problem will not exist. But if your website is set up on multiple servers and uses Apache and IIS to generate the default ETag configuration, your users will be slower to obtain the page, and the server will transmit more content and occupy more bandwidth. It also won’t cache your website content effectively. Even if your content has an Expires header, a corresponding GET request will be sent whenever the user clicks the "Refresh" or "Reload" button.

If you do not use the flexible verification mode provided by ETag, it would be better to simply remove all ETags. Last-Modified file header verification is based on the timestamp of the content. Removing the ETag file header will reduce the file size in the response and next request. This support document from Microsoft describes how to remove the ETag. In Apache, you only need to simply add the following line of code to the configuration file:

FileETag none

15. Refresh the output buffer as early as possible

When the user requests a page , it will take anywhere from 200 to 500 milliseconds to organize the HTML file in the background. During this period, the browser will remain idle waiting for data to be returned. In PHP, you can use the flush() method, which allows you to send the compiled part of the HTML response file to the browser first. At this time, the browser can download the content in the file (scripts, etc.) while the background simultaneously Process the remaining HTML pages. The effect of this will be more obvious when there is trouble in the background or when the front desk is idle.

The best place to apply output buffering is immediately after , because the header part of HTML is easy to generate and the header often contains CSS and JavaScript files, so that the browser can Compile the remaining HTML while downloading them in parallel. Example:

...

... & lt;-content-& gt;

In order to prove the benefits of using this technology, yahoo! Researched and completed user testing.

16. Use GET to complete AJAX requests

The Yahoo! Mail team discovered that when using XMLHttpRequest, the POST method in the browser is a "two-step" process: first send file header before sending the data. So using GET is most appropriate because it only needs to send one TCP packet (unless you have a lot of cookies). The maximum length of URL in IE is 2K, so if you want to send a data that exceeds 2K, you cannot use GET.

An interesting difference is that POST does not actually send data like GET does. According to the HTTP specification, GET means "getting" data, so it makes more sense (semantically speaking) to use GET when you are just getting data, and conversely, use POST when sending and saving data on the server side.