Building a Better Web with Lighthouse
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.
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!
Existing reports can be reloaded by Lighthouse Viewer by adding ?gist=GIST_ID
to the URL:
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.