The starting point: 4.2s LCP on mobile
A mid-size Shopify merchant came to us with a brutal problem: their product pages were ranking on page 2 despite strong backlinks, and CrUX showed a 4.2s LCP at the 75th percentile. The hero image — a 600kb JPEG — was the obvious culprit, but the deeper issue was the round trip to Shopify's origin for every image variant.
Step 1: AVIF at the edge
We moved the entire image pipeline to Cloudflare R2 with on-the-fly AVIF conversion. The same hero image dropped from 600kb to 78kb without visible quality loss. Even better, the cache hit ratio climbed to 98% after the first week, meaning visitors almost never paid the cold-start cost.
Step 2: Predictive prefetching
We added a lightweight intersection observer that prefetches the next product's hero image as soon as the user scrolls past the fold of the current one. On mobile, where users swipe through products quickly, this turned a 1.8s LCP into a near-instant render on subsequent pages.
Step 3: HTML streaming
We replaced the default theme rendering with a streamed response that flushes the head and hero markup before the rest of the page is computed. The browser starts the LCP image download 400ms earlier — a free win that requires zero design changes.
Results after 30 days
LCP dropped from 4.2s to 1.6s. Mobile conversion rate climbed 23%. Organic traffic to product pages grew 41% in the following quarter as Google re-evaluated the site's mobile experience signals.