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 www.picresize.com 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 www.tinypng.com (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="//fonts.googleapis.com/css?family=.|{% 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:
Mobile Before
Desktop:
Desktop Before

My PageSpeed results after doing all 5 steps:

Mobile:
After Mobile
Desktop:
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! :)


12 Responses

Archer Gocher
Archer Gocher

January 07, 2020

Are you intrigued in working with instagram influencers to promote your services?

Start your cost-free 7 days trial!

This social media network provides exclusive contact with dozens of Instagram influencers in many specific niches that you can collaborate with for shoutouts to market your business.

You will get a catalogue of verified influencer and sophisticated analytic tools to track influencer engagement.

Would certainly you like to get started?

https://569k.mailconvert.xyz/o/45143etrairU

Sincerely yours,

Archer

iPhone. iTypos. iApologize.

-6551 Ec6551 Ec-6551 Ec

recall https://569k.mailconvert.xyz/link/u/s33z33n33m

Silvia Sandlin
Silvia Sandlin

December 26, 2019

Hey…
Are you intrigued in hiring influencers to advertise your services?

This social media network offers exclusive contact with dozens of social media influencer in various specific niches that you can work with for sponsored posts to promote your business and watch them your brand into a trending topic.

You will gain a catalogue of verified influencers and sophisticated analytic tools to examine influencer engagement.

Would certainly you like to join?
Begin currently your complimentary test!
Learn even more – right here: https://latoyia.ordershoutout.site/16115lledsmaR

Please excuse any tpyos as it was sent from my apple iphone.

In the case that you are not fascinated, after that i ask forgiveness and also thank you for reading.

note:
scrub here: https://latoyia.ordershoutout.site/lost/yobyarb

Brad Hartung
Brad Hartung

December 10, 2019

Hi,

Interested in working with influencers to endorse your services?

You are welcomed to register for the leading global influencer agency that connects firms with Instagram influencers proven to attract paying traffic, enhanced brand exposure and long-lasting customers. You’ll also get a FREE marketing consultation from our expert marketing team to help you craft effective influencer campaigns and amplify your business.

This agency allocates exclusive access to hundreds of influencers in many niches that you can work with for shoutouts to promote your business and watch them transform your brand into a talking point. You’ll also be able to communicate with them directly and create your own offers on which they can bid if you have any special requests.

You will get full access to a directory of authorized influencers and sophisticated analytic tools to survey influencer engagement and performance.

Would you like to join?

Link: https://hollis.influencershoutout.site/58818hsamelK

Brevity and errors aided and abetted by my cherished apple iphone *.

To Unsubscribe link: https://hollis.influencershoutout.site/off/ya33s

173022-56-01-89-

Joseph Ramer
Joseph Ramer

December 03, 2019

If you have a service, you require to make business a special brand name in this contemporary age of globalization.

Influencer marketing is a type of social networks advertising which entails recommendations and also item positionings from influencers, people and also companies.

The Influencer Agency is an international platform to help you finding the right course to establish a more special brand name to increase your business with influencer marketing.

You just need to take a little step and also we will certainly connect you with the ideal individuals at right time.

There has actually been a considerable change in world company market after the age of influencer advertising began.

Because it truly establishes the excellent partnership in between the brand name and the client via social marketing.

The Agency uses you to enjoy the growth of your business by getting in touch with Instagram influencers, and resilient clients.

https://title.brandhelp.xyz/black

Sent from my iPhone

note:
To Unsubscribe here: https://title.brandhelp.xyz/un/FzqM

Leonardo Puglisi
Leonardo Puglisi

November 20, 2019

This platform offers best access to hundreds of influencers in different niches that you can hire for sponsored posts to advertise your business.

You will gain full access to a directory of verified influencers and sophisticated analytic tools to track influencer performance & engagement.

Learn even more below: https://1borsa.com/10fbe

Yours sincerely,

Puglisi

Sent from my apple iphone

Unsubscribe: https://gpi3.influencerhelp.xyz/link/u/UEnhKiYB

rnd_phonernd_phone

kevin
kevin

February 14, 2018

Take a look at the reviews for pagespeed guru – when you have custom code and many different apps installed you risk your website being damaged. Unless you are comfortable with troubleshooting hours of code and have the free time and patience to do so, by all means, use the app – download a copy of your theme before you start.

Maria Perez
Maria Perez

January 02, 2018

I read all this article and have excellent suggestion which I bookmarked. thank you

Stephen B.
Stephen B.

October 16, 2017

@Jody – I just checked and the app is still listed on the Shopify App Store. Try searching “pagespeed guru” and it should be the first result.

@Robert – As far as batch resizing product dimensions, there’s really not a good solution to this due to the nature of the issue. You’ll want to handle these individually, as you wouldn’t want to publish a stretched or blurry product image. There’s an app on the App Store made by PixC that can make images square, but I don’t believe it optimizing the dimensions of the image.

ie. if you need 480×480 product images, and you have an image that is 500×180, the app will make that image 500×500 — which is the right ratio, but still bigger in dimensions than it needs to be.

Hope this helps! :)

Feel free to email me (support@stephensworld.ca) if you have any other questions.

Robert
Robert

October 15, 2017

Hi,

Thanks a lot for the tips. I have over 300 images in my sore. Any tips for batch resizing them to the right dimensions? Thanks.

Robert

Jody
Jody

October 06, 2017

Page Speed Guru is no longer available on the shopify app store. Any other suggestions for remedying – Eliminate render-blocking JavaScript and CSS in above-the-fold content, Enable compression, Minify JavaScript?

Stephen
Stephen

May 10, 2017

Hey Eldar,

You’ll want to see the “source” link for more details: https://www.w3schools.com/tags/att_script_defer.asp

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

Hope this helps,

Eldar
Eldar

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?

Cheers,
Eldar

Leave a comment

Stephen's World Mailing List