Error Codes Wiki

Largest Contentful Paint (LCP) Too Slow — Core Web Vitals Performance Fix

Warninggeneral

Overview

Fix slow Largest Contentful Paint (LCP) Core Web Vital score affecting user experience and SEO ranking when the main content takes too long to render.

Key Details

  • LCP measures when the largest visible content element (image, text block, video) finishes rendering
  • Google considers LCP good if under 2.5 seconds, needs improvement between 2.5-4s, and poor over 4 seconds
  • LCP is a Core Web Vital metric used by Google as a ranking signal for search results
  • Common LCP elements: hero images, banner images, large text headings, video poster images
  • LCP is affected by server response time, render-blocking resources, slow resource loading, and client-side rendering

Common Causes

  • Slow server response time (TTFB over 500ms) delaying the entire page load
  • Large hero image not optimized or not using modern formats (WebP, AVIF)
  • Render-blocking CSS and JavaScript preventing the browser from rendering content
  • Client-side rendering (React, Vue) requiring JavaScript execution before content is visible

Steps

  1. 1Measure LCP: run Lighthouse in Chrome DevTools > Performance or use PageSpeed Insights
  2. 2Optimize the LCP image: use WebP/AVIF format, set appropriate dimensions, add width/height attributes
  3. 3Preload the LCP resource: <link rel='preload' as='image' href='hero.webp'> in the document head
  4. 4Reduce TTFB: use a CDN, optimize server processing, enable server-side caching
  5. 5Remove render-blocking resources: defer non-critical CSS and JS, inline critical CSS

Tags

lcpcore-web-vitalsperformanceseopage-speed

More in General

Frequently Asked Questions

It changes during page load. The browser tracks the largest visible element as the page renders. Use Chrome DevTools Performance tab > Timings > LCP to see which element was identified. Usually it is the hero image or the largest text block.