iRyanBell

Quantify your PWA performance with Lighthouse

By Ryan Bell on January 21, 2019 - 3 min read

Quantify your PWA performance with Lighthouse

In the Quantified Self community, there's this adage that "you can't improve what you do not measure."

While objective data provides the indicators necessary to react to changing dynamics and apply swift micro course corrections, the very awareness of the data collection process itself has a tendency to modify our trajectory in the direction of positive change by keeping us mindfully directed toward these end goals. So, if we're going to actively work to improve our progressive web applications and stay on top of their respective performance, accessibility, best practices, and search engine optimization metrics, we had better find a way to quantify these areas of focus so that we can track those numbers over time.

That's where the open-source Lighthouse auditing suite steps in to save the day.

Google now provides a free third-party website audit as a service at https://web.dev. You can check in at any time take an objective measurement of the quality of your progressive web application at great depth -- it only takes maybe 30 seconds to run through the complete battery of tests. Each point throughout the audit includes reference documentation explaining why a given test was conducted, where it may have failed, and how you might go about improving the situation.

So, take a minute to run your favorite site through the tool, then see how your projects stack up against the competition.

One of the most important numbers to consider is the first-meaningful paint time, followed next by the time-to-interactive. You can read more about those here:

First meaningful paint score (FMP)

Time to interactive score (TTI)

These two values give you a great sense of how well your pipeline has been optimized for content delivery. Ideally, you don't want to make users wait longer than 3 seconds. After you run the report, you can follow along down the checklist and slowly chip away at the optimization problems.

Think with Google has an Impact Calculator that can help to predict the potential revenue losses that may be due to poorly tuned site performance: https://www.thinkwithgoogle.com/feature/mobile/

So, where do we go from here?

What I'm finding most interesting, is the prospect of starting from a clean slate of 100/100 across the board, then keeping a tab on these performance, accessibility, best practices, and seo metrics throughout the application logic and interface development cycles. With these realtime measurements, we can liken the experience to driving a racecar with a new series of tachometers along our field of view rather than the alternative that leaves us lagging behind, sort of winging it by feel. To pull this off, I'm finding the combination of GatsbyJS (leveraging React + GraphQL) + Netlify most intriguing when considering a refactor or a new project, since this sets us up for success right out of the gate with the aforementioned perfect Lighthouse audit rating.

I've laid out the first step in this journey at: https://youtu.be/4JNoEALqgjE

While we work toward the objective measurements of speed and performance, it's also important to stay mindful of the perception of performance through fluid UI design and the thoughtful application of event-driven animations to continually provide our users with a sense of immediacy.