Placeholder Image

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.