Problem
Poor Core Web Vitals on Shopify
Since its inception, Schoolyard Snacks has seen rapid growth. Increasing demand and a change in ownership put significant pressure on Schoolyard Snacks, particularly on its Shopify Plus ecommerce website.
The new ecommerce team at Schoolyard Snacks had inherited technical debt that was not fully understood. Schoolyard Snacks simultaneously runs promotional, catalog, and UX experiments to optimize marketing spend and Shopify store conversion rates.
With the ever-increasing number of marketing tracking pixels, Shopify apps, and conversion optimization snippets installed, the site’s speed and user experience began to suffer. This led to frustrated customers, declining traffic, and decreasing revenue.
To address these challenges, Schoolyard Snacks’ new ownership team partnered with SpeedSense. Their goals were to optimize the web performance of their Shopify Plus storefront, enhance user experience, pass Google’s Core Web Vitals, and ultimately boost revenue.
To help justify the project, Schoolyard Snacks didn’t just take our word for it; using our web performance ROI models powered by industry benchmarks we predicted lift for traffic, conversion rate, and revenue. Our models showed that by improving site speed to pass Google Core Web Vitals, Schoolyard Snacks’ can expect:
- Between 9% and 13% increase in traffic
- Between 4% and 14% boost in conversion rate
- Yielding a 7% to 13% jump in ecommerce revenue.
This clearly shows a massive opportunity in site speed improvement and the effect on ecommerce revenue.
The first challenge was to fix rendering performance - particularly Largest Contentful Paint, one of three Google Core Web Vitals. For Schoolyard Snacks, the Shopify Plus site was taking over 7 seconds to render the hero element on desktop — that’s a looooong time! The goal for any site is to render LCP in under 2.5 seconds.
Sensai, our site speed intelligence platform, scored Schoolyard Snacks as follows on May 1, 2024:
Approach
Shopify Site Speed Audit
To determine the root cause of slowness on theSchoolyard Snacks website, we needed to dive deep under the hood of their Shopify Plus store with a site speed audit.
We knew rendering was a problem, but where on the site, and where in the code specifically? That is where our site speed monitoring platform, Sensai, comes in. Sensai plugged into Schoolyard Snacks' GA4 account to merge user behaviour, Core Web Vitals, and the results of thousands of performance scans for every page of the site.
Our audit focussed on the areas of the site which receive the most traffic to make the biggest impact with the smallest effort. In Schoolyard Snacks’ scenario, 90% of its traffic is distributed on just 4 Shopify templates: homepage, category pages, product detail pages, and blog posts.
Immediately after reviewing initial results, a major root cause for slowness was apparent.
Solution
Remove Google Optimize and Anti-Flicker Snippet
Schoolyard Snacks had deployed Google Optimize and the corresponding anti-flicker snippet, as is commonly used with client-side A/B testing tools. Here is the catch: Google Optimize is no longer running. Instead of getting into a discussion on how to run A/B testing in a performant way, we knew the script had to go since A/B testing with Google Optimize was not happening regardless, and the delay introduced was harming the UX badly!
Below, you will find a sample of our audit recommendation.
Recommendation
Delete the anti-flicker and Optimize import code blocks that seem to appear on every page. This code is not originating in the Google Tag Manager, but is instead early in the <body> tag in the Shopify theme. It also shows up with JavaScript disabled, so it’s coming from the original server HTML response.
Justification
Optimize is an obsolete A/B testing product, so experiments cannot be run. The code is still in place to hide the page for up to 10 seconds while the experimentation files are loaded and run.
Considerations
May introduce CLS and INP side-effects, as the page will no longer be hidden during the initial load. Subsequent recommendations address these side-effects.
Schoolyard Snacks determined that the effort to remove Google Optimize was trivial — a best-case scenario for high reach, high impact, and high confidence recommendations.
Within an hour this was fixed, tested, and deployed. On to the results!
Results
At the time of writing this case study, Schoolyard Snacks is now passing the Google Core Web Vitals assessment on both mobile and desktop devices. This is a huge win for the brand!
Google Search Console recognized the performance improvement very quickly, flipping tons of red hot issues to a calming green. Here’s a before and after comparison of the percentage of pages with Google Core Web Vital issues according to Google Search Console:
Sensai health scores are in very good shape as well. As expected, with Google Optimize and its anti-flicker snippet gone, layout shifts are more apparent. We tackled that next!
Rendering of the Shopify site improved dramatically - Desktop LCP in particular dropped from over 7,000ms to 2,100ms! This yielded an improved user experience immediately and a boost in SEO traffic.
More Shopify site speed audit recommendations are shipping soon, and we expect to see traffic, engagement, and revenue to climb. Stay tuned for updates!
