"i only speak liquid" #47: Site Speed Learnings ⚡️

Written by Jocelyn (a Storetasker Expert)

Author

Jocelyn Dunkley
April 03, 2024

Hey everyone!

Welcome back to i_only_speak_liquid - I’m Jocelyn, a Storetasker expert and front-end Shopify developer. This is my 3rd edition of 4 newsies, let’s gooo!

What I’ve been thinking about:

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:

  1. 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. 

  1. 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. 

  1. App optimization section built by Mircea Piturca of sections.design. 

  2. The Cost of Doing Business The founder of Topicals launched this open source resource site for consumer packaged goods (CPG) brands.

  3. StackingContext Youtube Channel This guy does practical tutorials on the latest releases in Shopify. I’ve gone through a couple of his videos to learn real life examples of Shopify app development concepts. 

1 app I like:

This is a classic app to keep customers in the sales process even when your product is sold out. Customers stay notified when a certain product goes back in stock. You can gauge customer interest in certain products when restocking products so you don’t overbuy. You can also allow customers to preorder your products. I think this app’s back in stock notification features are stronger and more reliable than the preorder settings. If you need granular preorder controls such as selecting what variants can be preordered and the max preorder amount, then I recommend another app like Preorder Globo | Back in Stock.  

One learning as a freelancer:

Following up is the key to success.

Whether business is going well for you or not, following up with your leads and current clients is necessary to move business along. Many freelancers get deterred if a lead doesn’t reply to them the first time. However the ball is in your court. Give them the benefit of the doubt. Maybe they’re busy, they saw your email but forgot to reply (I’m guilty of this) or something else. Have confidence in your services and politely follow up. 

I do a 3 email follow-up sequence. I always end the last email with “Have you already found a solution for your INSERT PROBLEM HERE or are you still looking for support?” I was able to use this strategy to convert 3 leads that replied to me on the 3rd email into clients last month. 

I even follow up with clients who don’t outright reject me but for some reason it didn’t work out. I make a note in my calendar to follow up in 1-3 months. I reach out to see if they are interested in the same project or need additional support for something else. 

If they were ok with my prices but it wasn’t the right opportunity, keeping in touch is always a win-win. It’s only a matter of time and persistence before they’ll reach out because you were diligently contacting them every so often. The key is not being pushy and always providing value in some way. 

I hope you enjoyed this edition. If you have any feedback, or better ways to do the things I touched on, let me know your thoughts!

See you next time,