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.
READ  Load Social media buttons without slow load time in easy step

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 Number Performance Rules YSlow (V2) Classic (V1) Small Blog/Site
1 Minimize HTTP Requests Yes Yes Yes
2 Use a Content Delivery Network Yes Yes No
3 Avoid empty src or href Yes No Yes
4 Add an Expires or a Cache-Control Header Yes Yes No
5 Gzip Components Yes Yes Yes
6 Put StyleSheets at the Top Yes Yes Yes
7 Put Scripts at the Bottom Yes Yes Yes
8 Avoid CSS Expressions Yes Yes Yes
9 Make JavaScript and CSS External Yes Yes No
10 Reduce DNS Lookups Yes Yes Yes
11 Minify JavaScript and CSS Yes Yes Yes
12 Avoid Redirects Yes Yes Yes
13 Remove Duplicate Scripts Yes Yes Yes
14 Configure ETags Yes Yes No
15 Make AJAX Cacheable Yes No No
16 Use GET for AJAX Requests Yes No No
17 Reduce the Number of DOM Elements Yes No Yes
18 No 404s Yes No Yes
19 Reduce Cookie Size Yes No No
20 Use Cookie-Free Domains for Components Yes No No
21 Avoid Filters Yes No Yes
22 Do Not Scale Images in HTML Yes No Yes
23 Make favicon.ico Small and Cacheable Yes No Yes

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.

READ  Google custom search result display on your webpage tutorial

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.

READ  How facebook forces you to enter your mobile number?

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.

6 comments YSlow tutorial Speed Up your website

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

Leave a Reply

Your email address will not be published. Required fields are marked *