Daily Brush for Website Speed: Embrace the Performance Budget Ritual

Rate this content
Bookmark

In this talk I will use the dental metaphor in order to introduce the performance budgets just like brushing teeth everyday to keep them clean and healthy you should do the same for your website by setting a performance budget and check it in every pull request in your pipelines, the target audience is mid-level to advanced, I will start by the example of the tooth decay and cleaning them then brushing them everyday as the dentist advice, then explain decay as the performance issue and performance budgeting is like the toothpaste and go from here with the different techniques that developers can do in order to prevent any loss in the performance wins they made.

13 min
12 Dec, 2023

AI Generated Video Summary

This Talk provides an introduction to web performance and emphasizes the importance of setting performance goals and budgets. It explains the steps for creating and applying a performance budget and suggests various tools for performance budgeting. The Talk also highlights the need to make the performance budget concrete and meaningful, connect it to business goals, and integrate it into the development pipeline. It concludes by emphasizing the importance of maintaining performance and connecting with the speaker for more information.

1. Introduction to Web Performance

Short description:

Hi, everyone. My name is Ned Haddawood, a senior software engineer working for Miro and a Google expert in web performance. Today, I'm going to take you on a journey to impress web performance budget rituals. Imagine the website as a human body, with performance being the teeth. The more you feed your website with new features, the more you need to care about performance. Just like bad teeth, performance problems may not be immediately noticeable, but they can greatly impact your experience. So let's get started.

Hi, everyone. My name is Ned Haddawood. I'm a senior software engineer working for Miro and a Google expert in web performance. Today, I'm going to get you on a journey to impress web performance budget rituals. But before that, let's imagine together if the website is like the human body. Human body is growing up by eating food. The more you're eating food, the more you need to brush your teeth, the more you need to floss your teeth on a daily basis, right?

If you imagine the website is like a human body, I imagine performance as your teeth. So the more you are feeding your website with new features, the more you need to care about performance. The similarity between both of them, if you have a problem in teeth, you're visiting a dentist to fix it for you. If you have a problem in performance, you might visit or hire a performance expert to fix it for you. Both of them cannot be fixed because with a smaller check-in inspection, you will find out that you were not caring too much about them.

Some people might argue and say, Well, we are not doing that and turns out just fine. Just like these two gentlemen. But here are two facts. First of all, bad teeth are working too. You can eat on bad teeth, but believe me, you're not going to enjoy food. The other fact is that you don't know for how long you're not going to suffer from a problem from your teeth or your performance. It might take a long time until you find out a lot of problems jumping in. So the sooner you are acting, the better. So let's jump on.

2. Measuring Performance and Setting Goals

Short description:

If you have a problem, the first thing to do is to measure it to understand its magnitude. There are two types of performance measurement: synthetic testing and real user measuring. Synthetic testing is consistent and free, but not super accurate. Real user measuring provides accurate data but may not always be free. By using both methods, we can measure various metrics and set performance goals based on research thresholds and recommendations. It's important to differentiate between performance goals and performance budgets. If you encounter performance issues, it's crucial to address them and demonstrate their impact on the online business. Suggesting a performance sprint and focusing on enhancing performance can yield positive results.

If you have a problem. The first thing to do is to measure this problem to just see how big or small this problem so you can act on.

So measuring performance, we have two types of measuring performance. The first one is synthetic testing, also known as lab testing using something like Lighthouse. It has some benefits and has some bad things. The good thing is that it's very consistent and it's free and it's handy. Just easy to do, but it's not super accurate. This is a problem. Why is this not super accurate? Because it depends pretty much on the machine that we are running on.

The other type is RAM testing, real user measuring, or also known as fill testing. This is more interesting for us today. And this is coming with real user, plug in, opt in, and we're getting bunch of information about them that will help us take more and better decisions. It's like geolocation, browser and time, Internet connection, and so on. It's very accurate and we can rely on it, but it's not always free. One free option could be the Chrome User Experience Report. But other paid options, like Calibre, Speedcurve, and so on, are totally worth it as well. As you can see in a bit.

So, using both of them you can measure a lot of metrics that are very useful for us to measure performance and to decide whether our website is performant enough or not. They came as well with some research thresholds and recommendations. For example, in front of us, three recommendations based on the core web vitals. For the LCP for example, we need to make it under 4 seconds at least to make it work fine. And 2.5 seconds is a recommendation for a good experience for the user. This is very useful to set your performance goal. And there is difference between performance goal and performance budget as we will see in a bit.

So, you have a problem, you went to the manager and say, Hey, we have a serious problem in our performance. We have performance issues. Just said, alright, we can postpone it after the next quarter future, right? He showed the number. This is not affecting the business, right? But it is, of course, affecting your business, online business. And you suggest to make a performance sprint for the whole team focusing on performance to enhance it. You did a good job, you and your team, and you turned everything to be green.

3. The Importance of a Performance Budget

Short description:

Your manager was happy about the good performance and decided to add more features. However, after a few sprints, the performance scores were affected, negatively impacting the business. The team discussed solutions, including a performance sprint and ignoring users' needs. Ultimately, they realized the importance of a performance budget to prevent regressions and maintain a good user experience and business goals.

Your manager was really happy. Have you seen this guy happy before? This is your manager. And he said, well, let's compensate this time that we spent without adding new features or adding list features. Let's add more features now, since we have a good performance.

After a few sprints with new features with less to no maintenance, our scores have been affected. So the performance is now amber. It's not red, but it's amber. It's not green as before. Manager, look and say, right, it will be just fine, just like the guy in the beginning of this presentation. And keep adding some new features with no maintenance to performance. And this time, we are affected. We're badly affected in business.

And he found out that there is a problem. He's sitting and meeting with the team, asking, what can we do for this regression in performance with adding new features? And say, all right, let's make a performance sprint. He said, well, we tried before. We're reaching our goals, but it doesn't help in regression, as you can see. Another guy said, well, let's ignore users. We're building new features. We'll like it. And he said, no, we need to care about users. Those are the people who are paying for us. Third one said, very wise advice. He said, no new features without a performance budget. Most probably, the manager didn't listen to the last part, but he was pissed off already with no new features without a performance budget. But it was very wise, very important advice. Here is what is performance budget that will be a very useful solution for what we have. Performance budget is simply a way for limiting chances for ruining performance. Same what we have of your application by providing some rules and keep checking daily. Its main goal is to prevent regressions in both UX and business goals. This is the perfect solution for this situation right? So let's start with the rituals.

4. Creating and Applying a Performance Budget

Short description:

We have some steps for creating and applying a performance budget. First, measure the performance and set goals for the metrics you care about. Plan and fix issues until you are satisfied. Set the reached goal as the performance budget and keep iterating. If you're starting a new project, use an online calculator to set the budget. Apply the budget using tools like Bundlesize.

We have some steps for rituals. First of all is to create a budget, is to apply the budget. Make it stick. And dealing with new features. This evil that is affecting our performance goals.

So first of all, how to create a budget. There are steps if you have already some performance issues in your website as we start thinking about a budget. First of all, measure performance using the tools I talked about in the beginning. And set goals for each of the metrics that you care about. Next, plan and fix most of the issues until you are fairly satisfied about the result. It doesn't have to be perfect. Afterwards, you can set this goal that you reached as a performance budget. And keep iterating. Every time you are making a new progress and you feel that this budget can be enhanced, you can enhance it. Measure, fix and enhance budget.

If you are adding a new project or in an early stage of the project, it's highly recommended to start with a budget. You can use this beautiful calculator online. Give it only the target load time and target user connection. Just like 4G or 3G or whatever. And gives you recommendations about assets that you have. The budget comes in a form of JSON file, just similar to this one. This comes with specifying the target path, specifying the budget type, size or counts. And specifying the resource type, script, third party and so on. If you are measuring sizes, it comes with number. This number is in kilobytes. If you are measuring counts, it comes with just a number of this resource. So we have a budget.

How to apply it? There's tons of tools out there. Some of them are free and some of them are paid. I started with a free tool called Bundlesize.

5. Tools for Performance Budgeting

Short description:

You can use a bundle, budget.json file or package.json to add rules for checking if you are on budget or not. Webpack and Lighthouse CI are free tools that provide similar hints and budget support. SpeedCurve and Caliper are paid tools that offer beautiful dashboards and detailed metrics. Check online to find the tool that best suits your business needs.

This you can just use a bundle, budget.json file or package.json to add these rules. Based on that it can be integrated into your GitHub Actions or something and check every time your building telling you that you are on budget or not.

Another free tool, in Webpack, if you are having Webpack already in your current project, you can just configure it for performance and it gives you similar hints for bundle size and tells you as you are building are you exceeding the budget or not with this beautiful error message.

Another free tool, if you are using Lighthouse CI or not, just try it out. It comes supporting now as well budgets with something like a light wallet. What's so cool about that is you use a separate file, a budget.json file and you can run it against any URL added to your CI and you can run it against the website of your competitors as well and see how they are behaving with the same budget that you are setting for yourself.

One big tool called SpeedCurve. It comes with this beautiful dashboard telling you what is on budget, what's under the budget, and what's exceeding the budget. This is very useful and very handy but unfortunately it's a paid tool but it's totally worth it with this beautiful way and with all the warnings and all the notifications. It comes with trail version as well. What's so cool, it comes with this trend for each of these metrics. It tells you when you added something that is exceeding your budget and so on. This is very useful and very handy. Another paid tool called Caliper. You can use it more. It is doing the same thing like SpeedCurve and it comes with this web hoax and gives you also all information that you need about the user. What's profile, what's the device used, and what's the Internet connection for this moment. And much more, you can just check online just to name some. But you can check online and find out which one that fits your business best.

6. Making the Performance Budget Stick

Short description:

To make your performance budget stick, you need to make it concrete and meaningful. Connect it to business goals and integrate it into your development pipeline. It should be visible to stakeholders and enforceable. Base it on data and optimize existing features to make room for new ones.

Now it's time to talk briefly about how to make it stick. Not to let developers work around it. First of all, you need to make it your budget concrete. You can say we needed the fastest possible. You can say I want LCP to be under three seconds and mobile or 4G connection. That's very specific, very concrete. Or say performance score to be over 95% for desktop.

You need to make it meaningful. So you wouldn't say I would like to just make performance because it's a trend or something. No. You have to connect it to business goals, business needs. That is serving for some business metrics like balance rate or conversion rate and so on.

You need to make it integrated. So you can't just run it every time manually or in a specific script locally. You need to integrate it in a ucicd pipeline. So it runs automatically and gives you reports. It needs to be visible for stakeholders and developers so to act accordingly. Stakeholders might need some breaks for their speed and telling them that some features might affect the performance. It's very important to set up this culture in the team.

You need to make it enforceable as well. So every time we exceed it we modify it. That's a bad culture. The good culture is that this is a hard line. Everyone will rally about it and this is something to change it. It has to be based on data. We have to have some specific data about the user that has been changed and based on that we are changing what we have. We have new feature so what do we do? First of all, optimize existing feature. Most of the features that are causing problem in performance are features that have been added in early stage or in MVP. Just go ahead and optimize it to leave some room for new features. Remove existing feature.

7. Maintaining Performance and Connecting

Short description:

To maintain performance, remove invalid features or at least remove them from the critical path. Rethink the addition of new features, considering visibility to stakeholders and developers. Test new features on EBTesting to measure their impact and protect performance wins. Remember that performance is a daily journey, just like dental hygiene. Connect with me on Twitter and visit my blog metahut.dev for more content.

If you remove it, if it's not valid anymore or at least remove it from the critical path. Don't add new features. Yes, some features might be very annoying for performance or at least don't add them to the critical path. Just rethink it every time based on this visibility in front of stakeholders and developers that will be easier.

Finally, just run any new feature that might affect performance on EBTesting and find out the measurement and metrics how they are behaving with the new feature. With that, so the rituals should be done and you should feel the force around you. You are protected and any performance win that you are making will be protected against being broken.

Just remember that performance is an ongoing journey just like dental hygiene, it has to be daily. And promise to brush with performance alongside with your teeth on daily basis because both of them will keep a bright smile on your face just like this one. Thank you very much for watching and if you like this presentation you will be shared later on my Twitter, on this handle and for more information and more content like this one you will find on my blog metahut.dev Let's connect.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
JSNation 2023JSNation 2023
26 min
When Optimizations Backfire
Ever loaded a font from the Google Fonts CDN? Or added the loading=lazy attribute onto an image? These optimizations are recommended all over the web – but, sometimes, they make your app not faster but slower.
In this talk, Ivan will show when some common performance optimizations backfire – and what we need to do to avoid that.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.