Performance Optimisation for Shopify

The truth is, yes, it does matter - your site’s performance is a ranking factor for Google search results, so a slow site means you’re less likely to be discovered initially, but even worse, it also affects conversions when someone does visit your site.

The good news is that even very slight improvements can have significant benefits. Just improving the mobile load time by a tiny 0.1 seconds saw conversion rates go up 8.4% and product page bounce rates improve by 5.7% - source: https://www.thinkwithgoogle.com/intl/en-gb/marketing-strategies/app-and-mobile/mobile-page-speed-data/

Already off to a good start

The next bit of good news is that Shopify takes performance very seriously - when they launched their new Online Store 2.0 they constantly referred back to the performance improvements that they’d made behind the scenes. You’ve probably also noticed the Speed Score under the live theme in the Shopify admin so you can keep an eye on how well your site is performing.

A lot of the technical issues that normally slow sites down are taken care of automatically. All of the site’s assets are delivered on Shopify’s CDN (Content Delivery Network) through Cloudflare using HTTP/3 which means that the site assets are cached at thousands of servers and will respond quickly anywhere in the world. All of the files are automatically minified and compressed to make their download times as small as possible. Shopify also uses next generation image formats automatically, so when you upload a standard jpeg image, Shopify will send it to your customer as a ‘webp’ image which means the file size can be a lot smaller without losing any quality in the image.

But we can do better
Although Shopify is handling a lot of the performance aspects behind the scenes, there’s still a lot we can do as theme developers to help the site be even faster. We can intelligently preload assets (and even whole pages) so that they’re ready just when they’re needed. We can determine a range of ideal image sizes so that the browser will request the smallest one possible based on the customer’s screen size. We can affect the order that images load in, so that critical content is rendered quickly and the user can start interacting with the site while secondary content is still being loaded.

Third party apps

There’s no denying it, third party apps are fantastic at extending Shopify’s functionality, but they’re often not optimised for performance. Some make large numbers of additional asset requests, use a slow server for their assets, or even block the rest of the page while loading. As theme developers we can rarely change those issues, but what we could do is evaluate what the app is offering. It might be that an app isn’t even required for that functionality and it could be replaced with changes to the theme code which would be much faster. It might be that the app could be replaced with direct calls to the service’s data rather than having to run through their app.

Can we do better than better?

PWA
PWAs (Progressive Web Apps) have been around a few years now but still not really hit the big time, which is surprising as they’re the perfect hybrid of app and web site - it’s basically an installable website. Customers using an app are 3 times more likely to convert than if using a mobile website - source:
https://blog.branch.io/how-to-drive-mobile-conversions-2019-predictions-from-the-branch-criteo-webinar/ but getting the customer to install the app isn’t always that easy as they’ve got to actively search for it in an app store. It also doubles (or more) your development costs as there’s now a website and app code to create and maintain. A PWA uses the same code as the traditional website but the user can be asked if they’d like to install it. If they choose to, the site is installed as any other app - it’ll appear in the app listing with your branded logo, and open as a distinct app rather than in a browser tab. That’s great for boosting your brand identity as the customer uses the app, but PWAs have a few other tricks up their sleeves - they can store entire pages offline so if the customer moves to an area of poor network coverage, they can still browse products or read your blog articles. They can also use an optimised store for assets so that repeat visits to pages are nearly instant.

AMP
Google launched AMP (Accelerated Mobile Pages) a while back and it saw fast adoption by a lot of news outlets, notably because using this system gave them an instant boost in search engine rankings. The idea behind AMP is to take everything away from the page that isn’t absolutely required - fancy animations and complex interactions are dropped in favour of just getting the core content onto the screen as quickly as possible. So it suited text-heavy news pages very well. But eCommerce sites need those interactions to work, and it took a while for that to be solved.

Now, I have a philosophical objection to AMP as something that is an alternative to web standards (the foundation that all web content is built on) - as opposed to something that is an addition to those standards (like a PWA) however, there’s no denying that it does result in improved SEO ranks, so let’s be pragmatic and see what we can do with them.

While there are apps that will enable AMP pages with Shopify content, they effectively create a second version of the site and that means having to have content that needs to be changed separately. Although I’ve not seen it done in Shopify yet (BigCommerce has it built in), pure AMP pages could be achieved within the main theme code, and that would mean there would be no additional site management, just the automatic benefit of the optimised AMP pages. It wouldn’t be a small undertaking, but it’s definitely something we’ll be looking at developing.

The finish line?

Not quite, sorry. Performance optimisation never really ends. There are always more improvements that can be made, either from our side on the theme development code, or Shopify’s side (which they do continually do). But those small incremental improvements all add up to happier and more engaged customers.

Want to see how Absolute can improve your overall speed and performance on your Shopify site? Get in touch with us today.