- [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.