DEV Community

loading...

Shine a light on JavaScript performance with Lighthouse

addyosmani profile image Addy Osmani Originally published at addyosmani.com 惻Updated on 惻2 min read

Unsure if the cost of JavaScript is too high for your user-experience? šŸ™ƒ Lighthouse has a JavaScript execution time audit that measures the total impact of JavaScript on your page's load performance:

Try it. It's in the Chrome DevTools Audits panel today. It's also available via WebPageTest.

For the above content site, it takes 51s (oi vey) for the browser to process just the primary bundle for this site on mobile. Including network transfer time, a user could be waiting for up to a minute to interact with this page ā³šŸ˜Ŗ

That's time spent parsing, compiling and executing script on a median mobile device configuration. dev.to (offering a similar content experience) is able to load their main bundle with a minimal dependency on script execution ā¤ļø

How can we improve the cost of JS in the original site?

By only shipping JavaScript the user really needs upfront. We can lazily load the rest as needed using techniques like code-splitting. I use the DevTools Code Coverage feature to help here.

If I hit record and load up the above experience then interact for a while, we can see about 57% of the code loaded upfront may not be needed. That's a great candidate for something that can be loaded on-demand.

If you haven't checked out Lighthouse before, it's full of useful nuggets like checks for whether you're correctly minifying your scripts or compressing them:

And if you're into automation using headless Chrome, there's also a useful code-coverage example for Puppeteer that can visualize JS code coverage usage across page loads.

Wrapping up.. šŸŽ

JavaScript can have a large impact on your user-experience; Lighthouse can highlight opportunities to improve here. To keep JavaScript transmission and processing times low:

  • Only send the code that your users need.
  • Minify and compress your scripts.
  • Remove unused code and dependencies.

Discussion

pic
Editor guide
Collapse
ben profile image
Ben Halpern

Lighthouse really is one of the best tools I've seen for this sort of thing. I hope it keeps evolving and becomes a longterm cornerstone for web perf measurement.

Collapse
loukilaymen profile image
Aymen Loukil

Absolutely and the cherry on the cake : Lighthouse could be extendable with custom audits (sort of plugins). I have wrote a tutorial explaining how to here :

Collapse
aspittel profile image
Ali Spittel

I lighthouse test everything, it's an awesome tool!

Collapse
theoutlander profile image
Nick Karnik

Lighthouse is really cool. I killed my open source project that was doing a similar thing after I discovered it.

Collapse
benkressdesign profile image
Ben Kress

Lighthouse is definitely a great tool. I run it on any site I truly care about achieving top performance on.