Yslow usage (Web performance optimization)

Yslow is a browser plug-in developed by Yahoo! Based on Web page performance analysis. After I used yslow at the beginning of the year, I changed a lot of blog template redundancy.CodeThis plug-in not only improves the speed of opening web pages, but also helps me analyze the code of many other websites. Previously, I also specifically wrote tips for improving the speed of websites, this plug-in is used for analysis. There are already a lot of yslow usage instructions on the Internet. In this article, I would like to introduce the method of using yslow and some tips not mentioned by others.

Yslow Installation Method

Yslow now has many versions. This article introduces the latest version 3.0.4. You can see four versions available on the yslow Official Website: Firefox, Google (chrome) browser, Opera browser, and mobile edition.

To install yslow, you must first install firebug (this address uses Firefox as an example). You can start yslow in two ways: 1. Open the firebug window and select the yslow option. 2. Click the yslow start button in the lower right corner of Firefox.

(Figure 1: yslow startup Interface)

Click Run test to run yslow. You can also click grade, components, or statistics to start page analysis. If you check Autorun yslow each time a Web page is loaded, it will automatically split the page that will be opened later.

Note the red box in the figure. Here is the rule set. yslow (V2) contains all 22 test rules. yslow (V1) contains the original 13 Rules, A small website or blog-this rule set contains 14 Rules for small websites or blogs. We recommend that you use the check box.

23 military rules for Yahoo to evaluate website performance

Yahoo once proposed 34 well-known guidelines for website speed: Best practices for speeding up your web site. Now 34 are simplified to 23 more intuitive ones, and ~ A's score and the final total score.

Now we can see 23 website performance optimization suggestions on the homepage of yslow's official website. Of course, you can also choose not to. After using yslow, you will be prompted to score on the control panel, and suggestions for improvement.

Grade (level view)-second tab of yslow

(Figure 2: website performance score given by yslow)

The website performance score given by yslow, from F ~ A and A are the best. From the test of Lu songsong's blog, there are four websites with the lowest scores. in example 2, the lowest score indicates that my blog has too many HTTP requests. 14 external JS files, 3 CSS files (I have merged from 6 to 3), and 14 CSS background images are applied.

Yslow's suggestion is to let me merge these items. As for merging CSS reference images, I have introduced it in "seven tips to increase the speed of website opening.

Components (Component view)-the third tab of yslow

(Figure 3: view the space occupied by each element on the webpage through the Components test)

The components test shows the space occupied by each element on the webpage. For example, on a certain page of my blog, there are 236 images (images), occupying 489.2 K. For details, see, I found that the referenced images from gravatar (comment Avatar) are very large. When I add my blog to my post, the comments will be posted in this province, and each avatar will take up to a few K, hundreds of images Occupy 50% of the size of the entire webpage, and the image is still referenced, so loading is even slower.

Therefore, my conclusion is that gravatar enhances interaction and personality, but it also affects the website speed.

Statistics (Statistics view)-fourth tab of yslow

(Figure 4: yslow 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. It can be intuitively seen (especially in the red box of my mark) that the webpage has 263 HTTP requests and the webpage size reaches 773.9 kb, which means that you almost need to download 1 Mbit/s to open a page without opening it, by using the cache, we can see that the slice basically depends on the cache, and the total size of the webpage is compressed to 43.2 K.

The statistical information View tool statistics is the same as components (third tab), but the effect is more intuitive. To obtain performance optimization recommendations, you should still look at the detailed recommendations of grade (second tab.

Tools-the fifth tab of yslow

(Figure 5: gadgets provided by yslow)

Jslint is a powerful tool that can test HTML code and inline JavaScript code. jslint discovers a JS error on Google Analytics.

All JS: view the total number of JS files referenced on your webpage.

All JS beautified: Put all Js in the open page and use the webmaster for unified check (I don't think it works ).

All JS minified: Same as above, but it shows compressed JS Code. If you want JS optimization, it has been optimized for you and can be used directly.

All CSS: displays all CSS files on your webpage.

Yui CSS Compressor: displays the compressed CSS file of a webpage, which can be used directly.

All smush. IT: online image optimization website. After you click it, it will automatically jump to the smushit website to automatically optimize CSS images for you. The website provides a comparison between the optimization and the optimization, click to directly download the optimized image and overwrite it on your website. We strongly recommend that you.

Printable view: This is printed and used for department meetings, discussions by front-end designers, and estimation when reporting to the boss.