Yahoo Development Web page scoring plugin YSlow scoring rules

YSlow is a Yahoo American development of a page scoring plug-in, very good, from which we can see a lot of shortcomings on our page, and can know how we change but improve and optimize.

The grading rules of the next yslow are carefully studied.

There are 12 main articles:

1. Make fewer HTTP requests as few HTTP requests as possible ... We have 141 requests (15 JS requests, 3 CSS requests, 47 CSS background images requests), much scarier. Think about it, why is this three requests too much as an important disadvantage to load the page, and the excessive IMG request is not listed as a disadvantage?

It turns out that these requests are avoidable.

15 JS and 3 CSS can be completely through a special way to merge (this technology department has helped us solve, it is too grateful, hehe. ), after such a merger, the general situation on the page will only appear a JS and a CSS (for JS package has a certain requirement).

But 47 CSS background images request change how to solve? Why is the pure IMG request on the page reasonable, and CSS background images request is a disadvantage. This I think for a long time, finally understand that it is like this:

The icon on the General page, column background ah, picture button Ah, we will use the picture CSS background to achieve, and generally this picture CSS background used in the pictures are relatively small, so you can merge these pictures into a relatively large picture, so that the page will only appear a CSS Background images request, up to 2-3. After a closer look at the Yahoo America page, they do do the same, although it takes a certain amount of time to incorporate these icon, column background, picture buttons to facilitate CSS calls, but it is definitely cost-effective and necessary, YSlow is highly recommended.

2.Use a CDN This is our grade F, the lowest. To tell the truth, I just started what is a CDN do not know. Later I checked the goodle to know. The full name of CDN is content Delivery network, that is, contents distribution network. The goal is to add a new layer of network architecture to the existing Internet, publish the content of the Web site to the nearest user's network "edge", so that users can get the required content, solve the Internet congestion situation, improve user access to the Web site response speed. The problem of slow response of users visiting the website due to the small network bandwidth, the large amount of users ' access and the uneven distribution of the Web site are comprehensively solved from the technology.

It seems that the above explanation, basically understand the CDN is going on, and then consulted the next Chinese site SA, we know that our site does not do CDN optimization, but it is said that we have more advanced technology to solve similar problems (specific what technology that is confidential), But after all, CDN is a pretty good technology, so in our advanced technology on the basis of doing CDN optimization, certainly better than now, hehe. It is said that SA will do some CND next year.

3. Add an Expires header sets the expired HTTP header. Set the Expires header to cache scripts, stylesheets, pictures, Flash, and so on in your browser's cache.

In fact, our site has done this optimization, at least the picture has been optimized on this, but did not do completely. Our CSS and JS have not done optimization, it is an external introduction of an ad JS did, hehe. In fact, setting expired HTTP headers should be done in script, style sheet, Flash on. But it is said that the SA was not done, but there is a certain risk, because JS and CSS is a certain logic, if the server and the client have a cache, if there is any problem, for us to find out the location of the problem and increase the difficulty, but I think the two can be weighed and coexist.

4. Gzip Components The content of our page in gzip format compression, gzip format is a very common compression technology, almost all browsers have the ability to extract the gzip format, and it can compress a very large proportion, The general compression rate is 85%, that is, the server-side 100K of the page can be compressed to 25K about the gzip format of data to the client, the client received the GZIP format data after the automatic decompression after the display page.

This is basically 100% of our site is done, but our score did not reach the imagination of a level, the reason is out of our external links, such as our home page, there is an external advertising JS, this JS said that the site has not done gzip optimization, compromised our site, so we have only B, or Class C.

5. Put CSS in the top to put the CSS external links to the front of the page.

In fact, we generally adhere to this principle, if the CSS external links as part of the logic of the page appears below the head, I personally think this is a mistake. Fortunately, our page has basically done, but some pages such as the list page, or a logical link to the CSS links, the reason is to solve some inherently unreasonable product logic. Therefore, our web front-end engineers have the obligation to eliminate these unreasonable product logic damage to our page results and page loading speed, can not be achieved to achieve.