Blog

Advanced Shopify Speed Optimization – Under 1.5 Seconds & 90+ Google Page Speed

How we helped one of our Shopify clients achieve a blazing fast 1.4s load time and a 90+ Google Page Speed on Mobile.

What are we doing?

Introduction

This is a case study of how we made our clients Shopify website, ShowerGem.com, load in under 1.5 seconds while increasing its Google Page Speed score. It’s a custom-built Shopify store that has had most of the basic optimizations done already, but with our clients recent growth, it’s now worth bringing this sites speed to the next level.

What was wrong?

Through Pingdom and Google Page Speed Analysis, the three main issues slowing down this website were :

1) The number of requests our page was making, 112. 2) The amount of Javascript being executed. 3) A large dom size

The high Javascript execution time is directly related to both the amount of scripts and the excessive DOM size. We should have a strong effect by bringing these all down.

First Optimization

Working on Javascript.

I believe images and JavaScript are the biggest cause of slow websites today. JavaScript on desktops and fast devices doesn’t usually have a huge effect, but on mobile it can bring everything to a halt. Most apps and services will load their own file that has to be downloaded, parsed and executed independently.
Our JavaScript execution time on mobile was far too high, and so was the amount of scripts being downloaded. Combining the files
As this is a custom theme it’s using a webpack compiler to minify and combine any files that it can, when working on this website before we had to set up multiple environments, so we could remotely push our theme into all local variants of the ShowerGem website, this unexpectedly removed some of our production optimizations as our environment name was no longer ‘production’ and webpack relies on this to know when to execute the production optimizations.
Re-enabling these production optimizations brought down our requests from 112, back down to around 50.
We also achieved further reductions by taking any external or inline scripts, downloading them and then adding them to our master JS file.
This brought our overall js file size from 606.4KB ( compressed ) to 245kb and requests down to 44

Second Optimization

Working on images.

This website already implemented on the fly image responsiveness and lazy loading but 87% of the page weight and 90% of the requests were images.
The main culprit here was the video images posters and the custom gallery.
The custom gallery was loading 100x100px images for the mini thumbnails on the left, then 300x300px placeholders for the main image, and then loading in a 500px image when it was clicked meaning every image was loaded 3 times. By making the placeholder image 100x100px too it meant we didn’t have to load this image again. Reducing our requests to a much more reasonable, 34.
We could solve the problem of video posters by adding a plugin to the lazysizes.js plugin to allow us to lazyload this attribute, our image posters were 110kb together so this should make a difference to our initial load time, especially that our whole page is now only 393KB according to GT-metrix.

Third Optimization

Fonts

Fonts can sometimes have a relatively large effect on load times. The two fonts on this site came in at 144.5KB which is about 10% of our whole page size. We can optimize fonts with a tool called transfonter, with this tool we can specify the character subset we need (Latin) and reduce our files sizes significantly. It’s not a huge improvement on a site with only 2 fonts but on larger sites it can be very important.This brought our font size from 144.5KB down to only 30KB.

Outcome

What was the result?

We ended up with a great result, we’ll let the stats + images below do the speaking. Left image is the desktop result and the right image is the mobile result.

98
Speed Score
0.6
FCP
84%
Load Time Decrease
1.3s
TTI

Do You Want This Kind Of Speed?

If your website is feeling a bit sluggish it can have a really negative effect on your customer experience. Tell us about the problems and we can help!

Get in touch