YSlow How to use

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 the optimization before and after the optimization of the comparison, click directly download the optimized image, in covering to their own site on the can, highly recommended.

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

Source: >

, 23 Military Records

1. Reduce the number of HTTP requests

Merge pictures, CSS, JS to improve the first access user wait time.

2. Using CDN

Near cache ==> Intelligent routing ==> load balancing ==>WSA full station dynamic acceleration

3. Avoid empty src and href

When the href attribute of the link tag is empty and the SRC attribute of the script tag is empty, the browser renders the URL of the current page as their attribute value, thus loading the contents of the page as their value. Test

4. Specify expires for the file header

Make content cacheable. Avoids unnecessary HTTP requests in the next page access.

5. Compress content with gzip

Compressing any response of a text type, including XML and JSON, is worthwhile. Old articles

6. Put CSS to the top

7. Put JS on the bottom

Prevents JS loading from blocking subsequent resources.

8. Avoid using CSS expressions

9. Place CSS and JS in an external file

The goal is to cache, but sometimes in order to reduce the request, it will be written directly to the page, depending on the PV and IP proportional trade-offs.

10. Weigh the number of DNS lookups

Reducing host names can save response time. At the same time, however, it is important to note that reducing the host reduces the number of concurrent downloads in the page.

IE browser can only download two files from the same domain at the same time. When displaying multiple images on a single page, the speed at which IE users download pictures is affected. So Sina will engage n two level domain name to put the picture.

11. Streamline CSS and JS

12. Avoid jumps

Same domain: Pay attention to avoid backslash "/" jump;

Cross-domain: use alias or mod_rewirte to establish a CNAME (a DNS record that holds the relationship between domain names and domain names)

13. Delete Duplicate JS and CSS

Repeated invocation of the script, in addition to adding additional HTTP requests, multiple operations can also waste time. In IE and Firefox, regardless of whether the script is cacheable, there is a problem with repeating the JavaScript.

14. Configure Etags

It is used to determine whether the elements in the browser cache are consistent with the original server. More resilient than Last-modified date, such as a file that has been modified 10 times in 1 seconds, the ETag can synthesize the inode (the number of index nodes (inode) of the file), MTime (modification time) and size to make a precise judgment, Avoid UNIX records mtime can only be accurate to the second problem. The server cluster is used, preferably after two parameters. Reduce Web application bandwidth and load with etags

15. cacheable Ajax

"Async" does not mean "instant": Ajax does not guarantee that users will not spend time waiting for asynchronous JavaScript and XML responses.

16. Use get to complete AJAX requests

When using XMLHttpRequest, the Post method in the browser is a "two-step Walk" process: First send the file header before sending the data. Therefore, it makes more sense to get data using get.

17. Reduce the number of DOM elements

Is there a more appropriate label that can be used? Life is more than div+css

18. Avoid 404

Some sites change the 404 error response page to "Are you looking for * * * *", which improves the user experience but also wastes server resources (such as databases, etc.). The worst case scenario is a link to an external JavaScript that has a problem and returns 404 code. First, this load destroys parallel loading, and second, the browser will try to find something useful in the returned 404 response content as JavaScript code to execute.

19. Reduce the size of cookies

20. Using a domain without cookies

Compared to the chip CSS, Yahoo! 's static files are outside the primary domain, when the client requests a static file, reducing the repeated transfer of cookies to the primary domain name.

21. Do not use filters

Png24 in IE6 translucent kind of things, don't mess, calm cut into png8+jpg

22. Do not scale the picture in HTML

23. Reduce Favicon.ico and cache

Source: >

YSlow How to use