Eric Bidelman [X](https://twitter.com/ebidel) [GitHub](https://github.com/ebidel) [Homepage](http://ericbidelman.com/)

<br />

> [!NOTE]
> **Note:** [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) is an [open-source](https://github.com/GoogleChrome/lighthouse), automated tool for improving the quality of your web apps. You can install it as a [Chrome Extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) 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](https://developers.google.com/web/progressive-web-apps/):

- Welcomed 50 new [contributors](https://github.com/GoogleChrome/lighthouse/graphs/contributors) to the project
- Shipped 15 [releases](https://github.com/GoogleChrome/lighthouse/releases)
- Added \~20 additional [audit tests](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/audits) (\~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](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)
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.
![Lighthouse Report](https://developer.chrome.com/static/blog/lighthouse-dbw/image/lighthouse-report-caec48648c8a6.png)

## 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](https://developers.google.com/web/fundamentals/design-and-ux/animations/) that JS-based
animations should be done with [`requestAnimationFrame()`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame) instead of
[`setInterval()`](https://developer.mozilla.org/docs/Web/API/WindowTimers/setInterval). However, if the developer is unaware of the
newer API, their web app needlessly suffers.

Lighthouse 1.3 includes 20+ [new best practice](https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/audits/dobetterweb) suggestions ranging
from tips for modernizing CSS \& JavaScript features to performance
recommendations like: "Reduce the number of render-blocking assets", "Use
[passive event listeners](https://developers.google.com/web/updates/2016/06/passive-event-listeners) to
improve scrolling performance".
![Do better web best practices.](https://developer.chrome.com/static/blog/lighthouse-dbw/image/do-better-web-best-practi-291f1f5b9aea7.png)

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](https://github.com/GoogleChrome/lighthouse/issues?q=is:issue+is:open+label:DoBetterWeb)
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](https://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.](https://developer.chrome.com/static/blog/lighthouse-dbw/image/report-viewer-46b6a0a40aa8c.png) [Report Viewer](https://googlechrome.github.io/lighthouse/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.](https://developer.chrome.com/static/blog/lighthouse-dbw/image/viewer-architecture-4c4b97893c8fe.png) Viewer Architecture

Existing reports can be reloaded by Lighthouse Viewer by adding `?gist=GIST_ID`
to the URL:
![Viewer architecture 2.](https://developer.chrome.com/static/blog/lighthouse-dbw/image/viewer-architecture-2-232e7efc4dd3.png) Viewer Architecture 2

For all the details on the latest in Lighthouse, see the
[full release notes](https://github.com/GoogleChrome/lighthouse/tags) over on
GitHub. As always, [hit us up](https://github.com/GoogleChrome/lighthouse/graphs/contributors) to [report bugs](https://github.com/GoogleChrome/lighthouse/issues), file feature
requests, or brainstorm [ideas](https://github.com/GoogleChrome/lighthouse/issues?q=is:issue+is:open+label:%22good+first+bug%22) on what you'd like
to see next.