You’ve spent months building a fast, high-performing Progressive Web App (PWA) for your brand or client, you run it through the Lighthouse testing tool, and you get impressive scores across the board. Great, your PWA is ready to go live!
A few weeks later, your boss (or client) sends you a screenshot of a Lighthouse test that they just ran on the PWA – all the scores dropped! What happened??
The Lighthouse tool is a trusted method of testing the quality of a PWA, but creating a high-quality PWA isn’t a set it and forget it process. Continuous Lighthouse testing helps prevent the quality from diminishing over time.
What Causes Diminishing Lighthouse Scores
With multiple developers working on a singular project, it’s important to continuously check and test against all the new code that will be frequently added to your PWA. One software developers new code commit may work well isolated in his own branch, but you never know how that code will behave with the other hundreds of lines of code every other developer on the project is submitting as well.
There are many factors that can change a particular web page’s Lighthouse score. Lighthouse tests audit 5 different categories: Performance, Accessibility, Best Practices, Search Engine Optimization, and Progressive Web Apps.
On the performance audit, Lighthouse checks against the following 6 metrics: First Contentful Paint, Speed Index, Time to Interactive, First Meaningful Paint, First CPU Idle, and Max Potential First Input Delay. Any changes to these metrics will definitely affect your Lighthouse scores against the performance audit.
On the Accessibility audit, Lighthouse checks the accessibility of your web app. Examples of some of these checks include: Image elements have [alt] attributes, <html> element has a [lang] attribute, Document has a <title> element, etc. Any changes that may make your site less accessible will impact your accessibility scores.
On the best practices audit, Lighthouse checks your web pages to ensure they’re following standard best practices for the web. Some examples of these checks include: Avoids deprecated APIs, No browser errors logged to console, Displays images with correct aspect ratios, etc. Changes that result in your web pages not following web best practices will decrease this score.
Search Engine Optimization
Against the search engine optimization audit, Lighthouse will check that your webpages are optimized for search engine result rankings. Examples of some of the audits Lighthouse will do include: Document uses legible font sizes, robots.txt is valid, Document has a <title> element, etc. Missing potential optimizations for search engine result rankings will result in a lower Lighthouse score for this category.
Progressive Web App
Finally, on the Progressive Web Apps audit, Lighthouse will check your web page against a set of criteria which defines PWAs. Google has defined this set of criteria themselves. This particular audit doesn’t give your page a score, but rather a pass or fail depending on whether your page meets the criteria or not. Any changes to your page that cause the web page to no longer follow the baseline PWA criteria will cause this audit to fail.
How to Maintain High Lighthouse Scores
The first step is being aware of what particular actions could raise or drop your Lighthouse scores (see the section above!), and the second is making Lighthouse a core part of your continuous testing process to ensure scores don’t diminish over time.
Mobify’s Front-end as a Service includes a package of testing tools inclusive of Lighthouse called the ‘Mobify Test Framework.’ It allows developers to automatically run Lighthouse tests against every single new code commit so that they’ll be notified if it negatively impacts the Lighthouse score.
Of course, it would be unfair to expect developers using our Front-end as a Service to achieve good Lighthouse scores without providing them with a high starting point, so our starting project scaffold provides high scores across the board.
The Key Takeaway: Test, Test, Test
Optimizing your PWA is a continuous process and Lighthouse is a great tool to point you in the right direction. By running Lighthouse tests against every new code commit – whether manually or through automated testing – you’ll be able to maintain a high-scoring, high-quality PWA that’s fast and engaging.
To learn more about delivering high-performing PWAs, download the Guide to Delivering Commerce Progressive Web Apps.