Improve the efficiency of Web pages use YSlow to know why your Web Slow_ experience Exchange

Content again rich site, if slow to inaccessible is meaningless; SEO do a good site, if the search spider can not catch is also useless (page efficiency and search spider relationship between, need further confirmation, this for and the previous article to stay Unified); UE design re-humanized site, If the user can not even see it is empty talk.

Therefore, the efficiency of Web pages is definitely the most noteworthy aspect. Although we have mentioned 14 guidelines on how to improve the efficiency of web pages in the 14 guidelines on how to improve the efficiency of Web pages (the previous article), how do we know how efficient our web pages are? At what level? And what aspects do not good enough, need to improve it? Perhaps, you would say, ask the user do not know? But rational tools and data are more persuasive than perceptual proportions that occupy too much user experience. This article will introduce you to a tool for evaluating the efficiency of Web pages--yslow (why slow, which is a great name).


Yslow
YSlow is a firebug-based plugin released by the Yahoo developer team. And Firebug is a Firefox-based plugin. So, YSlow is a plugin based on Firefox plugins. It's a bit of a detour, but the final question is:

Unfortunately, Microsoft's IE series browser cannot use YSlow.
YSlow can only be used on Firefox browsers.
If you want to use YSlow, you must first install Firefox.
If you want to use YSlow, then you need to install the Firebug plugin on Firefox.

This may seem a bit frustrating, but in fact it's not as troublesome as you might think, just follow the steps below and you'll be able to use YSlow quickly:

Download the latest version of Firefox to http://www.php.cn/and install it. Of course if you already have Firefox installed, you can skip this step.
Go to http://www.php.cn/to download the latest version of Firebug and install it. Of course if you have installed Firebug you can skip this step.
Go to http://www.php.cn/to download the latest version of YSlow and install it. Of course if you have installed YSlow you can skip this step.

Figure 2: First open the Firebug plugin in the menu

When you open Firefox, you'll see "Firebug" (2) in the Tools menu. Open the Firebug and click on the YSlow menu in the Firebug to see the main interface to YSlow (3).

Figure 3: First open the Firebug plugin in the menu (click the thumbnail for a full larger view)

Click on the "Performace" menu

YSlow began to analyze the efficiency of this page and gave an assessment from the 13 most influential aspects of page efficiency (4).

Figure 4:yslow The efficiency evaluation of this page

As you can see, the YSlow assessment is based on the first 13 articles mentioned in the 14 guidelines on how to improve the efficiency of Web pages (in the previous article)-The efficiency of Web pages . The blue letters in front indicate the score of this rule. A highest. Click on the right triangle to get more information and suggestions, some of the information also has a "magnifying glass" icon, click will also show more detailed information and suggestions. (as shown in 5)

Figure 5:yslow can give detailed assessment information and recommendations for each guideline

Click on the "Stats" menu

This view will tell you the overall statistics of the page. Includes page size, CSS style sheet size, script file size, overall picture size, Flash file size, and image file size used in CSS. It also tells you what is cached, how much is cached, and so on.

Figure 6: "Stats" View information

Click on the "Components" menu

This view is a list of information for all parts of a page. From here we can learn the various details of each part. such as: Type, URL, expires data, status, size, read time, etag information, and so on. Through the analysis of this list, we can know exactly what is the most cost of our resources, so that targeted optimization.

Figure 7: "Components" View information, click on the "Magnifying glass" icon We can know more detailed information (click on the small image to see the full large image)

Click on the "Tools" menu

The Tools menu contains 4 submenus, which is 4 utilities. The "jsline" tool generates Jsline reports, which are analysis reports of JS scripts in this Web page, including errors and suggestions. The "All JS" tool, which will bring the cost page all the script code easy to read and print the report page. The "All CSS" tool, which will cost pages all CSS stylesheet code for easy reading and printing of the report page. Printable view generates a more readable and printed report page for the information in the performance and Stats views.

Figure 8: "Tools" menu with 4 sub-menus

Click on the "Help" menu

"Help" is the main entrance to some common ways of helping. From here you can visit YSlow's official network and blog. If you have any doubts about the use of YSlow, you will get a satisfactory answer here.

Figure 8: The Help menu is a useful entry

Postscript

"工欲善其事, you must first be severe!" "Good tools can really improve our productivity. However, "fools" even if holding "fang", it is estimated that few people are afraid of him. Good tools are on the one hand, but the more important thing is to improve our own knowledge level. Just like this yslow, if there is no "how to improve the efficiency of the Web page"--14 guidelines for improving the efficiency of Web pages, the information we see may only be superficial, even if we understand the data, it is difficult to know the corresponding means and measures. The brawny men took 厉斧, so that the felling was quick and easy.

