Largest Contentful Paint is the Core Web Vital most sites fail, and on most of them the culprit is the same image: the hero at the top of the page. Here is the order of operations that fixes it without touching the design.
1. Find the LCP element
PageSpeed Insights names it. Nine times out of ten it is the hero image or a background image set in CSS. If it is a background image, that alone costs you, because the browser discovers it late.
2. Stop lazy-loading it
Lazy-loading everything is the single most common self-inflicted LCP problem. The hero must load eagerly with fetchpriority="high". Rankavia Speed excludes the LCP image from lazy-loading automatically and adds the priority hint.
3. Preload it and size it
A <link rel="preload"> for the hero and explicit width and height attributes on every image. The first starts the download earlier; the second stops the layout jumping, which is a different metric but the same fix.
4. Serve a smaller file
WebP or AVIF, properly sized for the slot. A 2,400-pixel photograph in a 1,200-pixel column is the second most common problem after lazy-loading.
5. Get the server out of the way
Time to first byte caps everything after it. Page caching, a CDN in front of static files, and no render-blocking CSS above the hero. Only after these should anyone look at critical CSS or JavaScript delays.
Measure before and after with field data, not just lab scores. The plugin dashboard shows both for your key pages.
Leave a Reply