1 00:00:00,490 --> 00:00:04,590 One factor or performance that we have to deal with when building a website or 2 00:00:04,590 --> 00:00:07,478 app is where are our users? 3 00:00:07,478 --> 00:00:11,120 Traditionally, we would upload all our content to a single web server 4 00:00:11,120 --> 00:00:12,160 in a data center somewhere. 5 00:00:13,420 --> 00:00:17,300 Let's say for example you're hosting your site somewhere in Southern California. 6 00:00:18,480 --> 00:00:23,560 Let's say that you have a user requesting photos on your site from New York. 7 00:00:23,560 --> 00:00:27,510 Basically your content needs to travel all the way across the country to get 8 00:00:27,510 --> 00:00:28,050 to that user. 9 00:00:29,350 --> 00:00:33,930 While the internet is amazingly fast, it still does take time. 10 00:00:33,930 --> 00:00:36,770 And the larger the asset, the longer it will take. 11 00:00:36,770 --> 00:00:38,780 So how do we address this? 12 00:00:38,780 --> 00:00:41,250 Content delivery networks, or 13 00:00:41,250 --> 00:00:45,200 CDNs, are a globally distributed network of proxy servers. 14 00:00:46,210 --> 00:00:50,900 When you upload your content to its CDN, it makes copies of that content and 15 00:00:50,900 --> 00:00:54,660 sends them to servers and data centers around the world. 16 00:00:54,660 --> 00:00:57,160 When a user from New York accesses your site and 17 00:00:57,160 --> 00:01:01,540 requests that large image, the image does not come from Southern California, but 18 00:01:01,540 --> 00:01:04,110 from somewhere in the upper East Coast. 19 00:01:04,110 --> 00:01:09,720 Being closer to the server that responds with the large image reduces latency and 20 00:01:09,720 --> 00:01:11,340 basically increases performance. 21 00:01:12,600 --> 00:01:16,860 Setting up CDNs will vary from the different vendors out there. 22 00:01:16,860 --> 00:01:19,330 And all products will offer different features 23 00:01:19,330 --> 00:01:21,520 that will help you optimize your site even further. 24 00:01:23,000 --> 00:01:24,950 Most of these products do cost money and 25 00:01:24,950 --> 00:01:27,720 are typically considered a professional resource, but 26 00:01:27,720 --> 00:01:31,650 there are some that are offer CDN services for personal blogs and small apps. 27 00:01:33,360 --> 00:01:38,446 Benefits from CDNs do not stop simply at serving up images and media files. 28 00:01:38,446 --> 00:01:44,940 Many CDN services provide https automatically, and support http2. 29 00:01:46,070 --> 00:01:50,670 For security purposes of your content, and your users, moving your site and 30 00:01:50,670 --> 00:01:54,040 it's assets to https is a growing trend. 31 00:01:54,040 --> 00:01:59,000 And a must for many new features as we discovered with service workers. 32 00:01:59,000 --> 00:02:00,865 http2, on the other hand, 33 00:02:00,865 --> 00:02:05,160 is an emerging new hypertext transfer protocol specification. 34 00:02:06,370 --> 00:02:11,692 Based on the work Google did with the new spec they developed called SPDY, 35 00:02:11,692 --> 00:02:16,380 http2 offers a host of new features that really add more gas 36 00:02:16,380 --> 00:02:18,675 to a faster performing internet. 37 00:02:18,675 --> 00:02:22,480 One such performance enhancement directly solves the issue with latency, 38 00:02:22,480 --> 00:02:24,881 with a process called multi-plexing. 39 00:02:24,881 --> 00:02:29,770 Multi-plexing allows for multiple requests over a single TCP connection. 40 00:02:31,100 --> 00:02:35,440 For a quick and easy example to see how an http2 server response is different from 41 00:02:35,440 --> 00:02:40,480 a traditional http server response, check out cswizardry.com. 42 00:02:40,480 --> 00:02:44,660 Harry Robert's is update is safe to run on an http2 server. 43 00:02:44,660 --> 00:02:49,340 And to see this, simply open his site, then open a Network tab in the inspector 44 00:02:49,340 --> 00:02:52,150 and see the flatline of assets being downloaded. 45 00:02:52,150 --> 00:02:53,140 Pretty cool. 46 00:02:53,140 --> 00:02:53,880 Well done, Harry. 47 00:02:54,940 --> 00:02:59,550 To demonstrate how a basic cdn works, I made a copy of the lazyload project. 48 00:02:59,550 --> 00:03:00,170 But this time, 49 00:03:00,170 --> 00:03:04,340 instead of hosting all of the resources locally, I moved them to a cdn. 50 00:03:04,340 --> 00:03:07,610 To make this update to our site, all we need to do is redirect the image 51 00:03:07,610 --> 00:03:10,830 resource from a local resource to that of the cdn. 52 00:03:10,830 --> 00:03:13,800 Also, notice the https URLs. 53 00:03:15,410 --> 00:03:18,970 Opening this view in the browser, we will see some performance enhancements 54 00:03:18,970 --> 00:03:22,060 based on the proximity of the CDN to our request. 55 00:03:22,060 --> 00:03:25,040 Scrolling through the view we will see that there is no negative impact on 56 00:03:25,040 --> 00:03:26,830 the performance of the lazy load. 57 00:03:26,830 --> 00:03:29,500 So here we really are full of a lot of win. 58 00:03:29,500 --> 00:03:31,770 For having a site with a lot of background images, 59 00:03:31,770 --> 00:03:35,370 having an inital load time of 75 milliseconds isn't too shabby. 60 00:03:36,650 --> 00:03:39,720 But remember what I said about http2? 61 00:03:39,720 --> 00:03:42,640 Let's go back and update the data-original 62 00:03:42,640 --> 00:03:46,660 attribute references to be that of the standard source attribute references, so 63 00:03:46,660 --> 00:03:50,550 that we can take advantage of the CDN's http2 server. 64 00:03:50,550 --> 00:03:53,578 We also need to comment out the LazyLoad feature as well. 65 00:03:55,720 --> 00:03:58,569 Save this go back to the browser, refresh, and 66 00:03:58,569 --> 00:04:03,410 we will see that all of the assets are being loaded at the same time. 67 00:04:03,410 --> 00:04:07,700 Not only are we getting a benefit of having globally distributed assets 68 00:04:07,700 --> 00:04:11,600 on a faster network than your typical web host, you are also getting 69 00:04:11,600 --> 00:04:15,940 the added benefit of secure content and a new faster transfer protocol. 70 00:04:17,300 --> 00:04:21,650 From request to response, minify code and optimize images. 71 00:04:21,650 --> 00:04:24,360 Mobile first and performance budgets. 72 00:04:24,360 --> 00:04:28,100 Modern transfer protocols and content delivery networks. 73 00:04:28,100 --> 00:04:33,070 The web is an increasingly complex environment that relies on due diligence, 74 00:04:33,070 --> 00:04:36,050 and we have but only scratched the surface. 75 00:04:36,050 --> 00:04:40,620 Remember performance as a developement spec is as important, 76 00:04:40,620 --> 00:04:44,680 if not more so than that design update or new feature.