Thread by @michaelketzer

⚡ Every Web Developer should know performance budgets

A performance budget is a set of constraints that apply to metrics that affect a website's performance. Having budgets helps to ensure your website performs well.

👇 Learn about web performance and performance budgets

▶️ Why is performance important?

Performance is an important part of the user experience, and it can directly impact your business.

User experience has also become a factor in Google page ranking.

Setting a performance budget defines the boundaries for your website.

▶️ What are performance budgets metrics?

Performance budgets can be categorized into:

🔹 Quantity metrics
🔹 Timing metrics
🔹 Rule-based metrics

👇 Let's have a look at what each of them means

🔹 Quantity metrics

Quantity metrics are most useful when starting a project. You can define specific limits you do not want to exceed.

Those metrics are beneficial for developers and designers, as some may set boundaries for design decisions.

👇

Typical metrics would be:

🔸 Number of requests
🔸 Maximum payload size of the request
🔸 Number of images
🔸 Number of web fonts, including weights
🔸 Number of scripts
🔸 Maximum size of scripts
🔸 Number of third party scripts

These are the most common I know and use.

👇

Those metrics are mostly only hints about web performance.

If you cross a specific budget, it might not influence your user experience at all.

It probably depends on how you load your data and if you are using critical path rendering.

🔹 Timing metrics

Timing metrics are usually events that are happening during page load.

You are defining a maximum timeframe in which a specific event should have been fired. They are usually in your browser API or a lighthouse report.

👇

Typical timing metrics are:

🔸 DOM Content Loaded event
🔸 Page load event
🔸 First Contentful Paint (FCP)
🔸 Largest Contentful Paint (LCP)
🔸 Time to Interactive (TTI)
🔸 Total blocking time (TBT)

🔹 Rule-based metrics

Rule-based metrics are usually used for lighthouse reports.
You can define specific budgets for the performance audit as an example.

The performance score is mostly built on other metrics already mentioned in timings, making it easier to use.

▶️ What are good performance budget limits?

To define the correct budgets, you want t research competitive websites, look up their metrics and build a baseline to start with.

In most cases, this takes time, finding and analyzing them.

👇 To start right away

In my opinion, a good default for performance budgets are:

- 3.8 seconds until TTI

- Below 200kb data of critical path rendering

- Below 20 requests

These are the defaults I usually use.

▶️ How can you ensure that you are within your boundaries?

Here are three tools to check your budgets at build time:

- WebPack performance: webpack.js.org/configuration/…
- bundlesize: github.com/siddharthkp/bu…
- lighthouse ci: github.com/GoogleChrome/l…

👇

In case a budget is exceeding the limits, you may want to consider:

- Optimizing your code, maybe you got something unoptimized

- Reconsider a feature, if it is worth compared to your budget

- Reduce a feature until it meets the budget

▶️ Take care of those budgets!

Checking your metrics at the built time is one option. Make sure to track them even more for real users.
Real users may have other conditions which cause those budgets to fail.

Making sure every user can meet your budget is crucial!

✅ That's it. Did this convince you to use performance budgets for your next project?

If you found this thread useful, consider following me @michaelketzer and retweet the first tweet! 🙏

Did I miss something? Please let me know 🙏