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 some of the frequently asked questions that go through our heads when we think about the perfomance of the Shopify themes.
To help with these issues, we’ll teach you how to use a very powerful tool developed by Google.
Lighthouse is a free (open-source) automated tool for improving the performance, quality, and correctness of your web sites and web apps.
When auditing a Shopify Theme, Lighthouse runs a lot of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can to improve. The report also show 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 to 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 Lighthouse extension from this link;
- Next, open your site and click on the Lighthouse icon
- On the popover, click on Generate Report;
- Grab a cup of coffee and wait the result 🙂
Analyzing the result
The first part is the Progressive Web App area. With these value on 100 your theme has able to show the PWA install banner for the user (see more).
Lighthouse test your theme at various network speeds (including 3G/4G mobile connections) and measure the time when the primary content of a page is visible, the first meaningful paint and the point at which most network resources have finished loading and if the device is idle for a prolonged period. Also, you get a perceptual speed index result and a estimated input latency.
These are opportunities to speed up your Shopify theme by optimizing resources like properly size images.
Accessibility & Best Practices
On the accessibility area the plugin show the result if the color contrast is satisfactory, elements use attributes correctly, meta tags are used properly and more (learn more about Accessibility).
Best practices is a compiled of some recommendations for modernizing your Shopify theme and avoiding performance pitfalls. These audits do not affect your progressive web app score, but are a worth a look.
Use with no moderation and keep testing. Installing new apps, and theme updates can alter your score.
Comment your discoveries with this tool. 🙂