Turn: how to improve the efficiency of web pages (Part 2) -- use yslow to know why your web slow

What is the most important thing for a website?

-- Content? SEO (Search Engine Optimization )? UE (User Experience )? None! Yes speed!
It is meaningless for a website with rich content to be slow to be inaccessible. It is useless for a website with good Seo skills that cannot be caught by a search Spider (the relationship between page efficiency and search spider, it should be further confirmed that this is consistent with the previous article); it is also empty to talk about the user-friendly website designed by UE.

Therefore, the efficiency of web pages is definitely the most noteworthy aspect. Although we mentioned 14 guidelines on how to improve the efficiency of web pages (Part I)-14 guidelines on improving the efficiency of web pages, but how can we know the efficiency of our current webpage? What is the level? What other aspects do you need to improve? Maybe, you will say, ask the user not to know? However, rational tools and data are more convincing than users with a high proportion of sentiment. This article will introduce you to yslow, a tool for evaluating web page efficiency (Why slow ).

Yslow is a firebug-based plug-in released by the Yahoo developer team. Firebug is a Firefox-based plug-in. Therefore, yslow is a Firefox-based plug-in. Although it is a bit difficult, the problem is:

• Unfortunately, Microsoft's ie series browsers cannot use yslow.
• Yslow can only be used in Firefox.
• To use yslow, you must install Firefox first.
• If you want to use yslow, you need to install the firebug plug-in on Firefox.

This seems a bit frustrating, but in fact it is not as troublesome as you think. You can use yslow quickly by following the steps below:

1. Download the latest version of Firefox to the http://www.mozilla.net.cn/firefox/ and install it. If you have installed Firefox, skip this step.
2. Download the latest version of firebug to https://addons.mozilla.org/en-US/firefox/addon/1843/ and install it. If you have installed firebug, skip this step.
3. Go to the https://addons.mozilla.org/en-US/firefox/addon/5369/ to download the latest version of yslow and install it. If you have installed yslow, skip this step.

Figure 2: Open the firebug Plugin in the menu
 

Open Firefox and you will see firebug (2) in the Tools menu ). Open firebug and click the yslow menu in firebug To Go To The yslow Main Interface (3 ).

Figure 3: Open the firebug plug-in the menu (click the thumbnail to view the full picture), and click the modify Mace menu.

Yslow analyzes the efficiency of this page and evaluates the efficiency of 13 most influential web pages (4 ).

Figure 4: Efficiency Evaluation on this page given by yslow

We can see that the yslow evaluation is based on the first 13 items we mentioned in "how to improve the efficiency of web pages (Part I)-14 guidelines for improving the efficiency of web pages. The blue letter above indicates the score of this criterion. A is the highest. Click the triangle on the right to get more information and suggestions. In some cases, the "magnifier" icon is displayed, which will show more detailed information and suggestions. (5)

Figure 5: yslow provides detailed evaluation information and suggestions for each criterion. Click the stats menu.

This view will show you the overall statistics on the page. Including the page size, CSS style table size, script file size, overall image size, Flash file size, and image file size in CSS. It will also tell you what has been cached and how much has been cached.

Figure 6: stats view information click the components menu

This view is a list of all parts on a page. We can learn the details of each part. Such as type, URL, expires data, status, size, read Time, And etag information. Through the analysis of this list, we can know what is the most expensive resource for us, so as to carry out targeted optimization.

Figure 7: [components] view information. Click the "magnifier" icon to view more details (click the thumbnail to view the full image) and click the [tools] menu.

[Tools] A menu contains four sub-menus, which are four utilities. The jsline tool generates a jsline report, which is an analysis report of the JS script on this page, including errors and suggestions. [All JS] tool that generates cost pages for all script code to facilitate reading and printing of Report pages. [All CSS] tool that generates cost pages for all CSS style sheet Code to facilitate reading and printing of Report pages. [Printable view] generates a report page that is more suitable for reading and Printing Based on the information in [performance] and [stats] views.

Figure 8: [tools] menu, which contains four sub-menus

Click the Help menu.

[Help] is mainly an entry to some common help methods. Here you can access yslow's official network and blog. If you have any questions about yslow usage, you will be able to get a satisfactory answer here.

Figure 9: [help] menus are commonly used help Portals

 

Postscript

"To do what you want, you must sharpen your skills first !" Good tools can greatly improve our work efficiency. However, even if "fang Tian" is in his hand, it is estimated that few people are afraid of him. Good tools are on the one hand, but it is more important to improve our knowledge. Just like this yslow, if there is no theoretical knowledge in "how to improve the efficiency of web pages (Part 1)-14 guidelines for improving the efficiency of web pages, the information provided by the tool may only be visible. Even if we understand the data, it is hard for us to know the corresponding means and measures. Zhuang Han has a powerful axe to achieve fast and easy logging.