Yslow [go to: public comments]

Recently, the website frontend reconstruction of the public comments network has completed some pages. From diy js and jquery js to mootools, the page structure is more standardized, reducing the reference of CSS and JS files.

Today is an important version update. Although I was very confident, I still used yslow for evaluation after I went online. Good news,The reconstructed pages are 95 + points, most of them are 99 points, a level. (A Lot Of people asked me to leave that point there and check it out)

Yslow is a firebug-based plug-in released by the Yahoo developer team. It is used to analyze Web pages and rate the pages according to the rules of some high-performance websites. It is helpful for web page performance optimization and tells you that some of them affect the speed of your web pages, why slow !!

There are 13 main rules, 11 of which are critical:

2. Make fewer HTTP requests --Less HTTP requests, that is, the page should reference as few external static resources as possible, JS, CSS, and images.
4. Use a CDN --Use the CDN network to distribute static resources on the page to the nearest network node of the user.
6. Add an Expires header --Adds an expiration time for static resource files, allowing users to access websites faster through local cache
8. Gzip components --Compresses static resource content to reduce network transmission time
10. Put CSS at the top --Place CSS in the page header to render the page faster
12. Put JS at the bottom --Place JS on the bottom of the page. In general, JS download is blocked. If it is placed on the top of the page, the download of other resources will be blocked.
14. Avoid CSS expressions --Do not use CSS expressions, because CSS expressions require a lot of resources, and sometimes may even cause page death.
16. Make JS and CSS external --Using CSS and JS with external independent files is a bit in conflict with 1, but there is no conflict with it after careful analysis.
18. Reduce DNS lookups --Reduce DNS lookup (this will be explained in detail later)
20. Minify JS --Minimize JavaScript compression. Different from 4th, use Yui compressor or jsmin to analyze the JS file, shorten some variable names, and remove unnecessary spaces and symbols.
22. Avoid redirects --Avoid meaningless jump
24. Remove duplicate scripts --Remove repeated scripts, not only files, but also functions of the same function.
26. Configure etags --Configure object labels(To be clear about this issue, we need to expand many situations)

We actually use CDN, but yslow itself cannot determine whether CDN is used, so we need to set it in config. In this way, all except 8th items are Class.

Let's take a look at the safari network timeline. In addition to this annoying and huge Google Analytics script, the download time of resources on this site is basically within 1 second.

Explain in detail the 9th points of yslow to Reduce DNS lookup.

Generally, according to our understanding, static resource files are stored in the site directory. In the past, due to the low network speed, Internet Explorer allowed only two concurrent threads for HTTP requests under the same domain name to prevent a large number of HTTP requests from blocking network connections, therefore, the images on some pages are gradually displayed. It can be seen through the network timeline tool of safari.

Obviously, to break through this restriction, we can add several domain names to increase concurrent downloads and speed up.

The best way is to specify the domain name of each file by yourself, according to The I1, i1, I2, I2, I3, I3, i1, i1 arrangement, but also consider the size of the referenced file, arrange properly, which is too complicated for team development. We use three domain names: i1.dpfile.com, i2.dpfile.com, and i3.dpfile.com. Then, each static resource file called is called using a function: dianping. common. staticfile ("/S/JS/g. mt. min. JS "), the function will hash and allocate a domain name based on the file, so that the static file domain name can be maximized, although there are disadvantages, it is a relatively balanced approach.

It's just written by me.ArticleAt the same time, Figo carefully analyzed the yslow scoring standards and found the cause of our loss, also because. The full score of 9th points is 100 points. yslow considers that the most reasonable one on a page is two domain names or less, and each added domain name deducts 5 points, our page has four Domain Names (www \ i1 \ I2 \ I3), 10 points deducted. This account accounts for 1/12 of the total proportion, so it is rounded off and deducted 1 point. (However, I think this score is worth it. Page acceleration is obvious, and DNS search can be cached ~~~)

From the network timeline tool of safari, we can see that loading JS (orange) will block downloading of other resources. Therefore, I plan to independently load a JS file with another domain name j1.dpfile.com.

In any case, the overall performance has improved a lot.

currently, static files use the squid server. After the storage device is deployed, prepare to use nginx to directly provide services. I heard that the performance will be improved a lot.