How to use the Website Performance tool YSlow

YSlow is Yahoo developed web-based performance analysis browser plug-in, from the beginning of the year I used YSlow, changed the blog template a lot of redundant code, not only to improve the speed of the Web page, this plugin also helped me to analyze a lot of other Web site code, before I also deliberately written to improve the speed of the website cheats, is through the plug-in analysis of the results. There are a lot of yslow on the network, I would like to introduce my method of using YSlow and some other little tricks that others have not mentioned.

Installation method of YSlow

Now YSlow has a lot of versions, this article is about 3.0.4 the latest version, open YSlow official website can see there are four versions to choose from: Firefox browser, Google (Chrome) browser, open Gate (opera) browser and mobile version.

Install YSlow to install Firebug (this address in Firefox for example), two ways to start yslow:1, open the Firebug window, select the YSlow option. 2. Directly click on the YSlow Start button in the lower right corner of Firefox.

(Figure 1:yslow Start-up interface)

Clicking Run Test runs YSlow, you can also click Grade, components, or statistics options to start the analysis of the page, if you tick on Autorun YSlow each time a Web page is loaded, It will automatically divide the page after it is opened.

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, small web site or blog-This rule set contains 14 rules for small sites or blogs, recommended for each.

Yahoo! Evaluates the site's performance on 23 military lines

Yahoo has put forward a very well-known 34 guidelines for website speed: "Best practices-Speeding up Your Web site". Now the 34 is reduced to a more intuitive 23, and the score from F~a and the final total is given for each article.

And now 23 site performance optimization recommendations in YSlow's official website can see, of course, can not see, in the use of YSlow, in the control Panel will give you scoring tips, and improve suggestions.

Grade (Hierarchy View)-yslow second tab

(The site performance score given in Figure 2:yslow)

YSlow gives the site performance score, from F~a,a is the best, through the test LU Songsong blog, the site has 4 points lowest, example 2 of the minimum points: I blog HTTP request too much. There are 14 external JS, 3 CSS files (previously I have merged from 6 to 3), 14 CSS background images.

YSlow's advice is to let me merge these, as for the merge CSS reference picture I introduced in the "7 tips to improve the speed of Web site opening."

Components (component view) the Third tab of-yslow

(Figure 3: See how much space the individual elements of the page are using through the components test)

By testing the size of each element of the page, such as a page of my blog, there are 236 images (Pictures), Took up 489.2K, through the detailed view, found from Gravatar (comments avatar) of the reference picture is very large, in addition to my blog province comments on the number of dozen, each avatar occupies a few k, hundreds of occupies the entire page 50% size, and the picture is quoted, loading is more slow.

So, I came to the conclusion that Gravatar, although enhanced interactivity and personality, but also a substantial impact on the site speed.

Statistics (Statistics view) tab of-yslow Fourth

(Statistics view of Figure 4:yslow)

The left-hand chart shows the loading of the page elements in an empty cache, and the page load on the right for pages elements using cached pages. Can be intuitively seen (especially I marked the red box), this page 263 HTTP requests, the size of the Web page reached 773.9K, which means to open a page does not open almost need to download 1M of things, and by using the cache we can see the slice is basically cached, and the total size of the page compression to 43.2K.

Statistics This statistics view tool is just as intuitive as the components (Third tab), and if you want to get performance tuning recommendations, see the Grade (Second tab) for detailed recommendations.

Tools (Accessibility)-yslow Fifth tab

(Figure 5:yslow the gadget provided)

JSLint is a powerful tool that examines HTML code and inline JavaScript code and discovers a JS error on Google Analytics through JSLint.

All JS: See how many JS you have quoted on this page altogether.

All JS beautified: Put all JS on the open page, using the Webmaster Unified Inspection (I feel little effect).

All JS Minified: Ibid, but it shows the compressed JS code, if you want to JS optimization, it has been optimized for you, come over directly with.

All CSS: Displays all CSS files for your Web page.

YUI CSS Compressor: Display Web page compressed CSS file, also can be used directly to come.

All smush.it™: Picture online optimization site, click on it will automatically jump to the Smushit website to you automatically optimize the CSS image, the site provides optimized before and after the optimization of the comparison, click directly download the optimized image, in covering to their own site on it, highly recommended.

Printable View: This is for printing, department meetings, front-end designers to discuss, report to the boss on the estimated use.