Case study: chakras activated.com

I was reached by a client concerned with their slow loading speed, even though they were using a premium theme. One of the most famous and, in my opinion, best ones - Turbo theme by Out of the Sandbox theme developer.

Optimization results for chakrasactivated.com
Homepage Before After
Load speed ≈5s ≈2s
Page size 1.68MB 1.36MB
Requests 105 63
Click to view GTMetrix.com report
Optimization results for chakrasactivated.com
Product page Before After
Load speed ≈7s ≈2s
Page size 1.61MB 1.60MB
Requests 99 78
Click to view GTMetrix.com report
Optimization results for chakrasactivated.com
Collection page Before After
Load speed ≈6s ≈3s
Page size 2.86MB 1.45MB
Requests 161 64
Click to view GTMetrix.com report

Unfortunately, great theme will not ensure that your store is as fast as it could be, although it's definitely a step in the right direction. Lots of apps is the common culprit and in this particular project it was my main focus, since the theme itself was in a fairly good shape.

Vitals app

The first app I was going to get rid of is Vitals. There are lots of options with this app, but most of solutions are pretty basic and could be achieved by some custom coding. Namely: countdown timer on the product page, instagram product feed, currency converter, hiding additional payment buttons on the cart page.

The Countdown timer was displaying random number of minutes/hours, counting down to the end of the sale. This data was then written to device's cookies so the value is remembered across the site. The solution was replaced with a simple JS script with the same layout, getting rid of Vitals files and extra font that the app was loading. Which in addition to suboptimal performance was different from the font used across site and looked bad.

My custom coded Countdown timer (with matching site fonts) above the Vitals'

Instagram product feed. I know folks like to connect to their live instagram feed to highlight the photos of products from customers (great social proof). I instead prefer to have these images curated through the Customize theme. Yes, it involves a little more effort (downloading images from Instagram and uploading to a specially created section in Customize theme), but it has a set of very clear advantages. You can read more about my approach here: Best way to do Instagram feeds

Here is how it looks in the admin section (click the image to enlarge).

Custom coded instagram feed, completely standalone

Currency converter. In Turbo theme the currency converter is already in the theme, so I only had to disable apps' one, and enable the one in the theme. Even if it wasn't in Turbo, I would've implemented it myself, because it will always be miles better than whatever apps offer.

Hiding additional payment buttons in the cart page is a matter of deleting a few lines of code in your cart template. It's going to be either in sections/cart-template.liquid or templates/cart.liquid. Look for these lines and remove them.

        {% if content_for_additional_checkout_buttons %}
          <div class="additional-checkout-buttons">
            {{ content_for_additional_checkout_buttons }}
          </div>
        {% endif %}

Bye-bye Vitals app. Saved a bunch of requests and inconsistencies in fonts.

Progress bar in the side cart

Other app was used to display a so-called Progress bar. It shows progress until free shipping. No need for an app for this feature, so it was replaced with some code.

Progress bar in side cart.
Progress bar in the side cart.

Upsells app

I won't name it, but we replaced it with my custom super lightweight solution. Yes, it's not super smart (AI enabled as they say nowadays), but smart enough to raise your average order value nonetheless without horrible designs and slow loading. The logic just pulls the products in same collection. For Necklace type of products, it also shows the message about current offer ($29 for any two). Upsells will be hidden, once the order qualifies for free shipping.

Upsells done with performance in mind.
Upsells done with performance in mind.

Other apps

As part of optimization, we went through the installed apps and removed a few more, carefully evaluating the value they offer and performance hit they make on the store. Like those "social proof" apps, that flash a small banner somewhere on the page that "X bought Y just now" and keeps doing it every 5-10 seconds. It's annoying for me as a user, and I'm sure for you as well, if you place yourself at your customers' seat.

There were some more apps which I wouldn't use in the long term, but the clients saw a lot of value in them - that's fine too!

General optimization

As always, some general optimization techniques were applied, same as on other stores I work with, like making content load on demand, preloading content when user hovers over links, concatenating of theme files to reduce the number of requests. Some clean up from redundant code from previous app installations, and so on.

Bug fixing

A couple of bugs were noticed and fixed. The most significant was a weird bug when customers clicked "Add to cart" on mobile, then the page was scrolled to top and the sidecart was opened. It's not good to break the normal flow and page jumping to the top is a significant one. This type of unexpected behavior leaves user wondering what happened and may prevent them from seeing typical Related products section, which are located under product description.

Conclusion

As a result of optimization the loading speed was reduced to 2-3 seconds. A few apps' functionality had to be replaced with more efficient custom solutions. Even though a premium performance-oriented theme was used, this wasn't enough to bring loading speed to great numbers. The client was very satisfied with results and will definitely feel this on their vital selling metrics. This project took two weeks to complete.