1 00:00:00,590 --> 00:00:03,560 JavaScript optimization is actually a very broad and 2 00:00:03,560 --> 00:00:06,390 advanced topic that's beyond the scope of these lessons. 3 00:00:06,390 --> 00:00:09,800 But, for now, we're just going to take a few basic steps in our 4 00:00:09,800 --> 00:00:12,870 HTML that will improve performance right away. 5 00:00:12,870 --> 00:00:17,690 First, we should try to load JavaScript at the bottom of our document. 6 00:00:17,690 --> 00:00:20,920 This is not always possible, and some JavaScript libraries and 7 00:00:20,920 --> 00:00:25,770 frameworks don't allow for it, so be sure to read the documentation. 8 00:00:25,770 --> 00:00:31,520 However, with jQuery and its plugins, which are only designed to enhance a page, 9 00:00:31,520 --> 00:00:34,230 we can most definitely load it at the bottom. 10 00:00:34,230 --> 00:00:39,340 The reason we want to move our scripts to the bottom has both a simple explanation 11 00:00:39,340 --> 00:00:41,750 and a complicated explanation. 12 00:00:41,750 --> 00:00:44,020 Let's talk through the simple one first. 13 00:00:44,020 --> 00:00:48,550 When our page is being loaded and the browser finds a JavaScript file. 14 00:00:48,550 --> 00:00:52,960 It will block any further rendering until the JavaScript has finished 15 00:00:52,960 --> 00:00:55,450 being loaded and parsed. 16 00:00:55,450 --> 00:00:59,380 Loading JavaScript at the bottom won't really change the overall amount of 17 00:00:59,380 --> 00:01:01,710 time that it takes for everything to load. 18 00:01:01,710 --> 00:01:05,590 But it will improve what's called perceived performance. 19 00:01:05,590 --> 00:01:10,750 In other words, if the HTML content and the CSS styling is loaded in. 20 00:01:10,750 --> 00:01:15,760 The user can see that first, and then in the next instant, the JavaScript 21 00:01:15,760 --> 00:01:19,970 is loaded in, usually before the user can tap or click on anything. 22 00:01:19,970 --> 00:01:23,020 So the page won't actually be any smaller, or 23 00:01:23,020 --> 00:01:27,760 finish loading faster, we're just loading things in a different order so 24 00:01:27,760 --> 00:01:31,090 that it looks like it's faster to the end user. 25 00:01:31,090 --> 00:01:34,240 This might sound like it's cheating or like it's a hack, but 26 00:01:34,240 --> 00:01:37,880 perceived performance is actually just as important, and 27 00:01:37,880 --> 00:01:41,530 sometimes more important than actual performance. 28 00:01:41,530 --> 00:01:46,670 If a webpage looks like it's faster, then for all practical purposes it is faster. 29 00:01:48,140 --> 00:01:50,010 Let's take a look at our page and 30 00:01:50,010 --> 00:01:52,740 think more about how we're loading in JavaScript. 31 00:01:54,530 --> 00:01:58,811 So I'm going to open up index.html here. 32 00:01:58,811 --> 00:02:06,082 [SOUND] And this is the only page that we have JavaScript on. 33 00:02:06,082 --> 00:02:08,840 So let's just grab that. 34 00:02:11,310 --> 00:02:16,310 And then down here, right before we close the body element, 35 00:02:17,740 --> 00:02:23,980 I'm going to paste in those script tags. 36 00:02:23,980 --> 00:02:24,850 And that's it. 37 00:02:24,850 --> 00:02:28,050 So if we go over to our page and refresh here. 38 00:02:29,830 --> 00:02:34,150 You can see that there's nothing really different and 39 00:02:34,150 --> 00:02:38,020 if we click on these it will load these images in. 40 00:02:39,880 --> 00:02:43,950 So putting our JavaScript at the bottom keeps the functionality, but 41 00:02:43,950 --> 00:02:46,940 the perceived performance might be a little bit faster. 42 00:02:47,960 --> 00:02:51,720 The more complicated explanation has to do with the fairly new 43 00:02:51,720 --> 00:02:57,350 async attribute introduced in HTML5, which now has fairly decent browser support. 44 00:02:57,350 --> 00:03:02,120 We can sometimes add the async attribute to a JavaScript file if it's completely 45 00:03:02,120 --> 00:03:06,950 independent of any other file on the page, and this will tell the browser 46 00:03:06,950 --> 00:03:11,670 not to block rendering and perform more operations in parallel. 47 00:03:11,670 --> 00:03:12,540 That sounds great, 48 00:03:12,540 --> 00:03:17,350 but if we're already loading JavaScript at the bottom, then there's no need to load 49 00:03:17,350 --> 00:03:22,420 JavaScript asynchronously because we're not really blocking any rendering. 50 00:03:22,420 --> 00:03:27,270 So then, why not keep our scripts at the top and use the async attribute? 51 00:03:27,270 --> 00:03:32,658 Well, when we use async, scripts will be executed immediately after they're loaded. 52 00:03:32,658 --> 00:03:36,380 That's fine if the scripts are completely independent and 53 00:03:36,380 --> 00:03:38,370 don't depend on one another. 54 00:03:38,370 --> 00:03:40,640 But that's not the case for our scripts. 55 00:03:40,640 --> 00:03:45,560 For example, if a jQuery plugin loaded before the jQuery 56 00:03:45,560 --> 00:03:49,940 library itself, there would be errors all over our page. 57 00:03:49,940 --> 00:03:53,510 To read more about how JavaScript loads in the browser, 58 00:03:53,510 --> 00:03:57,530 check out the notes associated with this video for a detailed article. 59 00:03:58,980 --> 00:04:03,460 One more thing we should do is, make sure that we're using hosted libraries, 60 00:04:03,460 --> 00:04:05,030 wherever possible. 61 00:04:05,030 --> 00:04:06,620 When we discuss CSS fonts, 62 00:04:06,620 --> 00:04:11,460 we already named three reasons why we should use hosted services. 63 00:04:11,460 --> 00:04:13,430 For speed and reliability. 64 00:04:13,430 --> 00:04:16,310 For additional parallel HTTP connections. 65 00:04:16,310 --> 00:04:17,120 And finally, 66 00:04:17,120 --> 00:04:21,630 because the user might have already cached the resource from another site. 67 00:04:21,630 --> 00:04:24,590 Just like fonts we can rely on Google to provide us with 68 00:04:24,590 --> 00:04:29,710 the most popular JavaScript libraries rather than hosting them ourselves. 69 00:04:29,710 --> 00:04:31,940 So, let's check it out. 70 00:04:31,940 --> 00:04:40,660 I'm going to navigate to developers.google.com/speed/libraries. 71 00:04:40,660 --> 00:04:48,950 [SOUND] And here, you'll see a bunch of hosted libraries. 72 00:04:48,950 --> 00:04:51,285 And we want to grab jQuery. 73 00:04:52,350 --> 00:04:55,500 We're using jQuery 2.x. 74 00:04:55,500 --> 00:04:57,690 So, let's select that here. 75 00:04:59,890 --> 00:05:03,887 And if we go back to our work space and scroll down to the bottom. 76 00:05:03,887 --> 00:05:06,426 [BLANK_AUDIO] 77 00:05:06,426 --> 00:05:11,300 You'll see we're including jQuery there, and we're hosting it ourselves. 78 00:05:11,300 --> 00:05:16,380 But we can just paste that in and use the exact same version 79 00:05:17,730 --> 00:05:24,980 and save that, and now, when we load up our site, we shouldn't see any difference. 80 00:05:24,980 --> 00:05:28,070 So, let's open the Network tab. 81 00:05:28,070 --> 00:05:30,390 And see if we notice any performance difference. 82 00:05:30,390 --> 00:05:33,400 So we load up the Network tab and refresh. 83 00:05:33,400 --> 00:05:36,790 You'll notice that we do have a slight performance increase. 84 00:05:36,790 --> 00:05:40,880 We have 17 HTTP requests, which is the same as before. 85 00:05:40,880 --> 00:05:44,850 But we're only transferring 156 kilobytes, and 86 00:05:44,850 --> 00:05:48,470 the page is now down to 174 milliseconds. 87 00:05:48,470 --> 00:05:52,060 We've never seen anything under 200 up to this point. 88 00:05:52,060 --> 00:05:58,070 So, let's refresh a couple more times, and we're pretty consistently under 200. 89 00:05:58,070 --> 00:06:02,090 So, why did that happen if we're just replacing jQuery? 90 00:06:02,090 --> 00:06:05,050 Well, we'll learn more about that in the next lesson, but 91 00:06:05,050 --> 00:06:08,740 it's because instead of using the full jQuery library, 92 00:06:08,740 --> 00:06:14,504 we are using the minified version, denoted by .min.