YSlow tutorial Speed Up your website

Yslow website analysis tool

Yslow is an excellent tool from Yahoo!.This tool can be used to analyse web pages for possible performance bottlenecks.Since web page load time has become important parameter for

  • Search Engine Optimization
  • User Experience
  • Conversion

So it is handy to have a tool which can give you idea about possible problems with your web page.You can use report created by Yslow to find out the reasons for slow load time.After getting idea about possible performance issues you can tune them for better performance.The best part is Yslow also gives you hints about solutions to the problems as well.

I use Yslow to analyze my web page and tune it.This is simple tool to work with and is totally free of cost.This tutorial will cover basic parts like installation and analyzing your web page to more advanced topics of solving the performance issues.So lets get started with Installation.

Yslow installation

Yslow installation process is very easy.It is available as plugins for popular web browsers like Chrome,Firefox,Safari and Opera.But it can be used in mobile browsers and other desktop browsers as a bookmarklet.Yslow has wide range of rule sets on which a web page is evaluated.Not all of these rule sets are supported on all the browsers.

Only Firefox supports all the Yslow rule sets.So if possible you should install Yslow on Firefox browser.You can get details of Yslow limitation on each browsers here .As original implementation of Yslow was on Firefox and it is the recommended browser we will see installation on Firefox in detail.

Firefox Installation

  1. Install Firebug plugin for Firefox.Go to http://getfirebug.com/ and click on Install Firebug.
  2. Go to http://developer.yahoo.com/yslow/.
  3. Click on the Install button to install Yslow for Firefox.
  4. Go to Tools –> Firebug –> Open Firebug menu option of Firefox.
  5. The firebug is displayed in bottom part of firefox window with YSlow as one of tab.

Chrome Installation

  1. Go to http://developer.yahoo.com/yslow/.
  2. Click on the Install button to install Yslow for Chrome.
  3. After installation you can see Yslow icon on top right hand corner of your browser.

Mobile/Bookmarklet Installation

You can use this method to test your web page from mobile browsers as well as Desktop browsers having bookmarking feature.So almost all browsers can be used to test your web page with YSlow.I have not provided details installation instruction here.The reason is that it is already provided in detail at this link

Running Yslow test

Follow below steps to analyse a web page with Yslow.

  1. Enter the website address or web page address in address bar of browser and let the page load completely.
  2. Choose Yslow tab on firebug screen in Firefox.Click on the Yslow icon in Chrome.
  3. You can select different rule sets from right hand corner select tab.The default rule set is Yslow.This rule set checks your website on all 23 rules of Yslow.But there are two more predefined rule sets Classic and Small website or blog.If your website is small one then you can use this rule set.Selecting this rule set will evaluate your web page on less number of rules.
  4. Click on Run Test Button to analyse your website with Yslow rule sets
  5. After the test is complete you can see overall statistics of your web page.
  6. You can see overall score of your web page and individual scores on different rule sets of Yslow.

Lets understand different rule sets after that We will see in detail the reports generated by YSlow.Below table lists different YSlow rule sets (YSlow (V2),Classic (V1),Small Site/Blog) along with performance rules.YSlow tests a web page based on 23 rules.All 23 rules are tested in YSlow (V2) rule set.Classic rule set applies only 13 rules.Small site and blog applies only 15 rules.You can refer the table to check performance rules applied in each rule set.You can also create your own rule set but that is not required at all.

Serial NumberPerformance RulesYSlow (V2)Classic (V1)Small Blog/Site
1Minimize HTTP RequestsYesYesYes
2Use a Content Delivery NetworkYesYesNo
3Avoid empty src or hrefYesNoYes
4Add an Expires or a Cache-Control HeaderYesYesNo
5Gzip ComponentsYesYesYes
6Put StyleSheets at the TopYesYesYes
7Put Scripts at the BottomYesYesYes
8Avoid CSS ExpressionsYesYesYes
9Make JavaScript and CSS ExternalYesYesNo
10Reduce DNS LookupsYesYesYes
11Minify JavaScript and CSSYesYesYes
12Avoid RedirectsYesYesYes
13Remove Duplicate ScriptsYesYesYes
14Configure ETagsYesYesNo
15Make AJAX CacheableYesNoNo
16Use GET for AJAX RequestsYesNoNo
17Reduce the Number of DOM ElementsYesNoYes
18No 404sYesNoYes
19Reduce Cookie SizeYesNoNo
20Use Cookie-Free Domains for ComponentsYesNoNo
21Avoid FiltersYesNoYes
22Do Not Scale Images in HTMLYesNoYes
23Make favicon.ico Small and CacheableYesNoYes

Below is the test result of a web page on this website using rule set Yslow (V2),Classic (V1) and Small Site/Blog.The YSlow (V2) rule set is the ideal one.So you should most of the times use YSlow (V2) while testing your web page.

Small Site/Blog rule set test result

YSlow small site blog rule set test score
YSlow small site blog rule set test score

Classic rule rule set test result

YSlow Classic rule set test score
YSlow Classic rule set test score

YSlow Grade Screen

This screen lists score of your web page on different rule sets.The grades are

  1. A grade – 90<= A <= 100
  2. B grade – 80<= A <= 90
  3. C grade – 70<= A <= 80
  4. D grade – 60<= A <= 70
  5. E grade – 50<= A <= 60
  6. F grade – 00<= A <= 50
YSlow Grade Tab
YSlow Grade Tab

You can see Grade screen for my web page.In below image I have got score D and C on Expires Header and Usage of CDN.So I will click on these and see possible reasons for low grades.Similarly you should check the rule set in which your web page has performed below average (that is grade D,E and F).

You need to solve these issues for better Yslow performance score and page load time.I have written a series of article which can help you get better score on these matrix without need of technical expertise.The tutorials are easy to follow and implement.

Yslow Component Tab

Yslow component tab shows valuable information like

YSlow Components Tab
YSlow Components Tab
  • Type – type of resource like doc,JS (JavaScript),CSS (Cascading Style Sheet),Image (Images on your website),Favicon.
  • Size(KB) – Original size of the resource
  • Gzip(KB) – size of the resource after Gzip.You can see difference in both the sizes.If there is no difference either there is no saving after Gzip or the resource is not getting zipped.So you should zip the resource.
  • Cookie Received(bytes), Cookie Send(bytes), Headers
  • URL – The URL of resource on your web page.You can use it to identify the resource in question
  • Expires(Y/M/D) – Shows whether Expires header is set for the resource or not.If yes then date when the resource will expire is shown.Your resources should have an future date as Expire date (in this column).
  • Response Time(ms) , ETag
  • Action – Shows the action you can perform to solve the issue.It generally has smush.it link for images.You can smush your images to reduce their size.

So from this tab you can find out resources not zipped and cached.Zipping a resource is important.It reduces transfer size of the resource.Lesser is the size faster is the load time.So checking this tab is important for your website performance tuning.

Yslow Statistics Tab

Yslow statistics tab gives you graphical representation of two scenarios Empty Cache and Prime Cache.Empty cache is condition if visitor first visits your website.Prime cache is condition if visitor visits your site again.In both the cases it shows

  • Number of HTTP requests
  • Total Size of resources in KB
  • Different type of components along with their number and total size
YSlow Statistics Tab
YSlow Statistics Tab

Comparing both of them you can get idea of resources cached on repeat view.If more resources are getting cached (shown in Prime Cache) then you are good to go.But if more resources are not present in prime cache then you should work on it.Below is image from my website.You can see out of 7 HTTP request and 161.3KB the Prime cache has 4 HTTP request and 121.4KB.

So three resources are not part of cache.The ideal case would be caching seven out of seven resources.But your should always try to cache as many resource as possible.This helps you minimize load time of your website.

Solutions for better YSlow score

I have written series of post on performance optimization and many are still in pipeline.These techniques are tested and explained in step by step tutorial.You can see YSlow score of grade B following these tutorials.

For all websites

Using Content Delivery Network

Content Delivery Networks can considerably speed up your website.I have discussed in detail about CloudFlare configuration for optimal performance.CloudFlare is free of charge and can be used by any website.You can read the tutorial here.

Do Not Scale Images in HTML

Do Not Scale Images in HTML is reported as Served Scale image issue in Google PageSpeed.You can solve the problem using techniques mentioned in this post.

Reduce DNS Lookups

DNS Prefetch is an easy to implement performance optimization technique.You can read more about it here.

For WordPress powered website only

Usage of a caching plugin is must whether you are using WordPress or not.For WordPress I recommend using W3 Total Cache plugin.This might seem complex to configure but once configured does work well.You can read this post for W3 Total Cache configuration.

For VPS hosting and Dedicated hosting

VPS hosting and Dedicated hosting give you more control to tune your website.You can use below techniques only on VPS hosted websites or dedicated hosted websites.Database tuning is very important for faster load time.You can read more about MySQL tuning on this post.

You can use Google PageSpeed module for improving your website speed.But this method is only applicable if you are using VPS or dedicated server.If you are using shared hosting then you can request your hosting provider to install Google PageSpeed module.I have written article on configuring Google PageSpeed module for Nginx server.You can read the same here.

Conclusion

I will be updating this post with time with links to more performance optimization posts.Fixing the issue reported by YSlow is the best method to improve your website performance.

Consider sharing the post in case you found this useful.

5 thoughts on “YSlow tutorial Speed Up your website

  1. Sampath Karupakula

    Thanks for tutorail…….Udinra. Nice tutorial… keep posting some more useful tutorials.

  2. Glad to know you found this useful

  3. Very good tutorial!

  4. It is very simple to understand and useful. Thanks 🙂

Leave a Comment