Building a better web with Lighthouse

Eric Bidelman

Note: 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.

Since Google I/O, we've been hard at work making Lighthouse an awesome companion for building great Progressive Web Apps:

• Welcomed 50 new contributors to the project
• Shipped 15 releases
• Added ~20 additional audit tests (~50 total)

Today, we're happy to announce the 1.3 release of Lighthouse. Lighthouse 1.3 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.

So what's new?

New look and feel

If you've used an earlier version of Lighthouse, you may have noticed that the logo is new! The HTML report and Chrome Extension have also undergone a complete refresh, with a cleaner presentation of scoring and more consistency across audit results. We've also added helpful debug information when you fail a test and include pointers to recommended workarounds.

New Best Practices

To date, Lighthouse has focused on performance metrics and the quality of PWAs. However, an overarching goal of the project is to provide a guidebook for all of web development. This includes guidance on general best practices, performance and accessibility tips, and end-to-end help on making quality apps.

"Do Better Web" is an effort within the Lighthouse project to help developers do better on the web. In other words, help them modernize and optimize their web applications. Oftentimes, web devs use outdated practices, anti-patterns, or hit known performance pitfalls without realizing it. For example, it is widely known that JS-based animations should be done with requestAnimationFrame() instead of setInterval(). However, if the developer is unaware of the newer API, their web app needlessly suffers.

Lighthouse 1.3 includes 20+ new best practice suggestions ranging from tips for modernizing CSS & JavaScript features to performance recommendations like: "Reduce the number of render-blocking assets", "Use passive event listeners to improve scrolling performance".

We'll continue to add more recommendations over time. If you have suggestions for best practices or want to help us write an audit, file an issue on GitHub.

Report Viewer

Last but not least, we're excited to announce a new web viewer for Lighthouse results. Visit googlechrome.github.io/lighthouse/viewer, drag and drop the output of a Lighthouse run (or click to upload your file), and voila. "Insta" Lighthouse HTML report.

Report Viewer

Lighthouse Viewer also lets you share reports with others. Clicking the share icon will sign you in to GitHub. We stash reports as secret gist in your account so you can easily delete a shared report or update it later on. Using GitHub for data storage also means you get version control for free!

Viewer Architecture

Existing reports can be reloaded by Lighthouse Viewer by adding ?gist=GIST_ID to the URL:

Viewer Architecture 2

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.