Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element in the viewport, usually a hero image, banner, or large block of text, to finish rendering. To pass Core Web Vitals, keep LCP at or under 2.5s for 75 percent of real visits. Reducing LCP comes down to serving the LCP element sooner and removing everything that delays it.
Find your LCP element first
You cannot fix what you have not measured. Open Chrome DevTools, run a Lighthouse report or the Performance panel, and look for the element flagged as the LCP. Field data from the Chrome User Experience Report is the number Google actually uses, so validate lab fixes against real users too.
The four phases of LCP
Every LCP breaks down into four parts. Optimizing the largest phase gives the biggest win.
TTFB Load delay Resource load time Render delay Navigation start LCP timeSteps to reduce LCP
- Cut server response time (TTFB). A slow first byte delays everything after it. Enable server and page caching, use a fast stack, and keep database queries lean. ASEOHosting runs LiteSpeed on CloudLinux, and LiteSpeed Cache for WordPress or a static cache layer typically brings TTFB well under
200ms. - Remove resource load delay. The browser should discover the LCP image early. Never lazy-load the hero image; add
fetchpriority="high"to it, and preload it in the<head>:
Avoid loading the hero via CSS<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">background-image, which the browser finds late. - Shorten resource load time. Compress and right-size the image. Serve modern formats such as WebP or AVIF, set explicit
widthandheight, and provide asrcsetso mobile devices download smaller files. A hero image should rarely exceed 100 to 200 KB. - Reduce render delay. Render-blocking CSS and JavaScript hold back the paint. Inline critical CSS, defer non-critical stylesheets, and add
deferorasyncto scripts. Limit web fonts and usefont-display: swapso text paints immediately. - Use a CDN and HTTP/2 or HTTP/3. Serving static assets from edge locations close to the visitor cuts both TTFB and load time, especially for a global audience.
Common mistakes that inflate LCP
- Lazy-loading the above-the-fold hero image.
- Large uncompressed PNG or JPEG hero images.
- Loading the LCP element only after client-side JavaScript hydrates.
- Heavy render-blocking third-party scripts in the
<head>.
Work through the four phases in order, measure again, and repeat until the largest phase is under control. For guidance from the standards body, see the web.dev LCP optimization guide. Fast hosting is the foundation the rest of the work sits on, so a tuned stack matters: learn more about our WordPress SEO hosting and browse the full performance and Core Web Vitals guides.
