The newest version of the Avenue theme achieves a 25% improvement in Largest Contentful Paint and a 24% in Cumulative Layout Shift at the 75th percentile. It is a great result of our collaboration with the theme author – Red Plug Design Co.
Working on a single website can be difficult by itself. But what if you have to prepare a solid, well-performing foundation for tens or even hundreds of them? This case study talks about some of the challenges all developers face when preparing their commercial themes. It also explains the different approaches they can take to address them.
Red Plug Design Co. is a Shopify Expert & Partner agency, providing custom design & development in addition to Theme Store themes. Performance is a growing factor for merchants choosing themes, so they decided to analyze and improve it for their offerings.
The challenge of working with base themes Jump to heading
The very first step of every engagement is gathering an overview of the current performance. When it comes to external communication, we usually use the information from the Chrome User Experience report. It’s an open resource that anybody can verify, but it requires you to choose a certain domain you want to check.
One option would be to look into the demo store available in the marketplace. Sadly, the traffic there is not high enough to provide a reliable picture of user performance. It's also preconfigured, so we may miss some issues that pop up for the actual stores.
But choosing a production, high-traffic store is not ideal either. Shopify merchants can customize their sites in an infinite number of ways that can impact performance. There’s also no guarantee that they will decide to move to a new, optimized version of a theme. It leaves us with no before and after to compare.
Adjusting our approach Jump to heading
We decided that building the performance baseline for a theme installed across multiple stores requires a different strategy. At Shopify, we’ve been collecting real user measurements for some time now. This dataset is too cumbersome to be available externally for now. That said, we’ve been using it to get a better insight into every website we get to work on.
We opted for a hybrid approach. First, we aggregated the performance data for all of the stores based on the Avenue. Then, we combined this information with WebPageTest reports and manual testing. It allowed us to spot any common issues while making sure they are not specific to a certain merchant.
Optimizing rendering performance Jump to heading
One of the issues we were able to confirm was a high Largest Contentful Paint. The lazy loading of important images is a common problem across Shopify and was applied here as well. We covered different techniques to address it on our blog, but in this case, the challenge is a bit different. Modern themes allow merchants to customize their stores more flexibly. They can build a page from predefined sections by dragging and dropping them in a desired order.
The ability to move sections around means that the theme author may not be able to determine where they’ll end up. This limitation pushed developers to apply lazy loading for all images in all those problematic places.
While this approach may save some bytes, it’s going to result in slower LCP if the image happens to end up at the top of the page. To address this, Avenue incorporates a mix of solutions that are currently available:
- Providing specialized sections (e.g. hero image) that are meant to be placed in more specific locations.
- Adding a section setting that let merchants choose if lazyloading should be enabled or not.
It’s worth noting that neither of the above solutions is perfect. That said, we are actively working on a solution that aims to solve this issue for such cases.
Investigating layout instability Jump to heading
Real user measurements suggested that high Cumulative Layout Shift should be our next priority. Interestingly, neither synthetic nor manual testing of the demo store showed any major layout shifts.
To solve this mystery, we investigated actual pages based on the Avenue theme. As it turns out, most of the layout instability was caused by customizations and apps installed by the merchants. Still, by adjusting the rendering process, we achieved some measurable improvement.
It shows how important it is to combine the data and different ways of testing the performance. Taking different angles at pinpointing and validating actual issues allows you to focus on the most impactful ones. It also lowers the probability you’ll end up spending a lot of time chasing ghosts.
Promising path forward Jump to heading
One of our team goals is to make as many Shopify stores fast for their users as possible. Compared to optimizing a single merchant’s website, cooperating with theme authors is a longer-term, but more scalable solution.
Working with Red Plug Design Co. allowed us to make their Avenue theme a fast foundation for their customers. The Largest Contentful Paint improved by 25%, and Cumulative Layout Shift by 24% at the 75th percentile. For us, it was a great opportunity to refine our strategy and performance reports for future engagements with other agencies.
We’re very lucky to have insight into the challenges theme developers face. It motivates us to work on platform-wide improvements that make it easier for them to optimize performance.