Loading…
Get your largest above-the-fold element to render in under 2.5s — the most important Core Web Vital.
LCP is the moment a visitor feels the page has loaded. Google targets under 2.5 seconds, and it is a confirmed mobile ranking signal. A slow LCP usually traces back to one heavy hero image, a slow server response, or render-blocking resources.
fetchpriority="high" so the browser loads them first.font-display: swap, and defer non-critical JavaScript so it does not delay the first paint.<img src="hero.png"> <!-- 2.4MB PNG, no priority hint, lazy --><link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" width="1200" height="600" alt="..." fetchpriority="high" decoding="async">Install a caching plugin (WP Rocket / LiteSpeed Cache) and enable WebP conversion + critical-CSS. Exclude the hero image from lazy-load so it is not deferred.
Use the theme's image_url + image_tag filters with a width and add preload for the hero in theme.liquid.
Use next/image with priority on the hero — it emits the preload + correct sizing automatically.
Run a free audit and get a prioritized fix list with auto-generated code.
Run a free audit