Note: This blog is older than 6 months - any info, steps, or advice may be outdated and no longer work. Please proceed with caution.

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! :)

Stephen's World Mailing List