Getting started with YSlow
Posted in: Getting Started   -   August 31, 2012

YSlow is a tool that analyses your page and tells you why it’s slow. You can significantly reduce the page loading times and improve the user experience by running the tool and implementing its checklist-style suggestions. It also happens to be free and open source.

Installation

You can install YSlow from source, but it’s easier to just grab one of the various builds. When you visit the homepage at yslow.org you’ll see a lot of installation options:

yslow installation options

The great news is that YSlow exists as a plugin for most browsers. There’s also a simple bookmarklet version which can run in any browser, including mobile browsers. Let’s take the bookmarklet as an example and let’s get started!

Visit http://yslow.org/mobile from any browser and drag the big YSlow button to your bookmarks.

Boom! That was easy enough.

Running YSlow

Now that you have the bookmarklet, just visit the page you want to inspect (say phpied.com) and click the “YSlow” bookmark.

You’ll notice that the YSlow interface (in an iframe) appears at the bottom of the page. All you have to do now is click “Run test”.

Actionable results

After YSlow inspects all the components on the page (HTML, scripts, images, etc), it gives you a list of results. At the top there’s an overall grade of the whole page (marked #1 on the screenshot below). It tells you immediately if you have an opportunity to make this page faster.

The grades have numeric and letter representation. The numeric grade (score) is from 0 to 100 where a score between 90 and 100 (out of 100) is an A and is the best score. 80-90 is a B and so on. The exact point system is not all that interesting. If you get anything other that A, you have work to do.

#2 in the screenshot shows you individual checks that YSlow performed and the grade for each one (mouseover the grade letter for a numeric score). Anything that’s not an A is an opportunity!

#3 is a list of “offenders”: components that failed the specific check.

#4 is a link to more information about each check.

In the example above, the page fails the check that says that all static components should be hosted on a CDN (Content Delivery Network). There are a total of 6 components hosted on two non-CDN domains.

Where do these checks come from?

These checks come from a list of best practices that have come out from research conducted and replicated at Yahoo! or other members of the performance community. They are also known as YSlow “rules”.

You may be running a smaller site that doesn’t have a budget for a CDN for example. In this case, the Ruleset menu is for you. There you’ll find the option “Small Site or Blog” which has fewer rules and is less strict.

Furthermore, YSlow is designed to be extensible and you can easily configure existing rules/checks, rulesets, grades, and add new ones that better suit your performance needs. (Check here for a primer)

Make your users happy!

Now you know the basics of YSlow, a tool that helps you find and fix performance bottlenecks. Web development is complicated enough and we often forget our best practices. Luckily YSlow is here to help us remember and “lint” our pages before they hit production.

You can also automate YSlow using the command-line PhantomJS build and run it as part of your Quality Assurance or build process and this way prevent performance regressions automatically.

Research shows over and over again that slow applications make people miserable and fast, responsive interfaces make people feel capable, in control and, yes, happy. So it’s up to you to make your users happy! They’ll thank you.

And let the source be always with you!


Stoyan Stefanov (phpied.com, @stoyanstefanov) is a Facebook engineer. Previously at Yahoo! he was the creator of the smush.it online image optimization tool and architect of YSlow 2.0. Book author (JavaScript Patterns, Object-Oriented JavaScript), contributor (Even Faster Web Sites, High-Performance JavaScript) and editor (Web Performance Daybook, vol.2). Speaker (Velocity, JSConf, Fronteers) and a guitar virtuoso wannabe.

Tags: ,