September 28, 2022
When it comes to site speed, many companies struggle to see the bigger picture. Instead of creating a personalised plan that intelligently reduces page speeds across their site, they focus on an individual, one-size-fits-all tactics that promise quick results. For instance, lazy loading is a tactic that speeds up page load times and is generally considered a best practice. However, if it’s indiscriminately applied to everything, including your Largest Contentful Paint element, it actually negatively impacts one of your most crucial page speed metrics.
To get real results, your team needs to take a step back and start to think holistically and company-wide about site speed. The best way to do that is with performance budgets. Performance budgets are measurable limits or goals you place on your pages in key page speed metrics. With the budget in place, you see which pages hit or miss their goals and how much. You then use that information to consider and prioritise appropriate tactics to get each page to hit your goal.
Setting personalised performance budgets lets your team speak clearly about what tactics are best suited for improving your page speed while also giving you targets to aim for. Performance budgets may not improve performance, but they help you get the most out of each page speed tactic in the constant struggle for better site performance.
The greatest value of performance budgets is that they turn a nebulous aim like “improve page speed” into a concrete and achievable goal.
Improving page speed can be a company-wide goal, but until you set specific performance budgets, it’s not clear what specific metric you want to improve, how you’ll do it, and who’s in charge of getting it there.
Once you set that goal, you’re far more likely to hit it because the whole team can see how their actions move the needle. Saying the page doesn’t load fast enough doesn’t help; saying we need to hit a Time to First Byte of fewer than 300 milliseconds provides a target and spurs action. For instance, once that goal is set, you now can:
The last point is especially crucial because improved page speed is often a trade-off. On many web pages, Google Analytics third-party scripts often slow down page speeds, but they also offer a lot of functionality to the marketing team. With a performance budget set, teams can better discuss how much these third-party scripts slow down page speed metrics and find solutions or alternatives that are a better fit for everyone.
Performance budgets are also helpful for maintaining site speed gains already won. If you’re managing a domain with hundreds of pages, you can’t be expected to manually monitor each one to ensure it continues hitting your budget. Instead, a performance budget monitoring tool like Calibre can do that for you, so if a page slips, you’ll know about it sooner rather than later.
The best metrics to track with performance budgets are easily measurable and impact not just speed but also user experience. Some great metrics to start with include:
Many teams also decide to track their Lighthouse Performance Score with performance budgets. This score combines several metrics (including some listed above) on a scale of 1–100. The Performance Score isn’t great for tracking page speed because it doesn’t give direct feedback and can be inaccurate.
Setting your first performance budget is an intimidating prospect. Follow these four steps, and you’re ready to transform how you approach website performance.
Ideally, you’ll want to set multiple performance budgets that track all of the metrics recommended above. However, some smaller teams may struggle to track and optimise across seven metrics. In this case, start with the Core Web Vitals (LCP, CLS, and TBT) because they improve the user experience, boost web performance, and are a direct ranking factor for Google.
Once you’ve chosen a metric, you’ll also want to consider which pages this budget will apply to. Ideally, your budget should apply to your entire website. However, if you are a small team, start by tracking your most important pages, like your homepage, landing pages, and most visited pages.
The baseline you pick is either defensive or aspirational. A defensive baseline aims to keep pages above the bare minimum that your website has already achieved. Your goal here isn’t to make significant gains; it’s to stop yourself from unknowingly backsliding. Determine a defensive baseline by measuring several of your pages and picking an achievable average.
The second kind of baseline is aspirational and encourages you to progress toward a much faster website. In this case, most of your pages should not initially reach your performance budget, but more and more should get there over time. Pick an aspirational budget by researching your and your competitors’ current speeds and aiming a little higher. If, after a year, you find your goal hasn’t been reached, and that progress has slowed, consider revising downward to something more realistic.
Another way to set the baselines for your performance budgets is with a tool like Calibre. Calibre automatically suggests an appropriate budget metric based on your pages’ past performance. This way, you always set realistic goals based on actual site performance without needing detailed research.
With this data at your fingertips, it’s easy to choose effective baselines that make sense for your website.
Website performance changes a lot based on the device and internet speed of the person trying to access your site. Your performance budgets should consider these variances as best as possible with tests that occur under many conditions.
Tracking multiple conditions like this isn’t easy without a dedicated tool like Calibre. With Calibre, you can set up multiple Test Profiles, so you can have one test that simulates a Motorola Moto G4 on a 3G connection and another on a Chrome Desktop with a cable connection.
With multiple Test Profiles, you can easily simulate how your target markets reach your website, no matter who they are or how they’re likely to do that.
The last and most crucial step is to confirm how often you’ll run the tests and what you’ll do with the data you get back. You should run tests at least daily to see how specific optimisations impact your performance metrics. More consistent testing makes it more likely you’ll spot performance issues earlier.
With a schedule set, you need to decide how you’ll act on your results. One of the best ways to make sure you get the most out of your budgets is to set up a Speed Team in charge of improving website performance. This team should meet regularly to review the most recent results, plan new optimisations, and gradually work toward a faster site experience.
It requires a lot of time, concerted effort, and data to make your site as quick and responsive as possible. Anything you can do to take some of the work off your team and automate it is money and effort well spent. Calibre offers a full-fledged performance budget feature that makes it easy to create and monitor budgets for improved site speed.
With our 15-day free trial, you can start setting up your performance budget and see how easy it is to stay on top of your performance budgets. Plus, with other features like automated tests, budget alert notifications, and in-depth metrics, you’ll be able to set up your team for site speed victory.
Join thousands of subscribers keeping up-to-date with web performance news and advice.
Engineering Manager at Google Chrome