Affordable Golf: 8.5 seconds of CPU blocking eliminated, CLS into the green band

The challenge

Affordable Golf is a UK Shopify retailer in the golf-equipment category. The site was failing Google's Core Web Vitals on both Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), with mobile Total Blocking Time at 8,520ms — a full 8.5 seconds where the mobile CPU was unable to respond to user input after the page was visually rendered.

The diagnostic numbers from the opening audit:

• Desktop Performance Score: 41/100
• Mobile Performance Score: 26/100
• LCP (mobile): 4.7 seconds (Google threshold: 2.5s)
• CLS: 0.123 (Google threshold: 0.1)
• TBT: 8,520ms (Google threshold: 200ms)
• Main thread work: 41 seconds total

A Shopify site with this profile loses revenue at every layer: search rankings degrade because Core Web Vitals are a ranking signal, paid-traffic CPA inflates because high bounce rate inflates the cost-per-converted-visitor, and organic conversion rate caps because nobody waits 4.7 seconds for a hero image to load.

What I did

Three-phase engagement; Phases 1 and 2 complete (visuals + stability), Phase 3 (off-peak CPU cleanup) scheduled because the work touches third-party scripts and needs low-traffic windows.

Product page gallery optimisation (product-gallery.liquid). Isolated the primary product image using forloop.first. Stripped lazyload class, converted data-src to standard src, added fetchpriority="high" and loading="eager". The main product image is now first priority in the browser's download queue.

Header stability fix (header.liquid). Calculated explicit aspect-ratio height for the logo. Hardcoded width and height attributes. Eliminated the "push-down" effect where the header jumps after the logo loads.

USP bar optimisation (text-with-icons.liquid). Resized custom icons from 60x to 30x server-side. Hardcoded width="30" and height="30". Reduced CLS contribution and lightened asset load.

Homepage banner discovery (slideshow.liquid). Optimised the first banner in the slideshow loop. Removed lazyload and the bgset requirement for the first slide. Added fetchpriority="high".

Network efficiency (theme.liquid). Implemented early handshaking via preconnect and dns-prefetch for cdn.shopify.com, cdnjs.cloudflare.com, ajax.googleapis.com, and static.zdassets.com. Saved ~200-400ms.

BSS Product Label engine deferral. The Shopify Product Label app's JavaScript engine was blocking the CPU during initial paint. Wrapped the BSS script in a JS listener to delay execution until after DOMContentLoaded. Reduced TBT on mobile by approximately 3.0 seconds alone.

The outcome

Visual stability and LCP are now both passing Google thresholds. The remaining bottleneck is the third-party script payload, not anything inside the theme code.

A label-impact analysis run during Phase 2 measured exactly what the BSS Product Label engine alone was costing the site: 3 seconds of TBT, 5 seconds of main-thread work, and 21 desktop performance points.

What this case proves

Most Shopify performance problems aren't in the theme. They're in the apps the theme is forced to load. The 8.5-second TBT on Affordable Golf wasn't caused by anything Affordable Golf had written; it was caused by 12 Shopify Customer Events pixels, a ZenDesk chat widget, and Google Tag Manager all firing simultaneously on initial page load.

The fix is a sequence of judgement calls: which scripts are truly essential, which can be deferred, which need to be removed entirely. That's the operator decision-layer that DIY page-speed tools (PageSpeed Insights, GTmetrix, Cloudflare Speed) don't make for you. They diagnose. They don't decide.

The same playbook is the engine of every Speed Sprint engagement at £1,500.