Shopify websites are inherently prone to slower loading speeds.

Unoptimized themes, slow third-party apps, errors in custom code and inefficient image uploads are all areas that might be hindering your website’s page load speed.

When it comes to SEO, Shopify store owners tend to focus on the meat of the problem: backlinks, content updates, on-page optimizations, you name it. But speed is rarely—if ever—considered.

No time to read the whole post?

Download this page speed actionable checklist and start working on improving your load time right away!

Page speed can have a critical impact on your customer experience. In a study, Akamai found that a 2 second delay on mobile decreased conversions by 26%, and negatively affected session length and bounce rate.

akamai page speed conversion rates

It’s no wonder Google cares a lot about your website’s loading speed. It affects your User Experience, and is therefore a direct ranking factor for your SEO.

If beating your competitors’ SEO is your objective for this year, page speed is one area that can easily be improved and set you apart.

There are several things you can do today to increase the speed of your Shopify store.

I’ve recently worked on improving the loading speed of a client’s Shopify website—bringing his Google Pagespeed Insights score from an “average” (~65) to “fast” (~90+) score:

before / after optimization PSI score

Average load time was decreased to 800ms… establishing a much better User Experience for all of his prospective customers.

page speed results

And this resulted in steadily increasing keyword rankings and clicks across the board.

shopify speed increase rankings

In this post, I will outline the steps I took along the way to make this happen—so that you can replicate these results for your own Shopify store.

Without further ado, let’s get this started!

1. Assess the situation

Before optimizing your website speed, you need to assess exactly what is slowing it down. Not every Shopify website is born equal, and whereas your neighbor’s problem might be script size, yours might be image optimization.

There are several tools that can help you here: my favorite two are Google Pagespeed Insights and GTmetrix.com.

Both pages contain enough information for you to be able to put a finger on what the main problems might be—even if you’re not technically fluent. GTmetrix in particular, with the “What’s this mean?” button, does a great job at explaining how you can fix specific page speed problems:

gtmetrix pagespeed explanations

For the sake of simplicity, I will write a section for every single speed issue I’ve encountered on my client’s site and go over the easiest and fastest way to fix them, in layman terms.

Every section will be given a title that describes a specific pain point of your site’s loading speed. For example, if Google PageSpeed Insights tells you that your website has an extremely long Time To Interactive (TTI) metric, you can directly scroll down to section 2 of this blog post 🙂

2. Common problem #1: Long Time to Interactive (TTI)

Is Google asking you to “Minimize main-thread work” or “Reduce Javascript execution time”?

Let me guess: if Time To Interactive is one of your main page speed issues, you are probably looking to increase your mobile loading speed. Here’s why: in most cases, TTI is influenced by JavaScript scripts. Which means that when loading a page, your device has to read and compute however much JavaScript code is on your website.

Nowadays, our desktop computers have immense processing power and can read these scripts incredibly fast. Our small mobile phones… not so much.

Just compare how much faster my client’s website loads on desktop (compared to mobile):

tti desktop vs mobile

Ideally, you want your TTI speed to be 2.2 seconds. Then, you’ll be in the green (for that metric) on Google Pagespeed Insights.

This results in not only better Google rankings, but also happier visitors. Indeed, according to a Google study, 53% of people will abandon a mobile site if it takes more than three seconds to load. It is therefore not surprising that User Experience and SEO go hand in hand!

So how do you go about fixing this?

Easy: remove all JavaScript you don’t need… and delay the rest.

You don’t want to overburden your users with lines and lines of code execution when they visit your website for the first time. Consider the “Diagnostics” section of Google Pagespeed to check out what part of your script is taking the most time (in my case, Script Evaluation takes over 3 seconds of loading time!).

main thread evaluation

A bit further down the page, under “Reduce Javascript execution time”, you will see exactly which files are causing the most trouble.

javascript loading times

Let’s take assets/bc-sf-filter-lib.js as an example of a script that could be optimized. It takes a total of 235ms to load. With a bit of research, I found out that this script is from an app that allows my client to sort and filter product collections, for a seamless shopping experience.

Can I remove this Javascript?

Well, no. At least not completely: I can’t uninstall the app, as it is one of the main features on the website and I can’t sacrifice “quality of life” for “speed”. But I can, at least, prevent it from being loaded on all pages that are not making use of the library anyway.

If you head over to your Shopify admin, under “Online Store” > “Themes”, then “Edit code” under the “Actions” menu of your theme page, you will be able to access and modify your theme’s code.

shopify themes editor

A word of caution:

Before you change anything, I suggest duplicating your theme so nothing gets lost if you somehow break it entirely!

Now, we must find where the script that is slowing down your website is loading. In most situations, you will find it under your theme.liquid file. Search for the script or library name, and see what is returned:

finding shopify scripts

In my case, it looks like the script is being loaded in the <head> tag, for every single page of my client’s website.

This is not ideal: the homepage does not need filters, since no product is displayed there. Likewise for the blog, contact, and details pages…

So instead, I’ll change the code so that the script only loads on “collection” pages—the intended purpose!

shopify script editing

And just like that, we’ve removed a “useless” script from 90% of the website, greatly improving the speed at which those pages load (especially on mobile)—and gained some Pagespeed score!

I suggest going over the list of scripts, singling out the ones that take a long time to load, and ask yourself whether they are worth keeping. If they are, make sure you load only what’s absolutely necessary.

If you can’t remove a script, you can try deferring it instead.

What does this mean?

When your browser loads a website page and encounters a <script> tag, it will momentarily stop loading the page to fetch and execute the script, as demonstrated in this image:

script tag default execution

(Image courtesy of https://bitsofco.de/async-vs-defer/)

If you add the defer attribute to your <script> tag, script fetching will occur at the same time as the HTML is being parsed, but script execution will only occur after your HTML has loaded entirely.

script tag defer execution

(Image courtesy of https://bitsofco.de/async-vs-defer/)

In some cases, depending on the app or script in question and where it is located on your page, deferring the script might screw with your page’s layout—so after implementing defer, make sure that everything still loads properly (and ideally, faster than before).

I recommend reading the bitsofcode article about async vs. defer for more information about how it works.

To implement a defer or async attribute with Shopify, go to the section where the script is loaded (most likely under theme.liquid again), and simply add the word defer or async to your <script> tag, like so:

defer script shopify

I do not recommend using async or defer unless you are certain of what you’re doing.

3. Common problem #2: Ensure text remains visible during webfront load

Another common issue with Shopify stores is the amount of different fonts they use.

If these fonts are custom (not installed “by default” on your visitor’s device), they must be downloaded and rendered to the user before the page is considered “fully loaded”.

There are two ways to approach the issue:

1. Stop using custom fonts (severely limiting your options);

2. Load the page with default font for a few milliseconds for a faster load time, then swapping to the custom font once your browser has finished downloading it. This is known as FOUT (flash of unstyled text).

The second option is most likely what you’d rather go for, and is commonly known as the font-display: swap property.

If you are using many different fonts, you can easily save between 50 and 200ms of loading time:

fonts loading time

So how do you do this in Shopify?

We are once again up for some code editing. Head over to your Shopify admin, and in the theme editor, search for your main .scss file, probably called something like styles.scss.liquid.

In this file, try to find the “font-face” attribute that applies to your entire website. It should look like this:

font face attribute

Simply add the line font-display: swap; and you’re done!

font face display swap

Depending on your theme, your “font-face” attribute might be displayed in another section and/or other files in your Theme editor. It may also be using the liquid variable font_face instead of pure CSS, like so:

font face liquid variable

If that is the case, simply replace font_face to font_face: font_display: ‘swap’ to implement the swap attribute.

font face liquid variable swap

If you have installed custom apps that use custom CSS, or if Pagespeed Insight still shows a warning after applying these changes, make sure you go over other CSS files that might be using the font_face attribute—and apply the same changes.

4. Common problem #3: Avoid an excessive DOM size

Shopify themes tend to be a little complex.

The focus is on wooing the shopper with fancy animations, sliders, banners and buttons. This is not a bad thing per se: an online store should be just like a brick-and-mortar retail store and provide an outstanding customer experience.

But too often, purpose gets lost in the process. Yes, your online user experience should feel good, but also should feel fast.

So what is the DOM, and what does it have to do with this?

DOM stands for Document Object Model (your web page). Google recommends that any web page have no more than 1500 nodes, be no more than 32 nested levels deep, or have any parent node that has more than 60 child nodes.

render tree construction

(Image courtesy of https://wpspeedmatters.com/reduce-dom-size-in-wordpress/)

Lots of technicalities here—honestly, you shouldn’t worry too much about the exact numbers. What this means is you want to make your page smaller and simpler, and remove as many HTML elements as possible. Split them across multiple pages if necessary.

Shopify stores are, by default, very large websites. Depending on your industry, you might be selling thousands of different products, and even when sorting them in different collections, you might end up with gigantic DOM sizes.

Remember that Google rates all websites, and by their standards, there is no reason to have such a large amount of elements on your store. But this is very difficult to achieve with Shopify.

DOM is very often a theme-specific issue. However—if you find yourself having to deal with an extraordinary excessive DOM size and it is the main offender for your website’s loading speed, there are a few things you can do:

Most themes have several sections, widgets and modules that make your website feel modern and fluid. Mega menus, slideshows, styled testimonials are good examples of extra DOM elements that may not be worth having: are those absolutely necessary to a good customer experience on your website?

Less is more, they say. Overwhelmed by your own website? Pegasaas recommends using a simpler page builder, or even completely changing theme.

Starting from scratch or spending time re-thinking your website’s layout can be excellent for your business—and your website speed.

5. Common problem #4: Serve static assets with an efficient cache policy

Efficient cache policy warnings often occur on Shopify stores because most of them are necessary.

When you visit a website for the first time and load, for example, an image, your browser will store that image on your computer (locally).

That way, the next time you visit this specific URL and for any subsequent future request to that URL, your browser will access the image from your computer’s files (the cache), rather than once again requesting the network to serve the image.

how caching works

Data is served faster, making the customer happy and the network a lot less stressed.

But what if the image changes, or no longer exists on that URL?

This is where cache policy comes into play. A well-implemented policy will allow your server to tell your customer’s browser how long a resource should be cached.

For example, 30 days is a common cache policy for fonts. We don’t expect fonts to change very often, but if they do—your customer will re-download the updated font maximum 30 days after the font’s latest update.

You can test how important the cache policy is on your website by pressing CTRL+Shift+J (in a Chrome browser), going over to the Network tab, ticking the “Disable cache” checkbox, and reloading your website:

disabled cache example

With a disabled cache (in other words, a first time visitor), my client’s website takes 22.85s to fully load (not great, not terrible).

Now, with the cache enabled?

enabled cache example

The website is fully loaded after 2.49s only—and the actual load time is much faster, too.

As you can see, a good cache policy can reduce your load time for return customers by over 300ms. And if you are a seasoned Shopify merchant, you know return customers are much more important than first-time visitors.

So how do you successfully implement an efficient cache policy on Shopify?

The problem with Shopify is that a lot of your website’s features must be re-downloaded on every visit. For example, if your store uses a built-in currency converter, you pretty much need it to be up to date all the time.

In most cases, problems will come from this kind of app (content that needs to be re-downloaded on the daily/on the hour), and there isn’t much you can do about it.

If you are, however, facing massive cache issues, you can start looking into your policy and what slows your return visitors the most. Who knows: cases of third-party apps with terrible cache optimization are not rare on Shopify.

5. Common problem #5: Unoptimized images, animations and other assets

Unoptimized images, animations and other assets stem from a variety of problems that come with modern Shopify themes. In this section, I’ll go over three of the most common issues that come in media optimization: Secondary product mediaLazy loading, and Image compression.

1. Secondary product media

You may not be aware of what this feature does, even if it is already activated on your store. Secondary product media is the image that shows up “on hover”—in other words, when you mouse over a product image:

secondary product media

(GIF courtesy of OutOfTheSandbox)

Depending on the theme you use, this might exist in your customization options under different names, such as “product animation” or “additional product media”.

I understand that for specific products (like watches, clothes), it might be important to enable this option on the collection page—so that your customer has enough information to gauge whether it is worth moving on to the product page.

But in many cases, this is just fluff. This takes a tremendous amount of resources: you are basically loading twice the amount of images on your collection pages!

secondary product media option

I highly recommend disabling this option. It is by far the best improvement I have made to my client’s page load speed.

2. Lazy loading

Lazy loading is a performance optimization technique that loads images as the user scrolls down rather than during initial page load.

Pages that implement this load much faster, as you only need to download a couple of images above the fold: only what the user needs. Generally speaking, this should be a rule of thumb for all content on your website.

So how do you implement lazy loading on a Shopify website?

Because most themes know Shopify merchants care about their website speed, it is highly possible that your theme has lazy loading included. Go over your theme’s files, and look for “lazy” or “lazyload” in your theme.liquid or styles.scss.liquid files.

If it appears like lazy loading is already there—you should not worry about this. If it isn’t, time to get to work!

Installing new code by yourself can be intimidating. Just make sure you duplicate your theme before making any changes, so you can always recover your website’s previous version in case anything breaks.

Lazy loading installation is however pretty straightforward: download the lazysizes.js library to your theme’s assets folder, include it in your theme.liquid <head> tag, then update all of your image tags by swapping the src attribute to data-src and adding the “lazyload” class, like so:

Adding lazysizes in theme.liquid:

{{ "lazysizes.min.js" | asset_url | script_tag }}

Image tag without lazy loading:

<img src="IMAGE_URL">

Image tag with lazy loading:

<img data-src="IMAGE_URL" class="lazyload">

It is fairly straightforward, but if you need more details, I recommend the excellent lazyloading implementation blog post by Speedboostr.

3. Image compression

On media-heavy sites, it makes sense to try and reduce the size of said media. The less there is to download, the faster your page will load. YouTube, for example, does this with all of their videos—and Shopify is a prime candidate for image size reduction.

Are your product images compressed?

If you are a Shopify merchant, it is possible that Shopify has already done this for you. However, it doesn’t hurt to double-check, and maybe optimize where Shopify couldn’t.

There are two ways to compress your images on Shopify: you can either use an image compression app or manually compress them with TinyJPG.

If you have a lot of products on your website (and therefore, a lot of images), you might be forced to manually compress your images. API restrictions on Shopify’s platform make it impossible for image compression apps to access all of your images, as it would be too big of a strain on Shopify’s servers.

If you want to quickly estimate whether a page needs optimization or not, simply input the URL into TinyJPG’s analyzer to have an overview:

tinyjpg analyzer

For this collection page in particular, it appears I’ve done a good job with image compression at least. 🙂

6. Page speed checklist: what should you do now?

To wrap up this blog post, here’s a checklist of stuff you can start working on to improve your page load time.

✅ Assess the situation: head over to Google Pagespeed Insights and enter your homepage’s URL.
✅ Go to your Shopify admin and remove all superfluous apps / code that you don’t use anymore.
✅ Head over to your Theme Editor and remove the unnecessary fluff (animations, sliders, fancy buttons…)
✅ Audit the size of your media (product images, etc.) and compress where necessary.

If you’d rather do all of these optimizations later, download the detailed checklist here—so you can instantly get to work when it’s time!

I hope you found this blog post useful. If you need more help, or just want to say hello, please leave a comment below or send me an e-mail at nathan@taptimize.com!

Enjoyed the post? Sign-up to our mailing list and never miss the latest tips: