# Core Web Vitals — Optimization Reference A comprehensive guide to measuring, diagnosing, and fixing Core Web Vitals issues. These three metrics (LCP, INP, CLS) are Google's primary user experience signals and directly affect search rankings, ad Quality Score, and conversion rates. --- ## Thresholds Summary | Metric | Good | Needs Improvement | Poor | |---|---|---|---| | **LCP** (Largest Contentful Paint) | < 2.5s | 2.5s – 4.0s | > 4.0s | | **INP** (Interaction to Next Paint) | < 200ms | 200ms – 500ms | > 500ms | | **CLS** (Cumulative Layout Shift) | < 0.1 | 0.1 – 0.25 | > 0.25 | Google uses the 75th percentile of page loads (p75) from the Chrome UX Report (CrUX) for ranking signals. Optimizing for the median is not enough — you must bring the 75th percentile into the "good" range. --- ## LCP — Largest Contentful Paint ### What It Measures The render time of the largest visible content element in the viewport. LCP elements are typically: - `` elements (most common LCP element on the web) - `` poster images - Elements with CSS `background-image` - Block-level text elements (``, ``, etc.) ### Common Causes of Poor LCP **1. Slow Server Response Time (TTFB > 800ms)** - The browser cannot start rendering until it receives the first byte of HTML - Target TTFB: < 800ms for the document request - Causes: Unoptimized database queries, no server-side caching, no CDN, under-provisioned hosting, application-level bottlenecks **Fix strategies:** - Implement a CDN for static assets and HTML (Cloudflare, Fastly, CloudFront) - Enable server-side caching (Redis, Memcached, Varnish, full-page cache) - Optimize database queries (indexing, query optimization, connection pooling) - Use HTTP/2 or HTTP/3 for multiplexed connections - Consider edge computing (Cloudflare Workers, Vercel Edge Functions) to reduce latency - Upgrade hosting if consistently over capacity **2. Render-Blocking Resources** - CSS and synchronous JavaScript in the `` block rendering until they download and execute - Every additional blocking resource adds to LCP **Fix strategies:** - Inline critical CSS (the CSS needed for above-the-fold content) directly in the `` - Defer non-critical CSS with `media="print" onload="this.media='all'"` or load asynchronously - Add `defer` or `async` attribute to non-critical `
`, etc.) ### Common Causes of Poor LCP **1. Slow Server Response Time (TTFB > 800ms)** - The browser cannot start rendering until it receives the first byte of HTML - Target TTFB: < 800ms for the document request - Causes: Unoptimized database queries, no server-side caching, no CDN, under-provisioned hosting, application-level bottlenecks **Fix strategies:** - Implement a CDN for static assets and HTML (Cloudflare, Fastly, CloudFront) - Enable server-side caching (Redis, Memcached, Varnish, full-page cache) - Optimize database queries (indexing, query optimization, connection pooling) - Use HTTP/2 or HTTP/3 for multiplexed connections - Consider edge computing (Cloudflare Workers, Vercel Edge Functions) to reduce latency - Upgrade hosting if consistently over capacity **2. Render-Blocking Resources** - CSS and synchronous JavaScript in the `