Optimize Performance with Asset Delivery4:45 with Dale Sande
The largest performance issue with any web site/app is how fast you can get your content and assets to your users. While most web hosts are pretty fast at delivering text, serving all your fonts and images from a single host can lead to performance issues. Content Delivery Networks(CDN) have become an industry standard and a must-have for highly performant web apps.
One factor or performance that we have to deal with when building a website or 0:00 app is where are our users? 0:04 Traditionally, we would upload all our content to a single web server 0:07 in a data center somewhere. 0:11 Let's say for example you're hosting your site somewhere in Southern California. 0:13 Let's say that you have a user requesting photos on your site from New York. 0:18 Basically your content needs to travel all the way across the country to get 0:23 to that user. 0:27 While the internet is amazingly fast, it still does take time. 0:29 And the larger the asset, the longer it will take. 0:33 So how do we address this? 0:36 Content delivery networks, or 0:38 CDNs, are a globally distributed network of proxy servers. 0:41 When you upload your content to its CDN, it makes copies of that content and 0:46 sends them to servers and data centers around the world. 0:50 When a user from New York accesses your site and 0:54 requests that large image, the image does not come from Southern California, but 0:57 from somewhere in the upper East Coast. 1:01 Being closer to the server that responds with the large image reduces latency and 1:04 basically increases performance. 1:09 Setting up CDNs will vary from the different vendors out there. 1:12 And all products will offer different features 1:16 that will help you optimize your site even further. 1:19 Most of these products do cost money and 1:23 are typically considered a professional resource, but 1:24 there are some that are offer CDN services for personal blogs and small apps. 1:27 Benefits from CDNs do not stop simply at serving up images and media files. 1:33 Many CDN services provide https automatically, and support http2. 1:38 For security purposes of your content, and your users, moving your site and 1:46 it's assets to https is a growing trend. 1:50 And a must for many new features as we discovered with service workers. 1:54 http2, on the other hand, 1:59 is an emerging new hypertext transfer protocol specification. 2:00 Based on the work Google did with the new spec they developed called SPDY, 2:06 http2 offers a host of new features that really add more gas 2:11 to a faster performing internet. 2:16 One such performance enhancement directly solves the issue with latency, 2:18 with a process called multi-plexing. 2:22 Multi-plexing allows for multiple requests over a single TCP connection. 2:24 For a quick and easy example to see how an http2 server response is different from 2:31 a traditional http server response, check out cswizardry.com. 2:35 Harry Robert's is update is safe to run on an http2 server. 2:40 And to see this, simply open his site, then open a Network tab in the inspector 2:44 and see the flatline of assets being downloaded. 2:49 Pretty cool. 2:52 Well done, Harry. 2:53 To demonstrate how a basic cdn works, I made a copy of the lazyload project. 2:54 But this time, 2:59 instead of hosting all of the resources locally, I moved them to a cdn. 3:00 To make this update to our site, all we need to do is redirect the image 3:04 resource from a local resource to that of the cdn. 3:07 Also, notice the https URLs. 3:10 Opening this view in the browser, we will see some performance enhancements 3:15 based on the proximity of the CDN to our request. 3:18 Scrolling through the view we will see that there is no negative impact on 3:22 the performance of the lazy load. 3:25 So here we really are full of a lot of win. 3:26 For having a site with a lot of background images, 3:29 having an inital load time of 75 milliseconds isn't too shabby. 3:31 But remember what I said about http2? 3:36 Let's go back and update the data-original 3:39 attribute references to be that of the standard source attribute references, so 3:42 that we can take advantage of the CDN's http2 server. 3:46 We also need to comment out the LazyLoad feature as well. 3:50 Save this go back to the browser, refresh, and 3:55 we will see that all of the assets are being loaded at the same time. 3:58 Not only are we getting a benefit of having globally distributed assets 4:03 on a faster network than your typical web host, you are also getting 4:07 the added benefit of secure content and a new faster transfer protocol. 4:11 From request to response, minify code and optimize images. 4:17 Mobile first and performance budgets. 4:21 Modern transfer protocols and content delivery networks. 4:24 The web is an increasingly complex environment that relies on due diligence, 4:28 and we have but only scratched the surface. 4:33 Remember performance as a developement spec is as important, 4:36 if not more so than that design update or new feature. 4:40
You need to sign up for Treehouse in order to download course files.Sign up