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).
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.
After analyzing the page, we were able to suggest and apply the following fixes:
- Most of the render-blocking resources were moved to cdn.shopify.com as described in our blog post on using Shopify’s CDN to achieve better performance.
- The rest of them were coming from a third party app which was updated to a newer, more performant version with the help of its support team.
- Thanks to another article explaining resource hints the team was able to clean up all of the preloads and preconnects.
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.
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.
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.