How Carpe achieved record-breaking sales by focusing on performance optimization

How Carpe achieved record-breaking sales by focusing on performance optimization

We worked with Carpe to improve their key performance metrics resulting in a 52% faster Largest Contentful Paint and a 41% improvement in Cumulative Layout Shift. These upgrades lifted Carpe’s online store conversion rate by 5% and increased traffic by 10%, leading to a total 15% increase in revenue.

Carpe aims to tackle one of the most common and annoying conditions people have. Their mission is to help those suffering with embarrassing, uncomfortable sweat through a set of dermatologically and clinically tested products.

After noticing a decline in online store speed over several months, the company decided it was time to do something about it. Performance can be a complex topic, so we were thrilled to support their talented development team. That way, both sides could use their expertise and domain knowledge to provide the most impactful, time-efficient results.

Discovering performance opportunities and setting goals Jump to heading

If you read our previous case study, you may already know that the first step of every performance engagement is to set a baseline. As before, we start by analyzing WebPageTest synthetic tests and the real user data.

Charts showing too high Time to First Byte, First Contentful Paint and Largest Contentful Paint.
Screenshot from treo.sh/sitespeed showing public CrUX performance data for Carpe.

The investigation quickly surfaced the following issues:

  • All pages were suffering from slow rendering times. All the milestone metrics for page speed: TTFB, FCP, and LCP were high.
  • Cumulative Layout Shift was dangerously close to not fulfilling the good user experience threshold of 0.1 at 75th percentile.

We decided that a good initial goal would be to make sure that the website fulfills all of the Core Web Vitals requirements. This would ensure that at least 75% of its visitors get a fast experience and allow it to rank a bit higher in Google’s search results.

Addressing common issues Jump to heading

When it comes to rendering, our experience tells us that there are two common issues across Shopify ecosystem: external render-blocking resources and incorrect lazy-loading of images.

Request waterfall showing only one external render-blocking resource and a delayed Largest Contentful Paint.
WebPageTest waterfall showing the browser activity until Largest Contentful Paint.

By analyzing the WebPageTest waterfall, we were able to quickly rule out the first issue. The browser needs to wait for only one external resource before painting, which is a personalization script that has to stay anyway. The same waterfall shows that the hero image is requested quite late. Being the 19th resource on the list suggests it’s initially hidden from the browser, resulting in high Largest Contentful Paint.

After a deeper analysis of the HTML, we confirmed that the page suffers from incorrect lazy loading and a generous usage of non-decorative background images. Both of those things should not be used for important, above-the-fold graphics as they hide them from the browser's preload scanner. Through a detailed report, we made sure that all of the best practices outlined in our articles around images’ performance were applied to address the slow LCP.

When it comes to Cumulative Layout Shift, we made sure that the images had their dimensions specified in the HTML. We also did some fixes around the space reservation for the top part of the product page. This was more than enough to stabilize the layout and improve the combined CLS score for the entire origin.

Liquid overflow Jump to heading

We all knew, since the very beginning of the engagement, that simply addressing common frontend problems would not be enough. Looking at the metrics, we saw it was virtually impossible for render times to fit inside the “good” threshold without addressing the server response time. While we never recommend this as a first step, Time To First Byte values over 1 second suggest there may be some issues worth looking into.

As a Shopify merchant, your safest bet when it comes to slow server responses is to analyze the theme's Liquid logic. By following a guide on how to use Shopify Theme Inspector we were able to spot some issues.

Shopify Theme Inspector flame chart showing around 85% of time is spent inside the main layout file.
Shopify Theme Inspector flame chart showing around 85% of time is spent inside the main layout file.

Carpe has an extensive frontend logic around bundles, discounts, deals, and cross-sell suggestions – all of which require product information. Liquid loops were used to serialize all products and their variants in JSON, that was then parsed by JavaScript on the client. This quick and simple solution may have been fine initially, but with a growing number of products, rules, and metafields, it started to slow down over time.

Our initial idea was to move all non-critical product data fetching to use the Storefront API instead. Unfortunately, we quickly discovered two roadblocks:

  1. The information was used in many places across the code and the majority of logic assumed it can be accessed synchronously.
  2. All of the rules and relationships were based on the product SKU, meaning it wouldn’t be optimal to fetch them via an ID-based API anyway.

With the above in mind, we decided to opt for some quick wins instead. We switched from serializing the whole product to extracting only a few fields that were required. We also made sure that only the necessary parts of logic stay on a certain type of pages. This reduced the rendering time significantly, giving the team time to work on bigger refactoring without pressure because of poor performance.

Chart showing Time To First Byte and First Contentful Paint reducing by 1.5s and Largest Contentful Paint going down by 2.5s.
Chart based on our internal real user data showing performance improvement as a result of TTFB and LCP fixes.

Results Jump to heading

As of March’s Chrome User Experience Report (CrUX) update, Carpe’s online store achieved good scores across all their Core Web Vitals.

Charts showing Largest Contentful Paint, Cumulative Layout Shift and First Input Delay within the Good level for at least 75% of visits.
Screenshot from treo.sh/sitespeed showing Carpe fulfilling all Core Web Vitals in March.

Our internal analytics show a 52% improvement in Largest Contentful Paint and 41% in Cumulative Layout Shift at the 75th percentile.

Working with the Shopify performance team allowed us to take the Carpe website to the next level of user experience. As a result, we were able to drive more traffic to the website and increase revenue by 15%.
Daniel Nunn
Director of eCommerce, Carpe

About us Jump to heading

We are the Professional Services Web Performance Team. Our goal is to help merchants get their online stores as fast as possible through direct paid engagements, platform work and education. Learn more about our services, or check out our blog and getting started page to begin your own performance journey.

Read similar articles tagged...

Back to blog