Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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 upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up