Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

HTTP Requests

4:36 with Nick Pettit

It's important to pay attention to the total number of HTTP requests on a web page. Even when no data is sent, as is the case with a 404 error, an HTTP request will still take up time. Each HTTP request is generally fast, but if there lots of assets (even small ones like icons), it can add up.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Concepts

Reduce HTTP Requests - Every asset will generate an HTTP request even when no data is sent (as is the case in a 404 error). The browser is also limited in the number of parallel connections that can be open at one time. For this reason, reducing HTTP requests is paramount to improving performance.

Vocabulary

404 Error - This is an HTTP response indicating that the server could not find the requested asset.

Related Discussions

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

Sign up

Related Discussions

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

Sign up

[SOUND] We're going to start out with the easiest and 0:00

largest performance improvements first and then we'll work our way up towards 0:04

some concepts that take a bit more to learn, but can still help a lot. 0:10

The first thing to do is to look for any 404 errors. 0:16

These are places where there is an asset being requested and for 0:19

some reason, it's not available on the server. 0:23

You might find 404 errors, because you moved a file around or 0:25

deleted a file and now the path is incorrect in the HTML. 0:29

Or maybe there's a typo in the path and 0:33

it's leading the browser to the wrong place. 0:35

The reason we should get rid of 404 errors is because even though they're not sending 0:37

any data, they're still generating HTTP requests and that will slow things down. 0:42

Sometimes during the development of a project, 0:47

you might start down a development path and then change direction. 0:50

For example, perhaps you started to use one jQuery plugin and then you ended up 0:54

going with a different one, but you forgot to remove the original. 0:59

Or perhaps, you're including assets on some pages that don't really need them. 1:03

Cleaning up unused assets will help a lot. 1:08

So, if we look at our workspace here and then open up a preview and 1:11

then bring up the Chrome dev tools and refresh the page on the Network tab, 1:16

you'll see that we have a 404 error here. 1:22

And of course, I've put this in intentionally, but 1:26

this a bad jQuery plugin that is no longer available. 1:29

Maybe we deleted it, but we forgot to remove it from the HTML. 1:33

And if we look at the timeline view over here, you can see that this still 1:37

takes about 40 milliseconds here and then there's nothing downloaded. 1:42

So even when there's nothing being downloaded, it still takes up time. 1:47

So we should get rid of that. 1:52

So, if I go back to my work space here and then I just remove this bad plugin. 1:54

[SOUND] And then we go back and refresh the page here, 2:01

you'll see that, that has now been removed. 2:06

So lets go to a few other pages here. 2:11

So on the about page and the contact page, we need to do the same thing, 2:14

so let's just open those up and let's remove that bad plugin. 2:20

[SOUND] And then in addition to that bad plugin, 2:25

we should also remove anything that we're not using on other pages. 2:30

So on the index page, we have this jQuery plugin to have the gallery photos come up, 2:36

but we don't actually need any of the JavaScript or 2:44

the CSS that's associated with that plugin on our other pages. 2:48

So let's go to contact.html and we can just remove all that stuff and 2:53

then same thing on the about page, we can remove all that stuff there. 2:59

And if we do need a jQuery plugin there later, we can always add it back. 3:05

But for now, we only need it on our index.html page. 3:09

One other thing we can do to reduce HTTP request is 3:15

to create what's sometimes called a sprite map. 3:18

This is where we take small images, like icons and we put them together 3:22

into one big image and then we split it back apart using HTML and CSS. 3:27

We're going to do this later, but I wanted to point it out now, 3:32

because it does relate to reducing HTTP requests. 3:36

However, we can't combine our images until we've optimized them, 3:39

which is what we'll do next. 3:43

But before we move on, let's check the Network tab again and 3:45

see if we made any impact. 3:50

So, I'm going to make sure that this is all saved and 3:52

then we'll come back here and go to our index page and 3:58

we've removed one request. 4:04

We still have the same number of kilobytes being transferred and 4:08

it still takes about the same amount of time to load. 4:11

So no big improvements there, but we did remove one HTTP request. 4:14

So that's good. 4:20

Because this is a very simple website, 4:22

the changes probably won't be all that significant, but every little bit helps. 4:24

When changes like this are multiplied over much larger and 4:29

more complicated sites, the improvements can be dramatic. 4:32

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

Sign up

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

Sign up