Well done!

You have completed Introduction to Front End Performance Optimization!

Preview

Setting a Performance Budget

A 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.

Vocabulary

Performance Budget - A quantifiable target for how fast a website loads.
Page Weight - The total file size of a page and all of its assets.
HTTP request - HyperText Transfer Protocol request or HTTP request for short is when a client computer asks a web server for a piece of data, such as an HTML file or an image.

Resources

HTTP Documentation on MDN

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

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

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace