How Sunday Citizen improved conversions by focusing on performance

How Sunday Citizen improved conversions by focusing on performance

We worked with Sunday Citizen to improve their key performance metrics and were able to achieve 25% improvement in Largest Contentful Paint and 61% in Cumulative Layout Shift at the 75th percentile. This resulted in 4% decrease in bounce rate and over 6% increase in conversion.

Web performance is often overlooked as a way to improve both user experience and business metrics. This case study shows the value that can be achieved when working toward improving loading speed and reducing user frustration.

Sunday Citizen is a fourth-generation textile family with one mission: create moments of joy through comfortable things. The company's customer focus led them to look into and improve their online store performance for a better user experience.

Discovering performance opportunities and setting goals Jump to heading

Every performance optimization project starts with setting a baseline. We start by looking into both synthetic tests conducted with WebPageTest and real user data provided by the Chrome User Experience Report (CrUX).

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

During the investigation we found a few issues that needed addressing:

  • Rendering performance was the worst performing area – optimizing First Contentful Paint (FCP) and Largest Contentful Paint (LCP) was our main priority.
  • Cumulative Layout Shift is green, but hovers dangerously close to the acceptable levels at the 75th Percentile.
  • Since Interaction to Next Paint metric is still experimental, we wanted to focus on the current Core Web Vitals for this project but plan to address it in the future.

Together we decided that the main goal should be to get the website to pass the Core Web Vitals assessment. This would mean getting the Largest Contentful Paint under 2.5s for at least 75% of Sunday Citizen’s customers. At the same time, we still wanted to address any other impactful performance issues affecting other metrics.

Step 1: Improving the initial render Jump to heading

First Contentful Paint measures how long it takes the browser to render the first content after a user navigates to your website. This metric is important because it is usually the first indicator for the visitors that the page works and actually loads.

Addressing any performance issues with FCP usually comes down to one thing – making sure that resources required for the page to render are delivered as soon as possible.

Network waterfall showing 25 different requests happening before First Contentful Paint.
WebPageTest waterfall showing 25 different requests happening before First Contentful Paint.

After analyzing the page, we were able to suggest and apply the following fixes:

Network waterfall showing only 6 different requests happening before First Contentful Paint.
WebPageTest waterfall showing only 6 different requests happening before First Contentful Paint after the changes were implemented.

Step 2: Optimizing Largest Contentful Paint Jump to heading

The key improvement to LCP had to do with making sure the browser's preload scanner can discover important images as soon as possible. In Sunday Citizen’s case, two techniques outlined in Jeremy Wagner’s article were applied:

  • CSS background images were converted to standard <img> elements and sized using the object-fit property.
  • Lazy-loading was removed from all of the above-the-fold (visible without scrolling) graphics.

These changes alone provided a lot of value. Additionally, making sure that images are served responsively and adding fetchpriority=”high” attribute to some of them made the performance even better.

Network waterfall showing LCP image request happening right after render-blocking files.
WebPageTest waterfall showing optimized Largest Contentful Paint with image being requested right after the render-blocking files.

Step 3: Stabilizing the layout Jump to heading

When it comes to Cumulative Layout Shift, the goals were to stabilize the layout and remove or reduce any shifts. Additionally, we found CLS was worse for users with slower connections and/or devices.

Using WebPageTest, we found that the navigation bar was contributing the most to CLS, so we modified the CSS to make it sized properly. On the product pages, we found the gallery elements shifting content, so we reserved space for them. Finally, we added extra styling for carousels so that their position is stable from the onset before their scripts are executed.

Results: Improved both web performance and business metrics Jump to heading

The changes listed above were a success. We’re happy to say that with the November’s CrUX update, Sunday Citizen’s page achieved good scores for all their Core Web Vitals. The domain metrics show a 0.3s reduction in FCP and 1.1s reduction in LCP, as well as a CLS score that was sliced in half at 75th percentile.

After analyzing Shopify’s data, we were able to show over 6% improvement in conversion and 4% decrease in bounce rate. Users were also almost 4% more likely to add products to the cart, leading to more selling opportunities.

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 Sunday Citizen fulfilling all Core Web Vitals in November.

The performance journey is never over. Our next step would be to work on improving Interaction to Next Paint and then to optimize for the long tail of users that experience poor performance. Also, with ever-changing content and new features, one has to actively maintain the performance that has already been achieved.

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.

CONTENTS

Read similar articles tagged...

Back to blog