Case Study: Wellness Bakeries.com

Wellnessbakeries.com sells mixes for healthy baking. They have a few products and lots and lots of recipes using which you can cook some quite delicious meals.

They contacted me with request of improving the loading speed of their newly opened Shopify store. I’ll show the results first.

Homepage optimization results for wellnessbakeries.com
  Before After
Load speed ≈14s ≈2s
Page size 4.60MB 0.9MB
Requests 144 48
Click to view GTMetrix.com report
Product page optimization results for wellnessbakeries.com
  Before After
Load speed ≈22s ≈2s
Page size 4.93MB 2.70MB
Requests 188 98
Click to view GTMetrix.com report
Collection page optimization results for wellnessbakeries.com
  Before After
Load speed ≈5s ≈1.5s
Page size 2.84MB 1.04MB
Requests 106 56
Click to view GTMetrix.com report

Since the store is new there weren’t lots of apps yet. The owner was aware of performance issues and how apps impact load speeds, so she kept the number of apps at minimum. The site is quite simple and there are just 6 products. Nonetheless, full loading time for some of the pages was terrible. Onload time was not so bad, around 4-8s, but the page was in loading status for 20s+. Sometimes a low number of apps doesn't help.

Only one request was responsible for the huge difference between on load time and full load time. This request was trying to send some info and had Error status in the end. After hours of debugging I've found that this request comes from the reviews widget located on Home and Product pages. This widget was from the Reviews.io app. Without any access to their code fixing the error was not an option. After some tinkering I was finally able to offload that widget on both pages, which solved the problematic request issue too.

There was an issue with the main slider on the homepage, which lead all 12 images (6 desktop + 6 mobile) to load. Lazy loading didn't help here due to how the slider works, so I had to change the slider mechanism a little bit. Now all the images are loading only when a user shows intent to interact with the slider, or when autoscroll triggers.

Next issue was the huge number of images on pages. From the theme code it seemed that lazy loading was implemented, but GTMetrix report has shown that all the images are loading nonetheless. Which means lazyloading wasn't working. After correctly offloading the images below the fold lots of requests were saved.

There were a few apps I wanted to get rid of. Free Shipping Banner - for the basic functionality it offers it's not worth it at all. I've replaced it with some simple custom coding. We have removed a few more apps after assessing their usefulness.

Next up was Klaviyo. The app itself is fine. There are a few buttons on site which should open the popup with an option to subscribe to receive free recipe ebooks. The problem with Klaviyo's popup (besides half a dozen of extra resources loaded) is that it can only be triggered with a button click only once. It is clearly stated in their docs, so this is not a bug. I had to implement the popup from scratch and add submissions to Klaviyo lists using their API. Disabling the popups in the dashboard freed another 5-10 requests.

I have also implemented a preloading mechanism I add for all my clients. Essentially, if a user hovers over link for more than 100ms, the connection to servers begin to establish and the page preloads, so when he finally clicks, it will load quicker.

After some general asset optimization, minification and concatenation the job was done.

Conclusion

In this case I was able to reach great loading speeds of around 1.5-2 seconds, at the same time we didn't have to sacrifice anything in design or functionality. The customers will appreciate improved performance which in turn will improve key e-commerce metrics. This project took 2 weeks to complete.