Quick tip: How to Audit Shopify Themes Performance with Google Lighthouse
A guest article by the Litefy team, a Shopify app which instantly turns any Shopify store into a Progressive Web App.
Posted 6 years ago by Jonathan Kennedy
Table of Contents:
It is always important to audit the speed of Shopify themes, especially for different connection types and devices. The low performance of your eCommerce can directly impact your conversions.
According to Google, 53% of users leave a website that takes more than 3 seconds to load (Source: Google Developers). But have you ever wondered how difficult it is to do a performance test on websites?
Often the problem goes far beyond a bad connection. A number of plugins that some websites load can make the experience worse on mobile and often desktop. This may raise the Bounce Rate of your Google Analytics.
We’ll teach in this article how to measure and improve the performance of Shopify themes with the free Google Lighthouse tool.
The good news is that there are great tools on the market to do these reviews, and one of them is the Google Lighthouse, and it’s free!
Google Lighthouse runs a series of automated tests on your site, takes an average of 2 minutes, and at the end, it displays a complete, detailed report.
One of the most valuable information in this report is the insight about all the improvements. Suggestions will help your developer identify the caveats on your theme. Many of the actions are simple and can be done in quick tasks by you or your developer.
How to test a Shopify Theme
The most anticipated (and often feared) moment has come.
The first step is to install the tool and then follow the tutorial in the video:
Analyzing the result
The first part is the Progressive Web App area. With this value between 80-100, your theme has been able to show the PWA install banner to the user.
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 the CPU is idle for a prolonged period. Also, you get a perceptual speed index result and, of course, an estimated input latency.
These are opportunities to speed up your Shopify theme by optimizing resources like, for example, properly size images!
The best insights to improve the speed of your Shopify theme are here. Show this result for your developer.
Accessibility & Best Practices
On the accessibility area you can check if the color contrast is acceptable, correct use of elements, attributes, Meta tags and more (learn more about Accessibility).
Best practice section is a compilation of some recommendations for modernizing your Shopify theme and avoiding performance pitfalls. These audits do not affect your progressive web app score, but it is sheared worthy of your time!
The results we looked at above show how Lighthouse can be the Shopify theme best friend. In addition, test on real devices that are similar to the target audience of your business.
Comment your discoveries and share your score with this tool.