Yslow User Guide _ latest 2.0 user guide Chinese Version)

Yslow analyzes Web pages and proposes a set of rules based on how to improve their performance, high-performance web pages. I searched for "yslow usage instructions" and found that the old version yslow was used. So I translated Yahoo's official help on the use of the new yslow version and hoped to provide some help to my friends who used yslow for the first time.

Note: The English language is not very good. If it is incorrect for translation software translation, you should correct it.

Install yslow

Install firebug https://addons.mozilla.org/en-US/firefox/addon/1843 first

Firebug help document http://www.getfirebug.com/docs.html.

Download installation http://developer.yahoo.com/yslow again

Use yslow
Yslow runs in the firebug window. To run yslow, you must install firebug.
There are two ways to start yslow
1. Open the firebug window and select the yslow option.
2. Click the yslow start button in the lower-right corner of the browser.

When you open yslow for the first time, it is displayed in the browser window as a part of firebug.

ClickRun TestRun yslow. You can also click the grade, components, or statistics option to start page analysis.

You can chooseAutorun yslow each time a Web page is loadedIt automatically opens the page for analysis. You can also right-click the yslow status bar and select or Cancel automatic operation.

Yslow View

Yslow displays the analysis of the test results, including the level, component, and statistical information. You can select the tag between these points and click the view name on the firebug console of the yslow tag.
The following describes the levels, components, and statistics.

I. level view

View an analysis, select the performance level tab of the page, or click the letter level of the webpage at the bottom of the page on the status bar.
The view displays the transcript of a webpage. The entire letter level is displayed on the top of the page with the full value. This page is based on 22 high-performance, hierarchical web pages (seePerformance rules). These rules are listed in the order of importance, from the heaviest to the least important. From level A to level F, Level A is the highest.
The following is an example of a level:

If the page is irrelevant to a ruleN/, Indicating not applicable.

Suggestions for improvement are provided for each rule. To view more comprehensive improvement methods, go to the front-endPerformance Optimization Guide

Ii. Component View

Group display page components, table lists component information, clickExpand AllExpand the component information displayed to each group.

The following is a brief description of the component View table:

Type: Type of the component. The webpage consists of the following types: Doc, JS, CSS, Flash, cssimage, image, redirect, favicon, xhr, and IFRAME.

Size (Kb): the size of the component is kilobytes.

Gzip (Kb): The size of gzip compressed by this component is kilobytes.

Cookie encoded ed (bytes): the number of bytes in the cookie Response Header set by HTTP.

Cookie sent (bytes): number of cookies in the HTTP Request Header

Headers: HTTP information header. Click the magnifier to view the full information.

URL: URL

Expires (y/M/d): The Expires header of the date, which is a type of cache setting.

Response time (MS): Response Time

Etag: The etag Response Header, which is also a type of cache settings.

Action: Additional Performance Analysis

Iii. Statistics View

The left-side chart shows the loading status of page elements in the blank cache, and the right-side shows the page loading status after page elements are cached. We can see that after the page element is cached, the HTTP request and the total page size are reduced, thus speeding up the page opening time. See (Page cache settings)

Yslow menu bar

I. Rule Set

1. yslow (version 2)-This rule set contains all 22 test rules.
2. Elite (V1 Lead)-This rule set contains the yslow 1.0 used in the original 13 rule.
3. Small websites or blogs-this rule set contains 14 Rules for small websites or blogs. Refer to the image below to see which rule is in this rule set.

Note that the selected rule is integrated into the default rule set. The default rule set can be one of the three predefined rules or one created by yourself.

To create your own rule set, clickEditButton. The new rule set screen displays:

1. ClickNew SetButton to display all 22 adjustment rules. Select

2. ClickSave ruleset...Save, and a naming window will pop up.

3. You can edit or delete custom rules again.

Yslow Tool

The yslow tool Menu provides a variety of reporting tools that you can use to obtain information to help you analyze Web pages. The tool menu is as follows:

1. jslint

Jslint collects all external and internal JavaScript files from the current web page and submits them to jslint for a javascript verification. It opens a separate window and generates a report, the javascript of the webpage. This report includes the approximate locationSource code. Most of the time, these problems are syntactic errors, but the problems of jslint in searching for style conventions and structural problems.

2. All JS

Collect all external and internal JavaScript web pages and display them in a separate script window. You may want to use this tool to check whether a script is used correctly.

3. All JS beautified

Display Javascript in a readable manner.

4. All JS minified

Collect all external and embedded Javascript, delete comments and white spaces to narrow down the script. To improve the web page performance.

5. All CSS

Collect all the internal and external style sheets of rows on the webpage and display them in a separate window.

6. All smush. it

If you click all smush. It, smush. It will run on all the images on the web page. This tool will tell you that the image can be optimized and create a compressed file to optimize the image. When you select this tool, you will see the output as follows:

The above is the yslow user guide.