Shulou(Shulou.com)06/02 Report--

What are the scoring rules of the web scoring plug-in YSlow developed by yahoo? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

YSlow is a page scoring plug-in developed by yahoo USA, which is great, from which we can see a lot of shortcomings on our page, and we can know how we improve and optimize.

Carefully studied the scoring rules of YSlow.

Scoring rules for YSlow:

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), a frightening number. After thinking about it, why do you list too many of these three requests as an important disadvantage to page loading, while too many IMG requests are not?

It was found that these requests were avoidable.

15 JS and 3 CSS can be merged in a special way (this technical department has helped us solve it, thank you so much, heh heh. In this way, after the merge, only one JS and one CSS will appear on the page (there is a certain requirement for JS encapsulation).

But what about the 47 CSS background images requests? Why are pure IMG requests on the page reasonable, while too many CSS background images requests are a disadvantage? After thinking about this for a long time, I finally understood that it was like this:

General page ICON, column background, picture button, ah, we will use the picture CSS background to achieve, and generally this picture CSS background used 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, at most 2-3. Later, I took a closer look at Yahoo's page in the United States, and they did the same thing. Although it takes a certain amount of time to regularly merge these ICON, column background and picture buttons to facilitate CSS calls, it is absolutely cost-effective and necessary, and YSlow is highly recommended.

Our score for 2.Use a CDN is F, the lowest. To be honest, I didn't know what CDN was at first. I didn't know until I checked GOODLE. The full name of CDN is Content Delivery Network, that is, content delivery network. Its purpose is to publish the content of the website to the "edge" of the network closest to the user by adding a new network architecture to the existing Internet, so that users can get the content they need nearby, solve the crowded situation of Internet network, and improve the response speed of users visiting the website. Technically, it comprehensively solves the problem of slow response speed of users visiting the website caused by small network bandwidth, large number of user visits and uneven distribution of sites.

It seems that after the above explanation, I basically understand what CDN is all about. Later, I consulted the Chinese website SA and learned that our website has not optimized CDN yet, but it is said that we have more advanced technology to solve similar problems (specific technology is kept secret), but after all, CDN is also a quite good technology, so it is definitely better to do CDN optimization on the basis of our advanced technology. Hey. It is said that SA will do several CND next year.

3. Add an Expires header sets the expired HTTP Header. Set Expires Header to cache scripts, stylesheets, pictures, Flash, etc., in the browser's Cache.

In fact, our website has also made this optimization, at least the picture has been optimized on this, but not completely. Our CSS and JS have not been optimized, but an external advertising JS has been introduced, hehe. In fact, setting expired HTTP Header should be done on scripts, stylesheets, and Flash. However, it is said that this SA is not done, but there are certain risks, because JS and CSS have certain logic. If there is a cache on both the server side and the client side, in case something goes wrong, it will make it more difficult for us to find the problem in the future, but I think the two can weigh and coexist.

4. Gzip components compresses the content of our pages in Gzip format. Gzip format is a very common compression technology. Almost all browsers have the ability to decompress Gzip format, and it can be compressed in a very large proportion, generally with a compression ratio of 85%, that is, 100K pages on the server side can be compressed to about 25K Gzip format data to send to the client. After receiving the data in Gzip format, the client automatically decompresses the data and displays the page.

Our website basically achieved this 100%, but our score of this item did not reach the A level as expected, because our external links, such as our home page, had external advertising JS. This JS said that the website we owned had not been optimized by GZIP, which affected our website, so we only had B or C grade.

5. Put CSS at the top puts CSS external links at the top of the page.

In fact, we generally abide by this principle, if the CSS external links as part of the logic appears below the page header, I personally think that this itself is a mistake. Fortunately, our pages are basically done, but some pages, such as LIST pages, still have CSS links linked to logic, in order to solve some unreasonable product logic. Therefore, we WEB front-end engineers have an obligation to put an end to these unreasonable product logic to destroy our page results and page loading speed, can not be achieved in order to achieve.

After reading the above, have you mastered the scoring rules of the web scoring plug-in YSlow developed by yahoo? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.