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 this component is in kilobytes.

Gzip (KB): The gzip compression size of this component is in kilobytes.

Cookie encoded ed (bytes): The number of bytes is 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: Link address

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

Response time (MS): Response Time

Etag: Etag Response Header, which is also a cache setting

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.

The detailed explanation is as follows:

1. Minimize HTTP requests reduces HTTP requests
Images, CSS, scripts, Flash, and so on all increase the number of HTTP requests. Reducing the number of these elements can reduce the response time. Writing multiple JS and CSS files into a file whenever possible. It is not good to write images directly into the page. It should be written into CSS, use CSS Sprites to splice small images and use background to locate them.
2. Use a content delivery network using CDN Technology
CDN is really a good thing. Eight-way server providers usually charge fees for this service. I used to buy domestic space but I didn't know what to use at the time, now it's gone...
3. Add an expires or a cache-control header to set the header file expiration or static Cache
The browser uses cache to reduce the number of HTTP requests to speed up page loading. If a long expiration time is added to the page header, the browser will always cache the elements on the page. However, if something on the page changes, you need to change the name. Otherwise, the user will not take the initiative to refresh the page ~ This can be done by modifying the. htaccess file.
4. gzip components gzip Compression
The GZIP format is a common compression technology. Almost all browsers have the ability to decompress the GZIP format, and it can be compressed in a very large proportion. Generally, the compression rate is 85%. Compression is not compressed. You can perform the test here.
5. Put stylesheets at the top and put CSS on the top.
Allows viewers to see the complete style of the website as soon as possible.
6. Put scripts at the bottom to put the JS at the bottom
After the website is rendered, set the function. Of course, these JS files do not affect the content performance during your loading process.

 

7. Avoid CSS expressions avoid CSS expressions
The CSS expression is terrible. It only takes a lot of effort to execute the content supported by IE. You need to move the mouse to perform re-calculation, but sometimes this must be used for browser compatibility. | IE6 is used to die! ~
8. Make JavaScript and CSS external to link JS and CSS external links
As mentioned above, some common JS and CSS files can be used as external links. For example, I am a jquery file from Google's external links, if a visitor has downloaded and cached this file when Browsing another website that uses this external link file, he does not need to download it when browsing my website! ~
9. Reduce DNS lookups reduces DNS Lookup
It seems that we want to reduce the number of resources that the website calls from outside. My Google analysis and Picasa's external link images are included.
10. Minify JavaScript and CSS reduce the size of JS and CSS
Writing JS and CSS is skillful, with the least Code Implement the same function, reduce the blank space, enhance logic, and use abbreviations. Of course, there are also many tools that can help you achieve this.
11. Avoid redirects avoid redirection
When the link is written, although "http: // www. today-S-ooxx. COM and http: // www. today-S-ooxx. COM/"has only one final"/", but the results are different. The server needs to take the time to redirect the former to the latter and then perform the jump. Pay attention to this, you can also use alias, mod_rewrite, or directoryslash in Apache.
12. Remove duplicate scripts to delete duplicate scripts
The browser that repeatedly calls the Code does not recognize and ignore the code, but will calculate it again, which is of course a big waste.
13. Configure etags in configure etags
I don't know what's going on. In short, I deleted it in. htaccess.
14. Make Ajax cacheable cache Ajax
Ajax responds in real time. Before the browser receives new data, the old data is cached, which improves the efficiency.
15. Flush the buffer early release of the buffer
When a user makes a page request, the server needs to spend 200 to 500 milliseconds to splice HTML, write it between the head and the body, and release the buffer. In this way, the file header can be sent first, then, send the file content to Improve the efficiency.
16. Use get for Ajax requests to perform Ajax requests in get Mode
The get method has only one interaction with the server (sending data), while the POST method requires two (sending the data in the header ).
17. Post-Load components delayed component loading
Yui image loader is a good example of Loading required components first for page initialization and loading others.
18. preload Components
Content that may be used after loading in advance does not conflict with delayed loading. Its purpose is to provide faster response for subsequent requests. For details, refer to the CSS Sprites application on the Google homepage.
19. Reduce the number of DOM elements to reduce the number of DOM elements
A complex page structure means a longer download and response time, and a more reasonable and efficient use of tags to construct pages. This is a prerequisite for a good front-end.
20. Split components internal SS domains cross-origin separation component
Multiple sources of page components can increase your parallel downloads, but be careful not to use too many. If you have more than 2-4 domain names, the DNS search mentioned above will be wasted.
21. Minimize the number of iframes to reduce the number of IFRAME
Ifames needs to be used more effectively.
IFRAME advantages: it is helpful for downloading slow third-party content such as advertisements, security sandbox, and parallel downloading scripts.
IFRAME disadvantage: even if it is empty, there will be a large amount of resource consumption, it will block the onload of the page, non-semantic
22. Do not display the 404 page for no 404 S
404 pages appear in the site itself (non-Search Results). Meaningless 404 pages will affect user experience and consume server resources.
23. Reduce cookie size reduce cookie
The cookie is exchanged between the server and the browser through the file header to minimize the cookie volume and set a reasonable expiration time, which can greatly improve the efficiency.
24. Use cookie-free domains for components use a cookie-free domain name for the component
Cookie reading of Static components is a waste. It is a good way to store your static components using another domain name without cookies, alternatively, you can store only domain names with WWW in cookies.
25. Minimize Dom access reduces Dom access times
JS is slow to access the Dom. Try not to use js to set the page layout.
26. Develop smart Event Handlers develops flexible event handling handles
If too many elements on the DOM tree are added to the event handle, the response efficiency will be low. The Yui event tool has an onavailable method that helps you flexibly set the DOM Event handle.
27. Use choose <link> over @ import instead of @ import
Using @ import in IE is the same as using <link> at the bottom of the page. We mentioned that we should put <link> on the top.
28. Avoid filters avoid the use of filters
If Alpha transparency is required, do not use alphaimageloader. It is inefficient and only applicable to IE6 and earlier versions. Use png8 images. If you want to use it, add _ filter to avoid affecting IE7 + users.
29. optimize images Optimized images
Converting your GIF to png8 will be a good way to reduce the volume. There are also many ways to process your jpg and PNG images to achieve the optimization effect.
30. Optimize CSS Sprites optimize CSS Sprites
In CSS Sprites, you can arrange images vertically and compact as much as possible, and arrange images of similar colors together to reduce the size of the image and increase the display speed of the page image.
31. Don't scale images in HTML. Do not scale the image in HTML.
The size of the image to be used is large. After the width of the 1000x1000 image is "100" Height = "100", the size of KB will not be reduced.
32. Make favicon. ICO small and cacheable reduce the size of favicon. ICO and cache it
The website's browser ICO should not be changed frequently, so it will be cached for a long time, and it is best to control it below 1 K.
33. Keep components under 25 k ensures that the component is less than 25 K
The iPhone cannot cache more than 25 KB of components, and this must be before being compressed.
34. Pack components into a multipart document package the component into a multi-part document
Just like adding an attachment to an email, an HTTP request is enough, but this technology requires your proxy support, which is not supported by the iPhone.

Reprinted statement:

Original load: Web Front-end Optimization

Link: yslow User Guide