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