Web Performance Budget: Do Not Let Your Site Get Overweight
I recently went on my own personal weight loss journey.
Eventually, with hard work and determination, I was able to reach my goal. I lost 21 pounds (18kg) in just under a year.
I knew from experience that losing the weight was the easy part.
It was keeping it off that was hard.
The daily battle of keeping the weight off!
So far, I am winning this battle. I have managed to keep the weight off.
I have done this by setting two daily goals:
- Make sure my weight does not go above 196 pounds (89kg)
- Measure my weight every day
Setting this upper weight limit allows me to stay focused. If I get too close to this weight, I know that I need to try harder over the next few days.
So why am I telling you about my weight?
Websites are Overweight
According to the latest statistics from HTTP Archive in the last 3 years we have seen an increase of 45% in the overall size of mobile sites. With a 32% increase on desktop.
This size increase has happened at a time when most people use their mobile to browse the internet.
Mobile networks are slow.
Although the release of fast 5g networks will help. Most of your users are still using slow 3g networks.
Your website needs to be fast on these slow networks.
The web must go on a diet.
So how does the web go on a diet?
We need to employ the same 2 actions I do to keep my weight down.
- Set a size limit (budget) for your website
- Measure the size of the website every day
This will ensure that your site stays light and healthy.
In this post, I will show you exactly how you can set a budget for your website.
Then I will show you in technical detail how you can keep measuring the weight of your website every day.
Setting A Budget
In the last post, Website Performance Metrics I gave you the three stages of a website load.
- Page is loading
- Page has loaded
- Page is responsive
The last stage “Page is Responsive” is the stage we can measure the page weight.
We are only interested in this last stage as this is when the user starts interacting.
Once the “Page is Responsive” stage is complete the browser has downloaded all of the files it needs to show the page to the user.
To measure the time it takes to get to the “Page is Responsive” stage, we use the metric Time to Interactive (TTI).
The page weight directly affects the TTI. To keep the site loading speed fast, we need to reduce the number of files that are being loaded and the size of these files.
TTI is measured in seconds and we can use the Google Lighthouse tool to get this metric.
What is a good TTI time?
We have discussed in Webpage Performance Factors about performance and bounce rate.
A site that takes longer than 3 seconds to load on mobile will lose traffic by up to 44%.
If we need to hit a TTI of 3 seconds, how big does the page weigh?
Luckily, I have a tool for you that will take away the guesswork.
The tool is called the Performance Budget Calculator.
It uses data obtained from real-world devices and websites so that we can get an accurate idea of how quickly a page will load.
The data that powers this calculator also comes from the HTTP Archive.
You can adjust the sliders to get an idea of how changing the size of each section affects TTI.
The sliders each represent a different set of files used by a website:
- HTML - The main file that is downloaded often containing any text content
- CSS - The style of the page
- Font - Any custom font your page uses
- Images - The total images on the page
- Javascript - Any code that runs on the page
As you adjust a slider and increase the size the page “weight” goes up and so does the TTI.
For example, if you do not use a custom font on your website then you can turn the slider down to 0kb. Meaning that there is no font downloaded and therefore, no weight.
The default settings are a good start for now. Let's download the budget.json file and use this to start an audit.
To download, click the download budget.json button and save the file.
Unfortunately, there is no way to use this budget.json file in the Chrome Lighthouse Audit.
Hopefully, this will be added in the future however, for now, there are two ways we can use it.
Setting a Budget with Lighthouse CLI
The first is the lighthouse command-line tool. It can be installed on a computer using Node and allows an audit to be run against any website.
npm install -g lighthouse
Now that we have lighthouse installed on our computer we can run an audit using the budget file we just downloaded.
To run a report against PageDart, and using the budget file we can use this command:
lighthouse https://pagedart.com/ --budget-path=budget.json --view --only-categories=performance --chrome-flags="--headless"
Once it is complete you will be presented with a report file like this:
The “Budgets” section of the report shows the breakdown of each file type and whether these files are over budget.
The names are slightly different from the calculator. Here is how they match:
- HTML - Document
- CSS - Stylesheet
- Font - Font
- Images - Image
- Javascript - Script
Although, there is no reason why you could not run this manually every day. There is a way to check the site automatically when changes are made.
Setting a Budget with Lighthouse Bot
For developers working on a website, it can be very useful to have the lighthouse scores as they work.
To do this we can use the Lighthouse Bot from Google that can connect to any Github code changes.
There is a great article on how to set this up over on web.dev.
This is the best way to continuously check the weight of your site.
Web Performance Budget, Final Thoughts
Just like I do with my body weight. Keeping weight off is all about measuring regularly and setting thresholds.
Setting a web performance budget can help keep a team informed of the page size. Allowing them to actively fix issues and be responsible for it.
What you measure is what you get.
To keep to a budget all you need to do is complete these two actions:
- Set a performance budget using the calculator provided
- Measure the size of your website every day with Lighthouse
Doing this will ensure that you keep your web site in fighting fit condition.
Which way to the gym?