Site front-end performance optimization and testing-content expiration

Recently engaged in Web site UI revision, in addition to a few pages, the whole station basically unified interface style, in resolving various browser compatibility issues, inadvertently found a Firefox plug-in YSlow for Firebug, he is open source website optimization tool, used to test the front-end performance of the site. There are 13 rules for evaluating performance levels in YSlow: 1. Make fewer HTTP requests,2. Use a cdn,3. Add an Expires header,4. Gzip components,5. Put CSS at the top,6. Put JS at the bottom,7. Avoid CSS expressions,8. Make JS and CSS external,9. Reduce DNS lookups,10. Minify js,11. Avoid redirects,12. Remove duplicate scripts,13. Configure ETags. This is the "Yahoo! Web site performance Best experience of the 34 golden Code," the further streamlining, now to discuss the 3rd, this is relatively easy to implement, just configure the IIS or Apache and other Web servers, to the HTTP header plus "content expiration" can be achieved. Considering the site is being revised, CSS, JS also need to modify, here to the relevant resources and more appropriate expiration time: 1, image, Flash expires after 100 days; 2, CSS, JS 3 days after expiration.

Configuration process: Open the relevant Web site in IIS Manager, locate the file, folder that you want to set, and then click Properties to set in the "HTTP Header" item.

If you specify an expiration time, such as 2008-12-26 14:26:00, you will get an explicit expiration time in the browser's HTTP header received: expires:fir,26 DEC 2008 14:26:00 GMT, This is a standard GMT time (GMT), and header received receives cache-control:max-age=8640000 (in seconds) if you specify that it expires after 100 days. Above two header received this instructs the browser to cache the contents of the request and saves the file in the browser's temporary cache folder until it reaches its expiration time (regardless of the fact that the browser automatically empties the cache and the user empties the cache because of insufficient cache space), the Internet The Explorer can locate these cached files in the c:documents and settingsadministratorlocal settingstemporary Internet files folder. On the first visit, the browser reads the content directly from the cache, based on whether the contents are cached by expires and Cache-control, and the second time it is accessed, if the cached content does not expire. In another case, when the user clicks the Refresh button, the browser requests everything from the server, regardless of whether it is cached or not.

Use the HttpWatch, YSlow test process:

1, open expiration time, first visit

(HttpWatch)

(YSlow)

2, open Expiration time, second visit

(HttpWatch)

(YSlow)

3, open expiration time, httpwatch two times access results comparison

4, not open expiration time, first visit

5, not open expiration time, second visit

6, not open expiration time, httpwatch two visits results comparison

Test two results slightly different, but we can see that the second visit after the expiration time, the relevant files have been cached, Sent, received did not generate traffic, in the result of the display of the cache, it is obvious that the data from the cache read. From the first visit, the 49 requests were lowered to 9 request, with a significant reduction in both time and traffic. Open a Web site without setting content expiration, the number of HTTP requests generated by the first and second accesses has not changed, but received has also been reduced by the fact that the browser will save the related files in the temporary folder on the first request. The server will return to the client a last-modified field, each time the need for this file, the client will send this field to the server, the server to fetch and the latest files to do comparison, if not changed, then return 304 not Modified, The client then takes it directly from the cache, so the resulting traffic is very small, but the request is not reduced, as above 5th.

After these test comparisons, you can see the important role that caching plays. In addition, in ASP.net and other programs, you can also specify the expiration time, such as: Response.Expires = 3600, so that the text/html content of the page will also be cached, if the database content has changed, in the user again access, the content will not be updated, within the expiration time, To get the latest content, you can manually refresh it. If the program does not specify expiration time, Cache, database content changes, regardless of access to the Web page (new browser, back), will get the latest content.