- [Narrator] Most aspects of my performance
can be measured in a consistent way
for comparison and analysis and iteration.
There are a myriad of tools out there for this purpose
including tools built into your browser
and online tools you can use
either for free or for a fee.
Different tools give you different types of feedback.
And because they exist in different locations
on different stacks and provide different types of services,
they also give you slightly different results
compared to one another.
For this reason,
the best practice is to use several
different performance monitoring tools
collect the data from all of them,
and then compare, contrast and analyze when possible.
These tools fall into two main categories, browser tools
and hosted third party tools.
Let's look at the browser tools first.
There are two main types of tools here.
The first one exists inside the Chrome browser.
If you open the developer tools for Chrome
and go to the far right hand side of the developer tools,
there's a button called Lighthouse.
This tool generates a performance report for your site
and it also gives you a long list of suggestions
on how to improve the performance of your site.
It also tests for other things,
progressive web apps, best practices,
accessibility and SEO.
And you can choose whether you want to test
on a mobile device or a desktop device.
If you choose mobile,
then the browser will mimic a mobile device.
So small screens, slower load times and all that.
So I'm going to generate a report
just to see what's going on
on this site that I'm running right now.
This is a site that lives somewhere on the web
but you can also run Lighthouse
on a locally hosted site on your computer, if you want to.
What I get in response here is a performance score of 84.
This is good, but not great.
Ideally, I want to get as close as possible to 100.
I want it to at least be in the green, so over 90.
To fix that,
I can now scroll down and see what's slowing my site down.
Well, first off, I can see there are some issues.
First, Contentful paint is too slow.
Largest Contentful paint is too slow
and there's too much cumulative layout shift.
Meaning things are moving too much around
as the pages loaded.
Scrolling further down,
we get a list here of opportunities and diagnosis.
So the opportunities here include
eliminate render blocking resources.
If I open that, you can see the render blocking resource
in question is Google fonts.
And we'll talk a lot about web fonts and optimization later.
And one of the things that we'll deal with
is exactly this type of problem
where the web font is blocking the rendering of the page.
You can also see it's as serve images in next gen formats.
And if we open up,
it'll say image formats like JPEG 2000, JPEG XR
and web P off provide better compression
than PNGs and JPEGs.
We'll also talk about image formats and how to optimize
for different image formats later on in the course.
And finally, at the bottom here,
we have remove unused JavaScripts.
And that just means somewhere in the sites,
there's JavaScript being loaded that isn't being used
which is a waste of resources.
So the Lighthouse report is really good at seeing
at a glance where the performance enhancements
of your site can be.
And it gives you good recommendations on what to do.
If you want to dig further into exactly what is going on
in your site, you can also run the network monitor.
You open the network monitor,
make sure you click disable cash
so that you are downloading the site from scratch.
And then you just reload the page.
What you get here is a waterfall
of every single resource that's being downloaded
from the site.
And you can see right away how it's being downloaded.
On this case,
the site is running HTTP two, meaning it's multiplexing
and loading resources as fast as they become available.
And you can see here,
that it takes quite a bit of time for everything to load.
For example, we have this file here called vendor JS.
Now this is the file that Lighthouse said
has a lot of unused code
and you can see it takes quite a while to load.
And there's a lot of execution going on here too.
Further down, we have main JS.
If you hover over any of these, you get a breakdown
of how long it takes for queuing, how long it was stalled,
how long it took for the request to be sent
and how much wait time happened before it came back,
how long it take to download.
So here you see, for example,
it took 237.99 milliseconds between the request was sent
to the server and the response came back
and then the actual download was only 1.49 milliseconds.
If we look at the top one here, this is the HTML document.
You can also see, there is a very slow start on the server.
So the server waited
for 1.48 milliseconds before anything happened.
And then we waited 151 milliseconds
before the file actually got downloaded.
So the total execution of this was 153.9 milliseconds
which is a very long time.
That means that the server that is running on
is not all that fast.
If you go in and go even deeper into what's going on,
you can also go to the performance monitor.
Now the performance monitor tells you about how the scripts
and everything else in the site are actually performing.
So this falls a little bit outside
of the scope of this course, but it's worth knowing about
because it gives you a lot of details
about what's going on in your site.
Again, to run it,
you need to go over here, clear everything
and then click on start profiling and reload page.
Now the page will be reloaded into the browser
and the profiler starts.
Now, the profiler is a fairly advanced tool
and you can use it to do things
like profile existing behaviors.
You can go in and mess around with a site
and then see what is happening.
But what you get here is now very detailed information
about how the page is loaded
and what kind of activity happens as this loads.
As you can see, there's 20 milliseconds for loading
then 83 for scripting, and 38 for rendering
and 12 for painting.
And you can see here on the breakdown
exactly when different things happen
and what is happening and so on.
So there's a lot of information here.
Lighthouse exists in Chrome network monitor
and performance monitor exists in all modern browsers,
including Firefox, Edge and so on.
The second category of performance monitoring tools
is hosted third party tools.
The most used example here is page speed insights.
Now, if we go to page speed insights,
you'll notice it looks exactly the same as Lighthouse.
Just that it's on the web.
That's because it is.
The difference is Lighthouse runs on your computer
page speed insights runs on some server that Google has.
So you get slightly different data
and you get slightly more reliable data
because it's also compared to other data that they have.
But this is a way you can run a Lighthouse on any website
even if you don't have Chrome
and you get the same type of breakdown,
same type of tips and everything else.
One cool thing is the page speed insights,
screenshots are not relined on the browser window.
You may have noticed in my Lighthouse output here,
that the screenshots are based
on the size of my browser window.
So right now we're just getting the hamburger menu.
Well, in page speed insights, you get the actual screens.
You can see what's going on.
Another popular tool is the web page test website.
Again, here you just enter the website you want to test
and you get a report and return
and you get a full breakdown of the waterfall.
You get different runs so you can run the same site
against different browsers, different configurations,
different locations, to see how it differs.
So the difference between run one and run two here
is run one is the first load,
run two as the cashed load.
So the website is already being cashed inside the system
and you'll get a ton of information.
Regardless of what testing procedure you use, browser tools,
hosted third party tools or something else,
the actual test results always include page speed scores
and other details.
They also show you key indicators describing
the user experience most important of which are first paint,
the time it takes before the user sees changes
happening in the browser,
Largest Contentful Paint.
the time it takes before the user sees content,
so text images, something else in the browser.
First Meaningful Paint,
the time it takes before the user sees content
that is actually meaningful.
So when above the full content and web fonts are loaded
and the user can derive meaning from what they are seeing.
And finally, Time To Interactive,
the time it takes before the content has finished loading
and the UI can be interacted with
so the user can actually click on buttons, fill forms
or do whatever else is going to happen on the site.
The longer it takes for a site to hit each of these points,
the higher the chance of the user either getting annoyed
or abandoning the user experience altogether.
As an example,
I'm sure you've experienced visiting a site
on your computer or mobile device
and experiencing not being able to click on a button
or interact with an input field.
In that circumstance,
you're still waiting for TTI or Time To Interactive.
And that waits can be extremely infuriating.
When it comes to reliable automated testing,
Lighthouse is currently the industry standard
and it's even integrated in other hosted solutions
like GTMetrics and page speed insights.
Lighthouse also gives you other important feedback
like accessibility testing and recommendations
on more performance JavaScript libraries and so on.
So for ongoing testing during development,
Lighthouse is by far the quickest and most reliable route.