How to improve your Shopify store’s Google Lighthouse score

If you’re concerned about your Google Lighthouse score, but don’t know where to start, we’ve got you covered. In this post we discuss: 

• How Lighthouse improves web page quality by providing audits for site speed, accessibility, SEO, and more.
• What to do If you are experiencing site speed problems. Likely there are underlying issues that are creating tech debt.
• Why plugins, servers, and libraries such as javascript should be up to date.
• How images can slow your speed significantly.
• Why you should always document what you’ve done. This will alleviate future headaches and simplify problem identification.

What is a Google Lighthouse score? 

A mid-market e-commerce retail company came to Assemble concerned about their Google Lighthouse score. Lighthouse is Google’s open-source, automated tool designed to improve the quality of web pages. It provides audits for a number of things including site speed, accessibility, SEO, and more. Our client’s Lighthouse score averaged around 18, and was dropping, causing concern. Our client also noticed an increase in customer complaints. We were immediately intrigued by their loyal customer following who cared enough to raise the alarm. We wanted to find a way to improve their customers’ experience by improving our client’s site, helping our client meet their sales goals. 

Website conversion rates drop by an average of 4.42% with each additional second of load time between seconds 0-5. 

Not your typical Shopify dev solution

At Assemble, we approach projects holistically. Instead of finding a new plugin to fix the obvious problem, we took a look under the hood to see why things weren’t working. We discovered that it wasn’t one error or a single bad decision that led to the problems our client was experiencing, but rather two years of tiny decisions that added up to a sizable amount of tech debt. 

Prioritizing fixes

When it comes to addressing tech debt it can feel overwhelming. That’s why we take the time to do an Assemble Website Audit, uncovering what’s working and what’s not. From there, we create an Everyday Retail Blueprint. The blueprint outlines a way forward that prioritizes solutions based on their impact and the customer’s goals and budget. This plan helps us know what to fix today while creating a scalable solution for tomorrow. 

Is your javascript up-to-date?

We discovered a lot of the libraries were outdated. Additionally, many of the plugins and services had been installed by third-party developers and not documented. The results were things like extra pixels, which were actually failing and contributing to the site’s slow speed. 

Choose your agency partners wisely

In the developer world, there’s something called documentation. This is a standard practice where developers document changes they’ve made in the code. This allows anyone to come in and immediately know the current state, what’s been added, and why. When developers fail to do this, it results in a lot of heavy lifting and sifting through code to find broken elements. So, be very careful who you allow to work on your Shopify code and insist that they document their work. This will save you time in the long run. 

Don’t use anti-flicker libraries

We also found an immediate fix was to remove an anti-flicker library they’d installed for A/B testing. This tool slows a page’s load time by an order of magnitude of 4secs down to 900 milliseconds. If you’re using this library, stop! It does a lot more harm than good. 

Image optimization is about size, not compression

One of the biggest contributors to slow site speed is loading images, and while many people compress their images it’s actually important to also resize your images for the web. Think of it like this: if you take a dump truck and fill it with coffee, it will be full and weigh three tons. But when you remove the coffee, the dump trunk will still weigh three tons. You actually need to shrink the dump trunk. When you take the time to not only compress but also resize photos, this has a huge positive impact on Lighthouse scores. 

Don’t do everything

Some things take a lot of effort and don’t produce great results. And honestly, it’s just not worth doing them. For example, there’s a deprecated command in Shopify. The fix is high-effort. But fixing it doesn’t change anything, so while it does contribute to tech debt, the cost of the debt is very low. Sometimes it’s okay to just let it be, but those sorts of decisions should be made by your technical advisor.  

The result 

These initial improvements we made for our client improved their Lighthouse score from an average of 18 to 44. These “quick fixes” allowed us to triage the site. From there, we could return to the Everyday Retail Blueprint and decide our next steps together. 

Need help? 

If you’re concerned about your Google Lighthouse score, but don’t know where to start we’re here to help. You can sign up for your own Everyday Retail Blueprint, and get a custom technical assessment that provides a prioritized plan to repair and improve your Google Lighthouse score.