Largest Contentful Paint

Why It Matters

• It is a Core Web Vital. LCP is one of the key metrics search engines use to evaluate user experience. Pages with poor LCP may be disadvantaged in rankings compared to faster competitors.
• It captures perceived load speed. Users do not care about technical loading timelines — they care about when the page looks ready. LCP measures that moment, making it the most user-relevant speed metric.
• Slow LCP drives visitors away. If the largest visible element takes more than a few seconds to appear, many users will leave before the page finishes loading. Speed is not just a nice-to-have — it directly affects engagement and conversions.
• It highlights the actual bottleneck. LCP pinpoints what is slow — usually a large image, a web font, or a render-blocking resource. Fixing the LCP element often has the biggest impact on perceived performance.

How to Improve It

1. Optimize your hero image. If the LCP element is an image, make sure it is properly compressed, served in a modern format (WebP or AVIF), and sized appropriately for the viewport. An oversized, uncompressed hero image is the most common LCP killer.
2. Preload the LCP resource. Use <link rel="preload"> to tell the browser to start downloading the LCP element (image, font, etc.) as early as possible, rather than waiting until the browser discovers it naturally during rendering.
3. Eliminate render-blocking resources. CSS and JavaScript that block rendering delay everything on the page, including the LCP element. Defer non-critical scripts and inline critical CSS so the browser can start painting sooner.
4. Speed up server response time. A slow server delays the very first byte of the HTML document, pushing back everything downstream. Optimize your server configuration, use caching, and consider a CDN to reduce Time to First Byte.
5. Avoid lazy-loading the LCP image. Lazy loading delays image loading until the element is near the viewport. The LCP image is already in the viewport on load — lazy loading it makes it load later than necessary.

Common Mistakes

• Lazy-loading above-the-fold images. Applying lazy loading to the hero image — the very element that determines LCP — forces the browser to wait before loading it. Only lazy-load images that are below the fold.
• Serving uncompressed or oversized images. A 5MB hero image on a page that could use a 200KB optimized version is the most common cause of slow LCP. Always compress images and serve them at the right dimensions.
• Loading too many render-blocking scripts. Every synchronous script and stylesheet the browser encounters before the LCP element must finish loading before anything paints. Minimize blocking resources in the document head.
• Ignoring server response times. Sometimes the bottleneck is not front-end at all — the server simply takes too long to respond. Slow database queries, missing caches, or an overwhelmed server push LCP back before the browser even gets started.