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

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

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

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

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

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

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

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

Or maybe there's a typo in the path and

it's leading the browser to the wrong place.

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

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

Sometimes during the development of a project,

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

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

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

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

Cleaning up unused assets will help a lot.

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

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

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

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

this a bad jQuery plugin that is no longer available.

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

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

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

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

So we should get rid of that.

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

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

you'll see that, that has now been removed.

So lets go to a few other pages here.

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

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

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

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

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

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

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

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

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

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

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

One other thing we can do to reduce HTTP request is

to create what's sometimes called a sprite map.

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

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

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

because it does relate to reducing HTTP requests.

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

which is what we'll do next.

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

see if we made any impact.

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

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

we've removed one request.

We still have the same number of kilobytes being transferred and

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

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

So that's good.

Because this is a very simple website,

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

When changes like this are multiplied over much larger and

more complicated sites, the improvements can be dramatic.