Webpage optimization plug-in YSlow

YSlow is a page scoring plug-in developed by yahoo USA. It is very good. We can see many shortcomings on our pages, and we can know how to improve and optimize our changes.

YSlow drop rating rules.

There are 12 main items:

1. Make fewer HTTP requests to have as few http requests as possible .. We have 141 requests (15 JS requests, 3 CSS requests, and 47 CSS background images requests), which is terrible. I thought about why I listed these three types of requests as an important negative factor for page loading, while too many IMG requests were not listed as negative factors?

It is found that these requests can be avoided.

15 JS files and 3 CSS files can be merged in special ways (this technology department has helped us solve the problem. Thank you very much, hey .), After the merge, only one JS and one CSS (with certain requirements on JS encapsulation) will appear on the page ).

But how can we solve 47 CSS background images request changes? Why is the pure IMG request on the page reasonable, and the excessive number of CSS background images requests is an unfavorable factor. I thought for a long time and finally realized that it was like this:

The ICON, column background, and image buttons on the page are all implemented using the image CSS background. Generally, the image CSS background is relatively small, therefore, you can merge these images into a relatively large image. on this page, only one CSS background images request is displayed, and a maximum of two to three images can be created. Later, I took a closer look at Yahoo's web page in the United States, and they did the same. Although it takes some time to merge the icons, column backgrounds, and image buttons with rules, it is definitely cost-effective and necessary to facilitate CSS calling. YSlow is also highly recommended.

2. Use a CDN. Our score is F and the lowest. To be honest, I didn't know what CDN was at the beginning. Later I checked GOODLE to find out. CDN stands for Content Delivery Network (CDN. The purpose is to add a new network architecture to the existing Internet to publish website content to the "edge" closest to the user's network ", this allows users to obtain the desired content from the nearest node to solve the problem of Internet congestion and improve the response speed of users accessing the website. Technically, it solves the slow response speed caused by low network bandwidth, large user traffic, and unevenly distributed outlets.

It seems that after the above explanation, I basically understood what happened to CDN. Then I consulted the Chinese site SA and learned that our website has not yet completed CDN optimization, however, it is said that we have more advanced technologies to solve similar problems (the specific technology should be kept confidential), but CDN is also a very good technology after all, therefore, CDN Optimization Based on our advanced technologies is certainly better than the current one. It is said that SA will do several CND points next year.

3. Add an Expires header to set expired HTTP headers. You can Cache scripts, style sheets, images, and Flash files in the browser Cache.

In fact, our website has also made this optimization, at least the image is optimized on it, but not completely. Our CSS and JS have not been optimized yet, but an advertisement JS has been introduced externally. In fact, setting expired HTTP headers should be done in scripts, style sheets, and Flash. but it is said that this SA has not been done, but there is a certain risk, because JS and CSS have a certain logic, if both the server side and the client side have cache, in case of any questions, we can find the problem in the future and increase the difficulty, but I think the two can be balanced and coexist.

4. gzip components compresses the content of our pages in Gzip format. Gzip format is a common compression technology. Almost all browsers have the ability to decompress the Gzip format, in addition, the compression ratio is very large. Generally, the compression ratio is 85%. That is to say, a K page on the server can be compressed to about 25 k Gzip format data and sent to the client, after receiving data in Gzip format, the client automatically decompress the data and the page is displayed.

Basically, our website has achieved 100%, but our score has not reached the expected level a level because of our external links, such as our homepage, there are external advertisements for JS. This JS says that the website has not been optimized by GZIP. Even if we are tired of our website, we only have Class B or Class C.

5. Put CSS at the top place the CSS external link to the top of the page.

In fact, we generally follow this principle. If CSS external links appear below the page header as part of the logic, I personally think this is an error. Fortunately, our pages are basically done, but some pages, such as LIST pages, still have CSS links that are logically linked to solve some unreasonable product logic. Therefore, our WEB Front-end engineers are obligated to prevent these unreasonable product logic from damaging our page results and page loading speed, and cannot achieve this for implementation.