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 9 - Reduce DNS Lookups
- 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 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.
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.
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.
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.
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.