Performance optimization and testing of the front-end of the website - content expired

  
Recently, the interface UI of the website was revised. In addition to a few pages, the whole station basically unified the interface style. When solving various browser compatibility problems, it was inadvertently searched. Go to a FireFox plugin, YSlow for Firebug, which is an open source web site optimization tool for testing front-end performance of websites. There are 13 rules for YSlow's rating performance rating: 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 a further streamlined in the "34 Gold Rules for the Best Performance of Yahoo! Websites". Now let's discuss Article 3, which is easier to implement. Just configure the web server such as iis or apache. Http header plus “content expiration” can be achieved. Considering that the website is being revised, css and js need to be modified. Here, the appropriate expiration time is added to the relevant resources: 1. image, flash expires after 100 days; 2. css, js expires after 3 days. Configuration process: Open the relevant website in the iis manager, find the files and folders that need to be set, and then click on the attribute, you can set it in the "http header" If you specify an expiration time, such as 2008-12-26 14:26:00, you will get a clear expiration time in the browser's http header received: such as Expires:Fir,26 Dec 2008 14:26:00 GMT, which is a standard GMT time (Greenwich Mean Time); if it expires after 100 days, header receives will receive Cache-Control: max-age=8640000 (in seconds). The above two headers receive the instruction that the browser caches the content of the request, and saves the file in the browser's temporary cache folder until it reaches the expiration time (regardless of whether the browser automatically clears the cache and the user because of insufficient cache space) Clear the cache for these cases. Internet Explorer can find these cache files in the C:\\Documents and Settings\\Administrator\\Local Settings\\Temporary Internet Files folder. On the first visit, the browser will cache the content according to Expires and Cache-Control. On the second access, if the cached content has not expired, the relevant content is directly read from the cache. In another case, when the user clicks the refresh button, the browser will request all content from the server regardless of whether it is cached or not. Use HttpWatch, yslow test process: 1, open expiration time, first visit (HttpWatch) (YSlow) 2, open expiration time, second access (HttpWatch) (YSlow) 3, open expiration time, HttpWatch two visits Comparison of results 4, no open expiration time, first visit 5, no open expiration time, second access 6, no open expiration time, HttpWatch two visits comparison results The test results are slightly different, but we can see When the second access is made after the expiration time is opened, the related files have been cached. Sent and Received have not generated communication traffic. In the Result item, the Cache is displayed, and it is obvious that the data is read from the cache. From the 49 requests at the first access to 9 requests, the request time and traffic are significantly reduced. Open a website that has not been set to "content expiration", the number of http requests generated by the first visit and the second visit has not changed, but the received is also reduced a lot, because the first request, the browser will be in the Pro The related file is saved in the temporary folder, and the server will return a Last-Modified field to the client. When the file is needed each time, the client will send this field to the server, and the server will use the latest file. Compare, if it has not been changed, then return 304 Not Modified, then the client will take it directly from the cache, so the traffic generated is very small, but the request is not reduced, as in point 5 above. After comparing these tests, you can see the important role played by the cache. In addition, in asp.net and other programs, you can also specify the expiration time, such as: Response.Expires = 3600, so the text/html content of the page will be cached as well. If the database content has been changed, when the user accesses it again, the content is Will not be updated, within the expiration time, to get the latest content can be manually refreshed. If the program does not use the specified expiration time, Cache, after the database content changes, no matter how you access the web page (new browser, back), you will get the latest content.
Copyright © Windows knowledge All Rights Reserved