0

Your Cart is Empty

April 24, 2017 5 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 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! :)


5 Responses

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 Newsletter