Shopify Site Speed

In the world of e-commerce everybody’s doing what they can to get conversions. Stunning product imagery, ads across all socials, SEO optimisations getting you to the top of every search result. However, a key factor that often gets overlooked is keeping your site speed scores high.

Why focus on site speed?

There are major benefits to putting work into site speed optimisation. Google will reward you for being a faster site by ranking you higher in search results. Customers are more likely to convert if they can navigate around your site quickly and bounce rates will drop if your initial landing page appears instantly. Search speed is a key player in user experience optimisation. Better user experience = higher conversion rates.

70% of Consumers Say Page Speed Impacts their Purchasing Decisions
37% of Site Visitors Bounce When Your Site Takes 5+ seconds to Load

How do I know what’s slowing my site down?

Shopify gives its own speed report in your themes, but this is based off of Google’s Lighthouse. To access Lighthouse directly simply go to your site > right click > inspect > hit the arrows on top > Lighthouse. Lighthouse allows you to run a speed test on your site and will point out key elements that are slowing down your website. Let’s breakdown this example Lighthouse report:

Metrics

First Contentful Paint
This is how long it takes for your first page element to load in such as text or image.

Speed Index
How long it takes for content to be visible on the page during page load.

Largest Contentful Paint
Time taken for the largest element to be rendered

Time to Interactive
How long until the user can fully interact with the page

Total Blocking Time
The total time that the user is blocked from interacting with the page

Cumulative Layout Shift
A layout shift is any time that an element in view changes its position between rendered frames. This scores for every unexpected layout shift on page load.

Opportunities

The opportunities section shows suggestions of where you can improve your page load speed. It’s not guaranteed to improve your Lighthouse scores, but it’s a good place to start. In the above example, the drop down lists specific files within the site that could be affecting the page loading speed and gives recommendations on how to fix them.

Diagnostics

Similar to opportunities, diagnostics provides additional improvements related to your site.

What can I do to boost my site’s speed?

Whilst there’s an endless amount of routes to take when speeding up your site, here’s our recommended top 5:

1. Reconsidering your Shopify apps
   Many Shopify apps will require additional files put into your store’s theme, which can be very heavy on your site’s speed. Access whether the functionality is essential to your customer’s experience before adding additional apps to your store. For apps you do have, disable any features within the app settings that you do not plan to use.
   
   
2. Optimise your images
   There’s a few things you can do when it comes to adding images and video to your site:
   • Lazy load your images. Lazy loading means that images will not be loaded until they are needed, increasing initial page load time as it’s not spending time on images that are below your viewpoint. You’ll need the help of a developer for this!
   • Compress your images
   • Use a fit-for-purpose image file format
   • Resize your images
     
     
3. Defer your scripts and CSS
   This will require a developer to go into your site’s theme. A lot of these larger files can be render blocking and therefore slow down your initial page load. By deferring these files, they will be loaded after the initial page load.
   
   
4. Use Google Tag Manager
   Google Tag Manager (GTM) is a way to streamline all your different tracking scripts into one platform. Whether it’s your Facebook pixel, Google Analytics or Google Ads you can run all of your tracking through one script, rather than individual scripts for every platform. This will speed up your page by only needing to fire the single script.
   
   For setting up Google Tag Manager, we recommend Elevar. Elevar provides a 95% conversion accuracy for your purchase data. Contact us here for more assistance in setting up accurate tracking as Elevar partners.
   
   
5. Limit hero image sliders
   Whilst these are very popular across e-commerce sites, pulling in multiple high-quality images at once can impact your site speed. This is due to hero sliders requiring such large image files to retain their quality.

Research shows that when a hero slider is clicked on, the majority of the time it’s from the image in the first position. Most of the time, a user won’t even see the other content within the slider that’s taken that extra time to load.

---

Emma Stolliday is Development Lead at G&V. For more information on how we can help your brand grow through eCommerce design and development please get in touch via our contact page.