- [Instructor] The number one metric
that determines the performance of your site
or app is its weight.
How many total bytes of data need to travel
from the internet to the browser
for things to load and work properly.
Reduce the page weight, improve performance.
A performance budget is a tool you can use to define limits
for each metric that may impact performance of the site.
A performance budget may include limits
on the total page weight, total image weight,
number of HTTP requests,
maximum number of fonts or images
or external assets, et cetera.
The purpose of a performance budget is
to give everyone who works on a project
a defined goal to work towards.
Stay within the budget and everything is fine.
Go over the budget and decisions need to be made.
Performance budgets turn real-life user experience
into a usable metric even before a single user
has touched the site you're building.
It gives you a metric to measure every new feature against
and a tool to use when hard decisions need to be made.
It's called a performance budget
because it works the same way any the other budget works.
Let's say you set the initial load maximum weight
of a site to 250 kilobytes.
That means the user should have something
to see and interact with
in the first 250 kilobytes that are loaded.
If you add an image and the load goes over 250 kilobytes,
you either have to optimize this image further
to bring the total down or remove some other feature
like a web font or remove the image altogether.
The one thing you can't do
because you have a performance budget
is go over that budget.
Performance budgets are quickly becoming
the industry standard for
during development for performance
and for this reason, we now have tools that we can integrate
into our build processes.
They include things like Webpack's performance options,
which you can get directly inside Webpack
and Lighthouse's light wallet,
which gives you the ability to test your builds
against the performance budget at any time to get flags
anytime your images are too big
or your JavaScript is too big
or your CSS is too big or anything else.