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.