How to load your Shopify website faster on mobile? ⚑️

Here are some tips you can follow to improve speed on your Shopify store. I'll be focusing on mobile enhancements and you'll understand why in a few lines.

by Arthur Bonnecarrere
Founder @ once.app
04/05/2021

If you're thinking about improving conversion rates for your Shopify store, you might have looked into improving the User eXperience (UX).

While it's always a good idea to approach the issue from this side of the prism, improving user experience is pointless without basic site optimization. Load time, for instance, is the absolute first thing that should require your attention. Customers won't even reach the shopping UX if they bounce on a slow page.

Here are some tips you can follow to improve speed on your Shopify store. I'll be focusing on mobile enhancements and you'll understand why in a few lines.

Why are loading performances so important on mobile?

Mobile dominates e-commerce traffic. While mobile only accounted for 50% of all e-commerce traffic 5 years ago, it now reaches close to 4/5th.

On top of that, mobile-commerce is forecasted to account for more than 70% of all eCommerce sales by the end of 2021, according to a report from Statista.

With the rapid increase of mobile usage, loading performances on mobile becomes an increasingly important issue. Hence the need for your attention. In fact, some research has shown that more than half of consumers will bounce from your store if it takes more than 3 seconds to load. And that's not it; higher loading performances will obviously boost conversion rates, but also improve ad viewability and extend sessions duration for instance.

After running hundreds of performance reports on a selection of stores, I found that the 'Lighthouse' (Google page insights tool) overall performance score averages around 30%, which reflects poor loading times - among other things.

So before jumping into 'how' you could improve the outlined problem, let me just highlight some great tools to track site loading performances.

What should you be tracking?

Great tracking and measuring of your website performances will help you decrease loading times and understand where issues come from.

So you might have seen Shopify's new feature 'Online store speed', which relies on Page Speed insights (from Google), you can also use other tools like GTmetrix but there's no actual benefit of using the latter one. So let's pick the same one as it's pretty standard.

First, you need to understand the different metrics Google uses to measure your performance:

First Paint

First Paint reports the time when the browser first rendered after navigation. This excludes the default background paint, but includes non-default background paint.

First Contentful Paint

First contentful paint marks the time at which the first text or image is painted - (This means the time it takes to actually see some part of an image/some text on the screen)

Largest Contentful Paint

First contentful paint marks the time at which the first text or image is painted - (This means the time it takes to actually see some part of an image or some text on the screen)

Time to Interactive

Time to interactive is the amount of time it takes for the page to become fully interactive - (Fully interactive means the user can tap, scroll, click...)

Total Blocking Time

Sum of all time periods between First Contentful Paint and Time to Interactive

Speed Index

Speed Index shows how quickly the contents of a page are visibly populated

Cumulative Layout Shift

Cumulative layout shift measures the movement of visible elements within the viewport - (This means that while your page is loading, your content should remain at the same place, a bad scenario would be an image that loads and push some already visible text out of the screen)

It is important to look at your score break-down so you can focus on improving each point to increase the overall score.

Some of these terms might seem technical, let's dig into how you could take actionnable measures.

How to improve mobile loading performances for your store

Here's a list of improvements and the related aspects / metrics it would improve:

1 β€” Media optimisation

There are three different ways to look at media optimisation. The first one is image compression, which you can easily find apps for on Shopify: Tiny Image or Crush Pics are the most popular ones.

The second one is GIF optimisation. This format is usually heavy and needs to be converted into video. There's no Shopify app to do so but some online tools like ezgif would do the trick.

The last one is font optimisation, you surely have a custom font on your website and by the time it's done loading, it will probably result in text flashes. To ensure texts remain visible during and while loading, you need a fallback system with a font always available in your CSS rules (this might be a bit technical if you're a store owner)

These three optimisations will improve :
- First Contentful Paint
- Largest Contentful Paint
- Total Blocking Time.

2β€” AMP, Accelerated Mobile Pages

The AMP project (originally stood for Accelerated Mobile Pages) is an open-source framework developed with a mission to provide a user-first format for web content. This means having an instant loading experience for your website. You can easily build AMP pages using apps like Ampify Me.
‍

‍
The main benefit of using AMP is their instant page load on Google Search and their library of ready components to be used for building your store (buttons, images carousel..). In a search, Google detects the AMP format and preloads the content before a click on the link occurs. This was true for AMP pages only, until Google announced recently that they are opening up their instant loading on Google Search to any fast loading websites. This is a major change that would remove the unfair advantage AMP has had until now. The other benefits of using their pre-built library of components are not worth the time.

3β€” PWA, Progressive Web App

I'll stick to the official definition for this one:

Progressive Web Apps are web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a platform-specific application.

What this really means for your store is that someone will have the ability to download your website as an App and browse while offline.
‍
You have apps like Superchargify, that are landing page builders - running on AMP, and will transform the newly built pages into PWA ready-ones, but not the rest of your shop, unfortunately.
‍
If you want all your product pages to be a Progressive Web App, you can ask your developer, a Shopify Expert, or have a look at one of our apps, the Product Page Template, which comes as a turnkey solution.
‍
PWA imposes some technical constraints which will inevitably improve your overall performance score, even though it's separated in the report.

4 β€” Engineering optimisation

Last but not least, Engineering optimisation. This one is a bit tricky because you can't control this unless you run your website with your own backend i.e your own technology.
‍
As a platform Shopify makes sure keep up with those topics (latest framework and best practices). This includes Content Delivery Network, Local Browser Cache, or Server Side Rendering.
‍
I won't go into details here as it's a bit out of scope and if like many, you can't control these factors of impact. But bear in mind that whenever you use landing page builders, they usually have their own infrastructure and thus it impacts the overall performance score.

So make sure to double-check these pages' performance scores when you use one of these apps. If you happen to use our Product Page Template App, you probably saw that we're 100% transparent when it comes to the performance score, so you understand clearly how it impacts your shop.

Conclusion

The e-commerce ecosystem is constantly evolving. Mobile traffic is the only traffic you should pay attention to and most of new technologies are developed toward improving loading performances to offer the best in-class experience.

While there are factors you can't really control unless you have a custom store and a team of developers, there are some that will directly improve your store performance.

Get Started with Once

Mobile optimized
storefronts

Get Started Now