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 ability to measure performance is the most important part of web optimization. There is a myriad of tools to choose from that will help you determine the speed of your app. Continuing to use these tools will help you determine whether or not you are within the goals outlined in your performance budget.
New Terms:
Contend Delivery Network(CDN) -- a distributed network of proxy servers set up in multiple data centers around the world
Perceptual speed index (PSI) - a metric for measuring the above-the-fold visual performance of a view
Mobile friendliness -- a score of how well your site or app will be useable on a mobile device
Waterfall graph - a visualization of data in the Chrome Inspector that illustrates the downloading of data to the client from the server
DOMContentLoaded - an event that happens immediately after the browser fires the domInteractive event, typically is reflective of the first meaningful paint
Critical Rendering Path - to prioritize the display of content as it relates to the user’s actions
Capture Filmstrip - visual tool within the Chrome Inspector Network tab that illustrates screenshots at timestamped moments in the building of the view
Last mile -- a phrase used in internet industry that refers to the final leg of a network delivering data to a user
Web Performance Tools:
Google’s PageSpeed Insights
Think with Google
ready.mobi
Google’s Lighthouse
Chrome Inspector Network Tab
Further Reading:
Progressive Performance (Chrome Dev Summit 2016)
Critical Rendering Path
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
Your ability to measure your site's
performance is the single most important
0:00
part of front end web optimization.
0:05
And the necessity to do so has birthed
a vast array of ingenuity and tools.
0:07
As they say,
necessity is the mother of invention.
0:12
Using some of these tools will help you
best determine how you are meeting your
0:16
performance goals and maintaining
resolution with your performance budget.
0:20
Measuring performance isn't all just
about how fast a user can download data.
0:25
The pillars of performance
are host server, network,
0:30
user's device and load time.
0:34
You want the fastest server that transmits
the smallest versions of data possible.
0:38
For example, Gzipping your assets like
discussed previously and then making use
0:43
of a distributed network, a CDN,
something that we'll discuss later on.
0:48
After your user makes a request,
0:53
you want to get that data
moving as fast as possible.
0:55
After the user makes a request and
1:00
the server starts to send data, your first
performance hindrance is the network.
1:02
Is the user on a slow mobile data network
or a blazing fast internal office network?
1:07
These are last mile issues that you have
no control over, but need to be aware of.
1:13
Many of the performance assessment
tools we will discuss make really
1:19
good attempts at emulating bad networks.
1:22
But nothing beats going out with your
phone to a crowded public area and
1:25
testing it for yourself,
which brings us to the user's device.
1:29
When building any app or site,
you have to have in mind what is probably
1:34
the most commonly used device
your customers will use.
1:39
Will they be using feature phones
in remote corners of the world?
1:42
Are they high-end smart phone users?
1:46
Are they professionals who may be
on a mobile or desktop device?
1:48
Keeping these questions in mind will help
you best measure against your performance
1:53
budget for that scenario.
1:57
Last is nailing down your load time.
1:59
Having set realistic goals for
your user scenarios,
2:02
you can now use performance
assessment tools with clear intent.
2:05
Without having specific goals in mind and
understanding the constraints,
2:10
using assessment tools is more like
a post-mortem than an opportunity for
2:14
progressively enhancing your app.
2:18
To better understand the processing
abilities of your most commonly used
2:21
devices, a few developers on the WebKit
team came up with motion mark.
2:25
Motion mark is a tool that will measure
a browser's ability to handle complex
2:30
UI's and animations while maintaining
the desired 60 frames per second.
2:35
Using this tool on various devices
going from mobile to desktop
2:40
will help you best understand the actual
performance capabilities of your devices.
2:45
The next series of tools we will look at
are the ones that are designed to review
2:51
the overall performance
of a deployed web app.
2:55
These tools provide insight for reports
into the performance of your site or
2:58
app in its production state, and how
your users will see it perform as well.
3:02
After all, testing things locally
is kind of cheating, isn't it?
3:07
>> Google's PageSpeed Insights has
risen to being one of the most
3:12
widely used performance assessment tools,
and it's extremely easy to use.
3:15
Enter the URL of your site,
and hit the ANALYZE button.
3:20
For example, I made a quick weather
app that's not yet optimized.
3:23
After it analyzes your site, it'll return
a report for both mobile and desktop.
3:27
For mobile, insights checks a number of
data points to see how well your site
3:32
performs on a mobile network.
3:36
Its main criteria is how well your site
renders above the fold content within
3:38
one second.
3:42
Insights looks for server response time,
number of http redirects,
3:43
number of roundtrips made to
render above the fold content.
3:49
And avoid render blocking calls needed
to render above the fold content.
3:53
The results come back as should fix,
consider fixing, and passed rules.
4:00
Don't let this report hurt your feelings,
4:05
it's pretty difficult
to get a perfect score.
4:06
You may have constraints that
are difficult to overcome.
4:09
Some should be easy to fix,
one being above the fold content.
4:12
We will discuss this later in
JavaScript and CSS optimization.
4:16
In regards to image optimization, you
should take this feedback very seriously
4:20
as bloated images are the number one
cause for poorly optimized sites.
4:24
The analysis Insights uses for
desktops follows a similar criteria, but
4:28
is not as critical on issues
related to power and network.
4:33
Insights also reserves time
needed to render the view layout,
4:37
then it evaluates how well
the JavaScript execution is and
4:41
the rendering time needed to
display the view in the browser.
4:45
But be sure to take pride in
the number of rules you did pass,
4:48
after all this is good work.
4:52
Now there's another site that
uses the PageSpeed API and
4:56
gives you a different experience.
4:59
Let's get our test site in here,
5:02
this assessment tool adds in another score
factor, that of mobile friendliness.
5:04
This is important because Google
is starting to use this score
5:10
in their search results algorithm.
5:14
The worse you are at mobile friendliness,
the lower your rankings, and
5:17
whoever said that mobile didn't matter?
5:21
A new tool I discovered is ready.mobi.
5:24
Like the others, I simply enter the URL
that I want to test and click GO.
5:27
They take a similar approach
as Google's PageSpeed, and
5:36
do a great job presenting the data
in a representation of your site and
5:40
various devices, ranging from desktop to a
feature phone with a really small screen.
5:44
The score feedback is great too.
5:50
It is clearly illustrated as to what is
good and bad with your app's experience.
5:52
And with each targeted feedback, there
are helpful tips for how you can fix them.
5:57
Last, I wanted to show
Google's Lighthouse.
6:03
Lighthouse is a tool that requires
a Chrome extension to be installed and
6:05
it works pretty simple.
6:09
Go to your site, either locally or
globally hosted, and
6:11
activate the app from the Chrome task bar.
6:15
LIghthouse will begin to perform
a series of tests to assess your score.
6:18
Here's the bad news.
6:22
If you scored less than
okay in the previous tests,
6:24
you may have your soul crushed here.
6:26
Lighthouse is a rigorous series of
tests for a progressive web app, and
6:29
they keep adding testing features,
which is pretty awesome.
6:32
One thing I really like about Lighthouse
is it's easy to read results.
6:36
You can quickly find things like
your first meaningful paint, or
6:41
your perceptual speed index.
6:46
There's a lot of criteria to meet, and
6:48
it's difficult at best
to get a perfect score.
6:50
Even sites where performance is
everything, like say, Amazon.com,
6:54
they currently only have
a score of 50 out of 100.
6:58
Like the other tests,
the data is easy to consume and
7:02
there is a slew of helpful hints and
tips to help you address
7:05
the areas where your app didn't
score as well as you hoped it would.
7:09
>> While all these assessment tools
are amazing, for local host profiling,
7:15
Lighthouse, the Google Chrome
extension is the winner.
7:20
And while this test is amazing, we can't
ignore the grandfather of web performance
7:24
profiling and that's Chrome's Inspector,
specifically the Network tab.
7:29
>> We are all familiar with Chrome's
Inspector, at the very least for CSS and
7:35
JavaScript debugging.
7:38
But for
the purpose of assessing performance,
7:40
we want to pay close
attention to the Network tab.
7:42
Before we get started,
if you haven't already, be sure to
7:45
update the inspector settings to always
disable cache when the inspector's open.
7:47
This will prevent you from
getting false performance data,
7:52
as there will be cached data in the
browser from previous hits to the site.
7:55
In this example, I threw in the kitchen
sink, and I'm using really large images.
7:59
Most know that this is not performant, but
8:04
I really want an exaggerated
example to illustrate here.
8:06
With Chrome's inspector open,
8:11
we can easily see where
the bottlenecks are in our app.
8:13
With this view open, analyzing our site,
8:17
we see a waterfall graph being generated
that shows all of the assets being loaded.
8:19
The information here can
be complex to read, but
8:24
with some poking around we can quickly
understand some key information.
8:27
But is this example real?
8:31
I am loading this from my laptop.
8:33
So let's throw in some network
throttling to make this more real and
8:35
refresh the app.
8:38
In the foot of the Network tab
are some important data points.
8:42
How many requests,
how much data is being transferred,
8:45
the finish load time,
DOMContentLoaded, and total load time.
8:48
Critical points to consider
are what is the total
8:54
time to load all of the code and data?
8:57
When is DOMContentLoaded completed?
8:59
And what is the total load time?
9:03
Simply put, the larger the numbers,
the worse off we are.
9:05
Finish time, this is the time that
it takes for the browser to finish
9:09
downloading and executing all the code,
which is usually just behind load time.
9:13
DOMContentLoaded, a critical factor
that should be as small as possible.
9:19
I would always target this to
be at least one second or less.
9:24
The definition of DOMContentLoaded means,
the DOM and CSS object model are ready.
9:28
There are no style sheets that
are blocking JavaScript in the critical
9:34
rendering path.
9:38
The render tree can now be built.
9:39
DOMContentLoaded is usually pretty close
to your first meaningful paint, and
9:42
fires immediately after DOM interactive.
9:46
This is roughly your first
meaningful interaction.
9:50
If there is anything blocking
the DOMContentLoaded event,
9:53
your users will just sit there
looking at a blank screen.
9:57
Another visualization of DOMContentLoaded
is the capture filmstrip
10:01
in the top part of the tab.
10:05
Once the recording is complete, there will
be a series of screenshots that depict
10:07
specific time intervals of
the loading of your site.
10:10
You will see that the timestamp of
the first slice in the filmstrip is
10:14
really close to the same time as
the DOMContentLoaded timestamp.
10:18
You can also click on a slide in
the filmstrip and that will filter
10:23
out the waterfall to illustrate what
has been completed up to that point.
10:26
Which takes us to the waterfall
cascade of events for
10:31
downloading all of
the content to your site.
10:33
This is a very clear depiction of how
large assets are, when they loaded,
10:36
if they are blocked, or
if assets didn't load at all.
10:41
There's an amazing amount of
information in this area of the report.
10:45
For even more information,
10:48
you can click on the depiction
of the asset in the timeline.
10:50
This will tell you exactly when the asset
was requested, what the wait time was,
10:54
and how long it took to download.
10:59
The wait time is the clear
depiction of latency.
11:01
Also interesting to note, in this
example there are broken resources.
11:06
These things take time too.
11:11
That's something to keep in mind and
11:14
to make sure that you are maintaining
all of your references correctly.
11:16
As you can see here, there are a lot of
tools that can provide a lot of data to
11:21
help us better understand
the performance of our sites.
11:25
In the next stage of this course, we will
discuss some real life examples for how to
11:29
best optimize our assets and really drive
these critical performance numbers down.
11:33
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