How to Understand (And Improve) Your Shopify Website’s Google Lighthouse Score

October 7, 2021

615cd7c848aaeb11226b899b FE How to Understand And Improve Your Shopify Websites Google Lighthouse Score shopify google lighthouse score

When was the last time you checked your ecommerce store’s Google Lighthouse score? If you’ve made significant changes to your site—or haven’t given it a good look in a while—it may be time to check again.

Your Google Lighthouse Score is the rating Google gives your site based on performance (speed), accessibility, SEO, and best practices.

And while site speed has always been important to your shopping experience, it’s now critical for being discovered. An important Google update rolled out in August 2021 puts site speed as a top factor for ranking well in search.

As a steward of your store’s brand, you need to understand what your Google Lighthouse Score is, means, and how to improve it. Because a low score affects your search positions, meaning customers are less likely to find your store, let alone make purchases.

Further, as you differentiate your brand experience, you need to make sure you’re not inadvertently hurting your store’s site performance, as this can negatively impact conversions.

Today we’ll get into diagnosing your store’s condition and things you can improve.

#cta-visual-fe#<cta-title>10x Your site performance on Shopify with Shogun Frontend<cta-title>See if an all-in-one Frontend Platform is right for your brand.Learn more

Get to know your Google Lighthouse Score

Your Google Lighthouse Score is a representation of how good (or bad) your customers’ online shopping experience may be.

A low score suggests your customers are getting a poor experience on your site because it’s slow to load, doesn’t meet accessibility standards, and is difficult to discover because it’s not optimized for search—or delivers a poor page-to-page experience.

But even small changes can make a big difference to your score and, ultimately, how customers shop with you.

In fact, focusing on speeding up your page load times by just 0.1 seconds has been shown to increase conversion rates by 8.4% for retail sites.

So here’s what you need to know about your score:

Check your Lighthouse score

Google shows you several ways to check your Lighthouse score. To check the score for individual web pages, you can use Chrome DevTools:

  • Visit the URL you want to check
  • Open Chrome DevTools and click on the Audits tab
  • Click on ‘Perform an Audit’
  • After around 60 seconds, you should see your Lighthouse report on the page.

You can also check your Lighthouse score in the command line or as a Node module.

Alternatively, you can check your Lighthouse score in your Shopify admin panel. Your speed report looks at how your store performs in Shopify’s test environment and gives you a score based on Google Lighthouse Score’s performance metrics.

615cd83896f7705d55746dc4 Screen20Shot202021 09 3020at209.58.2520AM shopify google lighthouse score
615cd84c2bbbb847b13aa833 Screen20Shot202021 09 3020at209.58.4020AM shopify google lighthouse score

In Shopify, your Lighthouse score is calculated once per day, so if you make changes to improve your site’s performance, they won’t immediately affect your score. You may even find that some changes won’t affect your score for several days.

However, if you’re making lots of changes to your site—like adding lots of new products or changing how you categorize items in your store—it’s important to check back regularly to make sure these changes aren’t negatively affecting the customer experience.

But it’s best to focus on how your Lighthouse score changes over time, looking at the trend rather than a one-off score.

#cta-mini-fe#Find out if your store is a good fit for headless commerce.Take the quiz

Understand your Lighthouse Score

Your score with Google Lighthouse is a weighted average of several performance metrics based on how your site appears to visitors. Your performance score will be between 0 and 100, with higher scores being better. Scores are color-coded:

  • 0 – 49 (red): Poor
  • 50 – 89 (orange): Needs improvement
  • 90 – 100 (green): Good
615cd86c123140010f3fb043 Screen20Shot202021 09 2920at2012.17.4120PM shopify google lighthouse score

While you want to improve (or maintain, if you’re already scoring between 90 and 100) your Lighthouse score, sometimes you might see unexpected changes. There are several reasons why your Lighthouse score fluctuates:

  • You made changes to your Shopify site, like importing new products, creating new collections, or changing your theme.
  • You ran tests on a different device, such as a high-performance laptop compared with a low-performance tablet.
  • You used a different browser, because browsers have different processes for how they load web pages.
  • Different ads are being served on your site.
  • Or if you’ve got different browser extensions running, particularly if they inject JavaScript and add or modify network requests.

#cta-paragraph-fe#We’ve given you a quick overview of why your score might change, but if you want to learn about score variability in more detail, the Google Lighthouse team provides an in-depth explanation on GitHub.

3 Ways to improve your Google Lighthouse Score

A bunch of oranges or reds in your Lighthouse score indicate you’ve got some work to do. Here are some changes you can make to your ecommerce store to improve performance and boost your score, so ideally, you’ll start seeing greens—and those sweet high 90s!—across the board.

1. Improve site load speed via compression and manual fixes

Page speed is a core component of your Lighthouse score, so it’s essential that all pages on your site load quickly—whether it’s a simple form on your contact page or one of the main pages in your product catalog.

Some things you can do to decrease sluggish page load times include:

Compress photo and video sizes

One of the metrics that make up your Google Lighthouse Score is Largest Contentful Paint, which measures how long it takes for the main block of content on the page to load.

The main content could be an image, video, or text. So make sure you optimize all your photos and videos as much as possible to still provide a visually engaging storefront without compromising on page load times.

Enable lazy loading

This helps cut down your overall page load times because instead of loading all images and visual assets instantly, your site only loads them when they become visible to the user.

Rather than loading all your product images as soon as a customer navigates to your store, they load one by one as the user scrolls down the page and more products come into view.

You can enable this in your Shopify store by enabling browser-level lazy loading (which may not be supported by all browsers) or adding lazy loading to your store’s theme.

615cd8b1cbe08e6319f0e78a lazy20loading shopify google lighthouse score

Minimize plugins

Each new plugin and feature you add to your site is one more thing that takes time to load.

Adding new plugins or features can have a noticeable effect on the load time of your store. And while it’s great to be able to customize and personalize your site, we recommend periodically reviewing all the plugins to see if you need them all or if there are any you can switch off.

Bonus: Implement headless commerce with a Progressive Web App (PWA)

Getting into the habit of making the changes above will help to improve your site speed. But as your brand scales, you may find that these small, manual changes don’t deliver the speed improvements you need.

At this point, you’ll likely want to explore the option of a headless commerce solution via a Progressive Web App. Headless commerce decouples the frontend of your website from the backend.

This means you get more flexibility to create a unique customer experience while keeping the ecommerce functionality in the backend.

Many brands explore this option because implementing a PWA can give your site unparalleled load times from page to page. PWAs request information from servers in small chunks rather than all at once, so the amount of data needed to load the site on repeat visits is vastly reduced.

#cta-visual-fe#<cta-title>Improve page-to-page load time and conversions<cta-title>See if an all-in-one Frontend Platform is right for your brand.Learn more

2. Make sure your site is accessible

Lighthouse also measures accessibility—which means making sure your site can be used by as many people as possible, including those with impaired vision or hearing, motor difficulties, and cognitive impairments or learning disabilities.

According to Wix, an accessible website has the following key elements: “keyboard-friendly navigation, sufficient color contrasts to ease site legibility, clearly labeled forms, image alt text, video and audio transcripts, and hierarchical headings that are clear and simple.”

Google Lighthouse assesses accessibility as a pass/fail for the different components rather than a sliding scale. Different accessibility components have a different weighting on your score, so here are some of the most impactful changes you can make:

  • Give all images alt attributes
  • Give all buttons accessible names
  • Give all form fields specific labels
  • Add captions/descriptions to audio and video content.

Unfortunately, 98% of sites fail to comply with accessibility requirements and don’t meet the standards set out in the Web Content Accessibility Guidelines (WCAG). Making your Shopify site more accessible can set your store apart from your competitors, give a better experience for all your users, and improve your Lighthouse score.

3. Optimize for mobile

In Shopify, Lighthouse reports are run on the mobile version of your website because 60% of sales made on Shopify stores are from mobile devices. Here are some specific changes you can make to further improve your site performance:

  • Run your Lighthouse tests on the mobile rather than the desktop version of your site.
  • Avoid using pop-ups on your mobile site. Pop-ups can be difficult for store visitors to dismiss on smaller devices. If they’re stuck seeing a banner asking them to subscribe to your site rather than being able to browse your products, it’s likely they’ll simply navigate away from your site instead.
  • Make buttons easily clickable. This could mean implementing larger button sizes on your mobile site or changing the site layout so that buttons have more space around them.

Thankfully, many of the changes you make to improve your site load speed—like minimizing video and image sizes and enabling lazy loading—will also improve performance on mobile.

Use Shogun Frontend for headless commerce and improve your Google Lighthouse speed score

One of the best ways to improve or maintain an amazing Google Lighthouse Score is to speed up your site. For ecommerce sites, headless commerce can help brands create a shop that’s fast, flexible, and easy to change as you need to.

Shogun Frontend is an all-in-one frontend platform that gives ecommerce brands unparalleled customization and loading times for their Shopify stores.

#cta-visual-fe#<cta-title>Improve page-to-page load time and conversions<cta-title>See if an all-in-one Frontend Platform is right for your brand.Learn more‍‍‍

The Shogun Team

Shogun's team is full of whipsmart ecommerce experts, dedicated to making the process of building and customizing your Shopify store simpler, faster, and more intuitive.

The latest ecomm tips sent to your inbox

share this post

You might also like

Advanced Multi-store Discounts

[go_pricing id="pba-discounts"]

We use cookies to store data for analytics, marketing and personalization to give you a better experience while visiting our website. By remaining on this website, you indicate your consent.
We use cookies to store data for analytics, marketing and personalization to give you a better experience while visiting our website. By remaining on this website, you indicate your consent.

Cookie Settings is not available. Cookie Consent is disabled or is just disabled for your country.