Shopify Theme Performance Audit with Google Lighthouse
“Is my Shopify Theme fast enough? Is eight seconds a good time to load my site on mobile?”
These are just some of the frequently questions that go through a merchant’s mind when thinking about the performance of their Shopify themes.
To help with these issues, we’ll teach you how to use a very powerful tool developed by Google.
You don’t need to be a developer to use it!
Lighthouse is a free (open-source) automated tool for improving the performance, quality, and use of best-practices used for your web sites and web apps.
When auditing a Shopify Theme, Lighthouse runs many tests against each page and then generates a report on how well the page did. From there, you can use the failed tests as indicators on what you can do to make improvements. The report also shows if your theme is a Progressive Web App or not (how to upgrade your theme into a PWA).
How to audit my store?
The process to audit your theme is quite simple. Just follow the instructions below.
Newer Google Chrome Versions
Lighthouse is integrated into the newer versions of Google Chrome.
Old Google Chrome Versions
You can also use Lighthouse as a Chrome extension, check it out:
- On Google Chrome, open and install the Lighthouse extension from this link;
- Next, open your site and click the Lighthouse icon
- Within the modal window, click on Generate Report;
- Grab a cup of coffee and wait the result 🙂
Analyzing the results
The first part is the Progressive Web App area. With a value of 70+, your theme has ability to show the PWA install banner for the user (see more).
Lighthouse tests your theme at various network speeds (including 3G/4G mobile connections) and measures the time until the primary content of a given page is visible. The first meaningful “paint” and the point at which most network resources have finished loading. Also, you get a perceptual speed index result and an estimated input latency.
Accessibility & Best Practices
On the accessibility area of the plugin you will find results indicated by color. You will also find out if elements are using attributes correctly and whether or not meta tags are used properly as well as much, more. (learn more about Accessibility). All of this information can be passed to your developer in a simple report for implementation.
Best Practices is a compiled list of some Google recommendations for modernizing your Shopify theme and avoiding performance pitfalls. These audits do not affect your progressive web app score, but are worth a look.
Use this tool as often as possible when testing the front-end of your store. Especially after installing new apps, and theme updates, which can drastically alter your score.
Leave a comment about your results and experience with this tool below. 🙂
App on the videos: