Lighthouse January 2017 update

Brendan Kenny
Brendan Kenny

Lighthouse is an open-source, automated tool for improving the quality of your web apps. You can install it as a Chrome Extension or run it as a Node command line tool. When you give Lighthouse a URL, it runs a barrage of tests against the page and then generates a report explaining how well the page did and indicating areas for improvement.

Lighthouse Logo
Lighthouse Logo

Today, we're happy to announce the 1.5 release of Lighthouse, a huge release, with over 128 PRs. Lighthouse 1.5 includes a bunch of big new features, audits, and the usual bug fixes. You can install it from npm (npm i -g lighthouse) or download the extension from the Chrome Web Store.

New Audits

The CSS Usage Audit reports the number of unused style rules in your page and the cost/time savings of removing them:

CSS Usage Audit

The Optimized Images Audit reports images that are unoptimized and the cost/time savings of optimizing them:

Optimized Images AudiT

The Responsive Images Audit reports images that are too big and the potential cost/time savings of sizing them correctly for the given device:

Optimized Images AudiT

The Deprecations and Interventions Audit lists console warnings from Chrome if your page is using deprecated APIs or features that have interventions:

Deprecations and Interventions Audit

Report changes

As you've seen, we've focused on making the report less visually cluttered by adding tabular data, hiding extraneous help text, and adding new features to make it easier to navigate the data.

Emulation settings

It's easy to forget what throttling and emulation settings were used for a particular Lighthouse run. Lighthouse reports now include the runtime emulation settings that were used to create the report; a long time feature request:

Emulation settings

More useful trace data

Lighthouse metrics like "First meaningful paint", "Time to Interactive", etc are mocked out as User Timing measures and injected back into the trace data saved with the --save-assets flag.

If you use the --save-assets flag, you can now drop the trace into DevTools or open it in the DevTools Timeline Viewer. You'll be able to see your key metrics in context with the full trace of the page load.

Trace data

Lighthouse Viewer

In HTML reports, you'll notice a new button with options for exporting the report in different formats. One of those options is "Open in Viewer". Clicking this button will send the report to the online Viewer, where you can further share the report with GitHub users.

Open in Viewer button
Open in Viewer result

Behind the scenes, Viewer gets your permission via OAuth to create a GitHub secret gist and saves the report there. Since it's done as your Gist, you maintain full control over the sharing of the report and you can delete it at any time. You can revoke the Viewer's permission to create gists under your GitHub settings.

Performance Experiment

The first version of the Performance Experiment project has landed in 1.5.0. This lets you experiment with your page load performance, interactively testing the effects of blocking or delaying assets in your critical path during development.

When Lighthouse is run with the --interactive flag, a special report is generated that allows interactive selection of costly page resources. The experiment server then reruns Lighthouse on that page with those resources blocked.

Toggling runtime settings

Learn more about the Performance Experiment in Lighthouse.

New Documentation

Last but not least, we've modernized the documentation at developers.google.com/web/tools/lighthouse/ and added new audit references.

New documentation

That's it for now!

For all the details on the latest in Lighthouse, see the full release notes over on GitHub. As always, hit us up to report bugs, file feature requests, or brainstorm ideas on what you'd like to see next.