Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
New Terms:
Multiplexing -- A method in HTTP/2 by which multiple HTTP requests can be sent, and responses can be received asynchronously via a single TCP connection.
Further Reading:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up