How to Increase the Loading Speeds for your Shopify Store

April 24, 2017 3 Comments

It's unanimously agreed that slow loading times mean less sales, more visitors leaving, and worse SEO ranking. If you've tested your Shopify store with Google's PageSpeed Insights, you're probably getting the following errors:

- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Enable compression
- Optimize images
- Minify JavaScript

See below for five steps you can take to all-but eliminate these issues, and drastically increase your site's loading speed.

1) Make sure images are the correct sizes (dimensions)

If the image shows up as 200x200 pixels on your site, you want to make sure the image is that size before uploading. If you upload an image at 800x800, but the image only shows as 200x200 on your site, then your loading speed will be negatively affected. I recommend using for easy/free custom image resizing.

2) Make sure all images on your site are optimized before uploading

There are a number of apps which can help with this (CrushPics, Minifer, etc). Personally, I highly recommend using (100% free) to optimize images not directly saved as assets before uploading to your site.

3) Use the HTML <script> defer attribute (source)

For example, this is what I needed to do for my site, and it will probably be similar for yours:

- Go to your theme.liquid file and do a search for " {{ 'app.js' | asset_url | script_tag }} "
- Replace the code with " <script src="{{ 'app.js' | asset_url  }}" defer></script> "

4) Remove any Google fonts from your site (optional)

I know many merchants love using custom Google fonts on their sites, but in my humble opinion, it's sometimes not worth the hit to your loading speeds to support them. First, go to your Customize Theme area > General Settings > Typography > Switch all fonts to a standard built-in font like Times News Roman. Second, find the coding in your theme.liquid for Google fonts, and delete it - mine looked like this:

<!-- Custom Fonts -->
{% if settings.logo_font contains 'Google' or settings.headline_font contains 'Google' or settings.nav_font contains 'Google' or settings.slideshow_subtitle_font contains 'Google' or settings.regular_font contains 'Google' %}
<link href="//|{% if settings.logo_font contains 'Google' %}{{ settings.logo_font | replace: 'Google_', '' }}:light,normal,bold|{% endif %}{% if settings.headline_font contains 'Google' %}{{ settings.headline_font | replace: 'Google_', '' }}:light,normal,bold|{% endif %}{% if settings.nav_font contains 'Google' %}{{ settings.nav_font | replace: 'Google_', '' }}:light,normal,bold|{% endif %}{% if settings.slideshow_subtitle_font contains 'Google' %}{{ settings.slideshow_subtitle_font | replace: 'Google_', '' }}:light,normal,bold|{% endif %}{% if settings.regular_font contains 'Google' %}{{ settings.regular_font | replace: 'Google_', '' }}:light,normal,bold{% endif %}" rel="stylesheet" type="text/css" />
{% endif %}

5) Run the PageSpeed Guru app (1 time fee of $29)

This app helps with almost everything else - and it does it all automatically (no custom coding needed on your part). I highly recommend creating a duplicate copy of your theme first, before running the app, just in case something breaks in the process (it did work perfectly - first try - for my site though).

See the results for yourself:

How my website started before doing this:

Note - I had already spent a bit of time doing steps 1 & 2 so it really started lower than this.

Mobile Before
Desktop Before

My PageSpeed results after doing all 5 steps:

After Mobile
After Desktop

The best part about this is that aesthetically, there were essentially no noticeable differences in how the site looked or worked after making these changes.

Hope this helps! :)

Don't have a Shopify store yet? Click here to sign up for a 14-day free trial (no credit card needed).

3 Responses


July 18, 2017

Hello. I’m trying to use the HTML


May 10, 2017

Hey Eldar,

You’ll want to see the “source” link for more details:

Essentially, it sets the script to not run until after the page has loaded.

Hope this helps,


May 05, 2017

Hey Stephen,

Thanks for the sharing great tips. There is no any explanation for “defer” attribute (#3). What is it and how does it help?


Leave a comment

Stephen's World Mailing List

Sign up to get the latest blog posts, offers, advice, and more ...