figure {
text-align: center;
}
.lighthouse-logo {
height: 150px;
width: auto;
}
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.
Source: Building a Better Web with Lighthouse