Site Speed Experimentations on Shopify

Recently I’ve been focusing on site speed optimization for a few clients. I’ve been doing some experiments to see what techniques have worked for me. I’d like to share that with you today.

1. Ruthlessly analyze what scripts you need

The general recommendation is to defer or async scripts so they don't block the main rendering action. This is helpful for scripts that are necessary on the page, but there are often 3rd party scripts that are always loaded, even if they are not used on the page. In order to truly keep the page lightweight, I started conditionally loading scripts based on what kind of template they are on.

I’ve been using this app optimization section built by Mircea Piturca of sections.design to do this functionality. You can either entirely block a script on certain pages, load it on scroll or load it on a specific event.

However the app optimization section doesn’t detect everything. So for other situations I conditionally render the script by myself:

View Code here

2. Make sure only the images “above the fold” are loaded eagerly

I found out that one of my clients’ featured collection slideshow section was loading the first four product images eagerly and the rest were lazy loading. This makes sense assuming you always need to see the first row of products immediately. But it meant that there were 24 images below the fold that were being eagerly loaded. This was unnecessary and wasted precious loading time.

To fix this I created a theme setting that the user could select if they wanted this section’s visible images to be lazy loaded or eagerly loaded. If the featured collection slideshow section would be visible above the fold, then they would click eager loading, otherwise, it would be lazy loaded.

3. If possible - reduce the length of the webpage on mobile

One overall problem for a client was that the DOM content was too large, especially on mobile. My client had 13 sections in total on their homepage. Customers would ideally find what they were looking for before scrolling all the way to the bottom. I proposed adding a theme setting so the client could choose if a section should be shown in desktop, mobile or both.

‍