Subtitles section Play video
(lively music)
- [Morten] Most aspects of web 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 under 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 screen, 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's 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 page is loaded.
Scrolling further down,
we get a list here of opportunities, and diagnostics.
So the opportunities here
include eliminate render-blocking resources.
If I open that,
I can see the render-blocking resource in question
is Google Fonts.
You can also see it says server images in next-gen formats.
And if we open up, it'll say image formats
like JPEG 2000, JPEG XR,
and WebP often provide better compression
than PNGs and JPEGs.
And finally at the bottom here,
we have remove unused JavaScript.
And that just means somewhere in the site,
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.
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 cache
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 been downloaded.
On this case, the site is running HTTP/2,
meaning it's multiplexing and loading resources
as fast as they become available.
And we 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 we 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's 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 it's running on
is not all that fast.
If you want to 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 on the site
are actually performing
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's a fairly advanced tool,
and you can use it to do things
like profile existing behaviors,
so you can go in and mess around with the 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 it's loaded.
So 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 in 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 exist
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 PageSpeed Insights.
Now, if we go to PageSpeed 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.
PageSpeed 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 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 PageSpeed Insights screenshots
are not reliant 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 PageSpeed Insights,
you get the actual screens.
You can see what's going on.
Another popular tool is the WebPageTest 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 is the cached load,
so the website is already being cached inside the system.
And you 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 speeds 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 users 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 all together.
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 wait 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 GTmetrix and PageSpeed Insights.
Lighthouse also gives you other important feedback,
like accessibility testing and recommendations
on more performant JavaScript libraries and so on.
So for ongoing testing during development,
Lighthouse is by far the quickest
and more reliable route.
(upbeat music)