Your server is fast – your WooCommerce store still loads slow
You invested in a fast server. Good hosting, plenty of RAM, maybe even a CDN. Then you run your store through PageSpeed Insights – and the mobile score is still red. 23. 31. Largest Contentful Paint at 8.9 seconds.
It feels wrong. Server fast, site slow. How does that add up?
In almost every WooCommerce store that lands on my desk, it comes down to one single thing – and it has nothing to do with your server.
The real culprit: your hero image loads "lazy"
The metric dragging your mobile score down is LCP – Largest Contentful Paint: the time until the largest visible element is loaded. On a store that's almost always the hero image at the top – the banner, the key visual, the first product shot.
And in nearly every WordPress setup that exact image is lazy-loaded – deliberately delayed until the browser "thinks" it's needed. Lazy-loading is great for the 30 images below the fold. But for the image the user sees immediately, it's poison: the browser pushes your most important image to the back of the queue, waits, loads it late – and your LCP explodes.
The tragic part: you probably did it to yourself. WordPress has lazy-loaded every image automatically since 5.5. And your speed plugin (WP Rocket, Perfmatters, LiteSpeed Cache, Autoptimize…) doubles down and lazy-loads everything – including the hero.
The fix: load the top image "eager" and mark it high-priority
The solution isn't "turn off lazy-loading." It's: exclude that one above-the-fold image from lazy-loading and tell the browser it matters.
Technically that's two lines:
<!-- Don't lazy-load the hero — load it immediately, high priority -->
<img src="hero.webp" fetchpriority="high" loading="eager" alt="…">
<!-- And request it up front, before the browser even finishes the HTML -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
fetchpriority="high" tells the browser: this image first. loading="eager" disables lazy-loading. The <link rel="preload"> in the <head> kicks off the download before the <img> is even reached in the markup. Together they typically pull your LCP from 6–9 seconds down to under 2 – same server, same images.
The complete fix-list for WooCommerce / WordPress
- Find your LCP element. PageSpeed Insights shows it under "Largest Contentful Paint element." Usually: hero banner or first product image.
- Exclude the hero from lazy-loading. In Perfmatters: Lazy Load → Exclude. In WP Rocket: LazyLoad → Excluded images/iframes. Add the hero's filename or CSS class.
- Set
fetchpriority="high"on the hero<img>. Many themes/plugins now expose this as a toggle; otherwise add it via a theme filter. - Preload the hero in the
<head>(<link rel="preload" as="image">). WP Rocket and Perfmatters have a dedicated "Preload critical images" field. - Serve it as WebP/AVIF at the size actually displayed – don't cram a 2400px image into an 800px slot.
- No CSS background image for the hero. The browser can't preload background-images. Use a real
<img>. - Re-test on mobile. Always check the mobile score, not desktop – Google ranks on mobile.
One honest note: with WordPress + WooCommerce, ~90 is the realistic ceiling on mobile, not 100. That's perfectly fine – green is green. Anyone promising you 100/100 for a real store either has an empty store or is gaming the test.
Why this matters more than it sounds
LCP is an official Google ranking signal (Core Web Vitals). A slow first second costs you more than rankings – it costs revenue: every extra second of load time measurably lowers conversion. The beautiful part of this fix is that it's free – no new server, no pricier hosting. Just the right loading strategy for one single image.
Want the next build-it-yourself guides – with every gotcha? I publish a weekly issue on how I actually build stores, sites and AI workflows. Subscribe to the "Built with AI" newsletter and don't miss the next one.
Prefer done-for-you? If you'd rather have this fix (and the whole speed package – server migration, Core Web Vitals, custom plugins) handled for you instead of tinkering yourself: drop me a line. It's exactly what I do day to day.
Built with AI — the newsletter
Hands-on AI tutorials and the tools I actually use — straight to your inbox. Free, no hype.
Powered by Substack. Unsubscribe anytime.