Fix your Shopify store speed issues. You know you have them!

As a technical agency we get a lot of speed optimisation work come our way. Whilst we’re big fans of Shopify and a committed Shopify Partner that works with a lot of high end Shopify stores. A common pattern we find with Shopify stores is around it’s performance, which is typically isolated to three main areas.

  1. JavaScript
  2. Image handling
  3. Coding practices

Let’s drive into this a bit deeper.

JavaScript

I’ve got two words to summarise this point: “Shopify Apps”. Functionality can come at a high price. Take a quick look at your installed apps and if you’re in the double digits it’s likely that you’re serving up a ton of separate JavaScript files.

You might ask what’s wrong with that? Two main things:

  1. Each JavaScript file could be way over 100kb in size totalling up and over 2MB of additional code loading into your pages.
  2. They may be hosted on an external server, causing large network payloads and increased DNS requests.

Image handling

Shopify has a great feature that automatically converts your images to WebP format which has a huge benefit in image file size. However, the caveat to this is that certain browsers including Safari on MacOS and it’s iOS counterpart don’t currently support it. You need to make sure that your image filesizes are small and compressed before uploading them, ideally to ensure you haven’t got a massive file still being served on Apple devices. You might find a hidden conversion killer on these devices otherwise, so don’t be fooled. 

Use the correct image format for the right use. Photos should typically be JPG, graphics PNG and icons or outlined content SVGs. Have a documented process in place for uploading new product images to the store to ensure you’re not uploading big PNG files.

Lastly, be sure to also be lazy loading your images.

Coding practices

Most of this stuff will be a bit more technical and behind the scenes, so I wont go into great detail.

  • Avoid hosting fonts and resources remotely.
  • Image dimensions and formats not specified (large images provided in an icon’s space for example).
  • Defer non-essential scripts if possible.
  • Make sure your JavaScript isn’t throwing errors.
  • Use conditions to only load what you need and where you need it. E.g. Don’t load every bit of code on every page. 
  • Use Google Tag Manager to handle your marketing and tracking JavaScript snippets both conditionally and asynchronously.

Tip: Get familiar with what core devices and browsers your website is most commonly loaded on via Google Analytics, because if you do have heavyweight images being loaded on Safari as mentioned above you’ll be able to quantify the impact it’s having on your site.

Google Analytics Reports

  1. Navigate to Audience > Technology > Browser & OS to identify the most common browsers used to view your website.
  2. Navigate to Behaviour > Site Speed > Page Timings to get a breakdown of speed per page. You can also layer in a Secondary dimension of Browser to this report for further analysis. 

Most stores will have an item in one of these areas holding it back. Just remember it’s the little hinges that swing big doors that make the difference.

Get in touch to find out which of the three areas is holding back your store’s performance!

If you’re not using Shopify yet, then check out what Shopify can do for your business!

Read some more interesting stuff.