Shine a light on JavaScript performance with Lighthouse
Tags: javascript, performance, lighthouse, bundle
Published: 2018-10-18 18:41:20

---
title: Shine a light on JavaScript performance with Lighthouse
published: true
description: Use Lighthouse to detect opportunities to reduce the cost of JavaScript to your user experience.
tags: javascript, performance, lighthouse, bundle
canonical_url: https://addyosmani.com/blog/shine-a-light-javascript-performance/
---


Unsure if the [cost of JavaScript](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) is too high for your user-experience? 🙃 [Lighthouse](https://developers.google.com/web/tools/lighthouse/) has a [JavaScript execution time audit](https://developers.google.com/web/tools/lighthouse/audits/bootup) that measures the total impact of JavaScript on your page's load performance:

![](https://thepracticaldev.s3.amazonaws.com/i/ggbnzgr8b1k8suklbjsr.png)

Try it. It's in the Chrome DevTools [Audits](https://developers.google.com/web/updates/2017/05/devtools-release-notes#lighthouse) panel today. It's also available via [WebPageTest](https://webpagetest.org/easy). 

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](https://philipwalton.com/articles/why-web-developers-need-to-care-about-interactivity/) with this page ⏳😪

![](https://thepracticaldev.s3.amazonaws.com/i/oqmf5qnqt89lt5f81pub.png)

That's time spent parsing, compiling and executing script on a median mobile device configuration. [dev.to](https://dev.to) (offering a similar content experience) is able to load their main bundle with a minimal dependency on script execution ❤️

![](https://thepracticaldev.s3.amazonaws.com/i/detuj3z8swkr729nb6zs.png)

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](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/). I use the DevTools [Code Coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) feature to help here. 

![](https://thepracticaldev.s3.amazonaws.com/i/ksqhn42t3sswm0oah9zd.png)

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:

![](https://thepracticaldev.s3.amazonaws.com/i/uwsg5tivewa8plw9o8jt.png)

And if you're into automation using headless Chrome, there's also a useful [code-coverage example](https://github.com/GoogleChromeLabs/puppeteer-examples#code_coveragejs) for [Puppeteer](https://developers.google.com/web/tools/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.