Preview
Video Player
00:00
00:00
Setting a Performance Budget
3:05A performance budget is a quantifiable target for how fast a website loads. This can be in the form of a goal for total HTTP requests, page weight, total response time, or any combination of these.
There are many factors that contribute to
the performance of a website.
0:00
When a person uses a web browser on a
device like a phone,
0:05
a tablet, or a PC and they type in a web
address or click a link.
0:09
That creates a hypertext transfer protocol
request, or HTTP request.
0:14
It's called a request because it's asking
a web server for a piece of information.
0:20
At first, that request might be for an
HTML page, but
0:26
then that HTML page generates subsequent
HTTP requests
0:31
when it in turn asks for CSS, Java script,
images, and more.
0:36
It's important to consider the size of
each one of these assets.
0:42
Large images, tons of Javascript and
0:46
lots of CSS can make a page take a long
time to load.
0:48
In fact, not only must we consider the
size of these assets, but
0:51
we also need to consider how many of them
there are.
0:55
Because each HTTP request it's self has a
performance cost,
0:59
even under conditions when there is no
data being sent, like in a 404 Error.
1:04
For these reasons
1:08
it's important to create what's called a
performance budget early in the process.
1:10
This can be a document that is agreed upon
by you and your team but in most cases.
1:15
[SOUND] It's as simple as a target load
time for
1:20
the page or the number of HTTP requests.
1:23
Oftentimes, the easiest thing to measure
is page weight,
1:27
which is the total file size of all of
your site's assets.
1:30
You and your team should decide on some
target numbers and
1:35
how you're going to achieve them.
1:38
Any time a new plugin is brought in or an
icon set or new images and so on,
1:40
it needs to be checked against the
performance budget.
1:45
Let's take a look at a hypothetical
example to help illustrate.
1:48
In most websites, there are many different
stakeholders.
1:52
In a business, there might be multiple
departments, executives, individuals, and
1:55
customers that all have different needs.
2:00
A similar situation exists even if you're
an individual making websites for clients.
2:03
When the marketing department wants some
photos added and
2:09
the frontend engineer wants to use a few
jQuery plugins to design an interaction.
2:12
And then a designer wants to use lots of
fonts and
2:16
icon sets, where does that leave
performance?
2:19
By setting and agreeing upon a performance
budget,
2:23
you will be better equipped to navigate
some challenging decisions about what to
2:26
include, what not to include, and where to
compromise.
2:30
Thinking about this example again, cutting
down on the size and
2:34
number of photos can help.
2:38
And maybe the frontend engineer can find a
way to use less JavaScript to accomplish
2:40
the same thing, or create a completely new
interaction.
2:44
And finally, maybe the designer can
instead pick fewer fonts and
2:48
carefully pack SVG icons together in one
HTTP request.
2:53
Frontend performance can sometimes be
challenging,
2:59
but sticking to a budget can help you make
these decisions.
3:01