Maya Kapoor
How we brought LCP under 1.5s for a Shopify Plus store
A technical breakdown of how we optimized Javascript bundles and rendering paths to pass Google's Core Web Vitals.
The Hidden Cost of a Slow Store
Site speed is no longer just a UX issue; it is a fundamental SEO ranking factor. In 2021, Google rolled out the Page Experience update, making Core Web Vitals, specifically Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID), direct ranking signals.
For large e-commerce brands, particularly those on Shopify Plus, passing these vitals is notoriously difficult. A recent client came to us with a beautiful, high-converting store that was failing Core Web Vitals across the board. Their LCP was a sluggish 4.8 seconds on mobile, causing them to bleed organic rankings and driving up bounce rates on their expensive Meta traffic.
The Render Blocking Problem
Shopify’s app ecosystem is a double-edged sword. Every app you install injects Javascript directly into the <head> of your theme. The browser must download, parse, and execute all of this third-party code before it can even begin to paint the main product image.
The Technical Fix: A 3-Part Sprint
You cannot solve a 4.8s LCP by simply compressing images. You have to restructure the critical rendering path. We executed a deep technical optimization sprint focused on Javascript execution and resource prioritization.
1. App Consolidation and Code Purging
Over years of operation, the client had installed and uninstalled dozens of apps. However, uninstalling a Shopify app rarely removes its code from the theme. We manually audited the theme.liquid and removed thousands of lines of orphaned Javascript from 14 legacy apps that were still firing on every page load.
2. Script Deferral and Tag Management
Marketing tags (Klaviyo popups, Meta Pixels, TikTok trackers, Hotjar) are heavy and non-critical for the initial page render. We moved all non-essential third-party scripts into Google Tag Manager and set them to fire only on the Window.onload event or upon first user interaction (scroll/click). This cleared the main thread, allowing the browser to focus entirely on rendering the HTML and CSS.
3. Preloading and Strict Lazy Loading
We implemented strict native lazy-loading (loading="lazy") for all images below the fold, preventing the browser from downloading assets the user couldn’t see. Conversely, we added explicit <link rel="preload"> tags to the HTML head for the LCP element (usually the hero banner or main product image), forcing the browser to fetch it immediately with high priority.
The Results: Passing the Vitals
The impact was immediate. The mobile LCP dropped from 4.8s to a lightning-fast 1.2s. The CLS score stabilized to 0.01.
Within 30 days of passing Google’s Core Web Vitals assessment in Search Console, the client saw a 12% lift in organic visibility for their primary category keywords, and their paid media team reported a 15% decrease in cost-per-acquisition due to the drastically reduced bounce rate on mobile devices.
Maya leads the search practice at Gyrodile: technical SEO, content strategy and AI search visibility. She writes about what changes when the answer engine replaces the results page.
More insights from the Gyrodile teamMore from the playbook
