Case Study: theearthlingco

theearthlingco.com is a company selling sustainable eco-friendly everyday products, like hair and body care products, kitchen utensils, apparel and more.

Despite having a nice premium theme, the theme was still slow. Mostly because of apps. Not only there were a lot of apps installed, there also was a lot of redundant code in the theme files (apps that were installed and uninstalled, without cleaning up the code). Here are the results first:

Homepage optimization results for theearthlingco.com
  Before After
Load speed ≈12s ≈3s
Page size 6.80MB 1.35MB
Requests 157 75
Click to view GTMetrix.com report
Product page optimization results for theearthlingco.com
  Before After
Load speed ≈11s ≈3s
Page size 6.86MB 1.72MB
Requests 197 112
Click to view GTMetrix.com report
Collection page optimization results for theearthlingco.com
  Before After
Load speed ≈14s ≈3.5s
Page size 6.07MB 1.17MB
Requests 192 87
Click to view GTMetrix.com report

Not all app developers are doing a good job when it comes to deleting their apps from the store. I think Shopify should make sure that the app correctly removes itself and leftovers from the theme after you delete them. If you have any doubts, please reach out to the apps' support, they should help you out with deleting everything.

There was a weird issue with the fonts. There were 12 font files loaded, whereas on site I could see only google's Montserrat, in 3 font weights (400, 500, 700). It was implemented using theme standard feature, where you select fonts for different areas of the website, and then they're served from the Shopify font library. There also was an addition of Montserrat font from Google fonts, in all font weights - this one was removed. And there was another couple of fonts (Montserrat included, for the third time) at the very end of loading. Turned out this was from the OptinMonster app.

This is one of the apps I would recommend to remove if you're not using its features extensively. Simple popups could easily be done with native coding and something like Klaviyo would offer some analytics. However, my clients were using a few campaigns on Optinmonster, so before removing it I wanted to see what can I do with it to make it better.

Optinmonster's developers could've improved the sites' performance in at least two areas. First remove the option of loading google fonts by default. This way the popups' font will fallback to fonts already used on site. It would remove the issue we had with double loading of fonts. The popup will also look more uniformal and in tune with the store's appearance. Thankfully there was a simple fix in their docs about how to fix that OptinMonster - disable google fonts.

The second area is even more obvious. I will explain the setup first. We had 4 campaigns. All of them are popups with time out + exit intent. 1 of them is site-wide, the other 3 are product-specific. Each campaign's popup contained an image. And all 4 popups (with images) were rendered and loaded in the background on every page of the site. Isn't it stupid to generate 3 extra popups and load them onto every page, when the campaign rule clearly state that there is only one page they will ever open? Perhaps it's tricky to fix it due to some technical restrictions, but I think it's pretty important. What if the clients store has 10 or more campaigns? Even if all images are optimized this will create an extra 2MB of useless content that customers will never see.

I was able to offload all popups' images, so they're loaded just before the popup is about to open - the Javascript API OptinMonster provides is quite nice. The HTML of the popups is still injected on every page and this is something I won't be able to fix. While the performance hit from this might be quite small, it will increase with the number of campaigns used. Still, with images offloaded and fonts removed, the gain was good enough.

A few other apps were optimized. Yotpo Reviews widget was located far below the fold, there is no point to load it before used interacts with the page, so it was offloaded. However, there was one challenge with this. On the product page, Yotpo rendered a small reviews widget below the product title. I have created a snippet to replace it with some native coding. Number of stars and number of reviews is encoded in the product tags instead. This allowed to avoid loading Yotpo's scripts along with a few images with customer's photos.

Gorgias live chat was optimized too. Interactive button was replaced with a static HTML element, which will load and inject all necessary scripts for Gorgias to work only when a customer showed intent to use it. This way it doesn't have to be loaded every time for every visitor.

Half a dozen unused apps were removed from the Apps section and from inside the theme. The usefulness of a couple of apps was evaluated and the ones not offering enough value removed too. Images were compressed using the Image Optimizer (which optimizes images uploaded to Products and Collections automatically). Other images - like the ones uploaded through Customize Theme - were compressed and re-uploaded manually. Proper lazy loading implemented. Added a pre-loading script, which starts to preload some resources required for the next page whenever user hovers over some link for more than 100ms.

Conclusion

Page sizes were cut by 3-5 times, number of requests reduced in half. This lead to a nice decrease in overall load speeds, without much change to the store's looks. Redundant and unoptimized apps, leftovers from previous installations are the most common culprits in store's loading speed. Also, as always, premium themes is not enough for fast performance. Every theme is fast, when it's in its blank state. Thankfully every theme can be made faster with some proper attention. Enter you email in the form below and I'll send you a free report with suggestions on how to make your store better.