BLOG | categories | page speed

What is YSlow: Why you need to move to Google Lighthouse

By Steve Founder of PageDart

Over the last few years, the pace at which performance tools have evolved is staggering.

There are so many factors that can affect how a website loads, that it is impossible to keep up.

We rely on these tools to help us see through the fog.

One of the early tools which would breakdown website performance issues was YSlow.

This tool was part of an open-source project by Yahoo! It would run through a series of rules to make sure that your site was fast.

Website Performance Rules

These rules were first documented in the book High Performance Web Sites by Steve Souders.

In terms of the internet age, this book was written a lifetime ago, way back in 2007.

The book breaks down website performance into 14 rules. For a site to be performant it must pass each of the rules outlined below:

Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable

Only 14 rules to stick to.

Those were the good days!

If only that was all we needed today.

Running through these 14 rules manually was slow so, YSlow was born to automate the process. Checking each of these rules against a website.

The tool would crawl the webpage and all the files (image, scripts, etc.) that get loaded.

The tool would then inspect each file to make sure that it passed the ruleset.

After the audit was completed, the tool would give a grade for each of the rules.

Finally, it would provide an overall grade for the webpage.

As our knowledge of web performance improved, so did YSlow.

It was not long until additional rules were needed and version 2 was released.

This version included 9 new rules that a site also had to pass:

Rule 15 - Avoid empty src or href
Rule 16 - Use GET for AJAX Requests
Rule 17 - Reduce the Number of DOM Elements
Rule 18 - No 404s
Rule 19 - Reduce Cookie Size
Rule 20 - Use Cookie-Free Domains for Components
Rule 21 - Avoid Filters
Rule 22 - Do Not Scale Images in HTML
Rule 23 - Make favicon.ico Small and Cacheable

If only today's web was as simple as 23 rules!!

We should not dismiss these rules, as many of them are still applicable today.

For example, you should reduce the number of Dom Elements on the page. Using GZip on your website files will make them travel faster over the internet.

However, we have a very different version of the web today. The complexity of the webpages we are building is increasing.

The internet has also started the shift to mobile. In 2007 the iPhone was not released. We as consumers have changed how we interact with the internet.

Not only that but YSlow used to have a chrome extension that you could add to perform an audit.

Unfortunately, this is no longer available and development on the project has stalled.

I would not recommend that you use YSlow anymore.

We need a modern alternative.

Instead, you need a tool that has active development and support. It should also be built with both mobile and desktop in mind.

Luckily for us, Google has such a tool, Lighthouse.

Google Lighthouse

Google Lighthouse is an open-source project that has very active development.

There are many ways in which you can perform an audit.

Each option is designed with a different user in mind.

Let’s go through them from the simplest to the most complex.

Chrome Extension

If you did use YSlow Chrome extension then this one will be familiar to you. The Google Lighthouse chrome extension is installed the same way.

The extension provides a handy button at the top of chrome that you can click when you want to run a report.

Once you have it installed go to the page that you want to test.

When ready, hit the lighthouse button.

You may notice that there are several options to choose from when running a report.

The first being the type of Audit that you want to perform.

The performance audit is Lighthouses’ equivalent of the YSlow report. It is also what will focus on here.

However, there are a few other audits that you may want to play with later:

SEO - Looks at on-page SEO and makes suggestions for improvement
Best Practices - Suggests improvements to your site based on a set of Google best practices
Accessibility - Looks at how your site works for screen readers
PWA - Progressive Web App is a way of moving users from the web to more native app experiences

As we are focused on performance, let's run a mobile performance audit.

The report will take a few seconds to generate and the webpage may resize during the process.

Once the audit is complete the report will appear.

Our next option for running an audit does not require you to install any additional software.

As long as you have Chrome installed you are ready to go.

Chrome Dev Tools

If you right-click and choose Inspect this will open up the Chrome Dev Tools.

There are some tabs, one of which is labeled Audit.

To start an Audit you are presented with similar options to the chrome extension above.

Handy for running an Audit when you do not want to install the chrome extension.

What about running an audit on website changes.

Lighthouse Command Line Tool

The last option (and the geekiest) is running Lighthouse via the command line.

This option is useful for developers working on code changes to a website. It allows them to run an audit as soon as a change is made.

To use this you need to first install node on your computer.

Once you have this installed, you can download Lighthouse using NPM:

npm i lighthouse -g

Lastly, it is then possible to run a report using the command:

lighthouse https://pagedart.com/ --view --only-categories=performance

Once the audit is complete you will be shown the performance report.

Lighthouse Report

Once the performance audit is complete you will be presented with a report.

The performance report gives a score from 0-100. With 100 being the best possible score and also very difficult to achieve.

A score of above 90 will get you in the top 5% of websites.

Unlike the YSlow rules, Lighthouse uses metrics to determine the score.

The metrics themselves are not weighted equally. Currently, the weights are:

3X - first contentful paint
1X - first meaningful paint
2X - first CPU idle
5X - time to interactive
4X - speed index

The report gives you some suggestions on how you can improve these metrics.

Final thoughts, What is YSlow

We have covered the history behind YSlow and how it was based on rules.

As the web has evolved, so to have the tools that we need to test websites.

Google Lighthouse is a modern tool with many audit options.

The Lighthouse report uses metrics instead of rules.

Giving you detailed guidance on how you can improve your site's metrics, long with the information you need to rectify the issues.

Hopefully, you can see the value in this tool and you will start to use it to improve the web performance of your site.