HTTP Requests

[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