Home/AI Skills/Software Development/Core Web Vitals – Lcp [ PROMPT_NODE_24589 ] Core Web Vitals – Lcp [ SKILL_DOCUMENTATION ] # LCP optimization reference ## What is LCP? Largest Contentful Paint (LCP) measures when the largest content element in the viewport becomes visible. This is typically: - An `` element - An `` element inside `` - A `` element with poster image - An element with a background image via `url()` - A block-level element containing text nodes ## LCP timeline ``` [ Server Response ][ Resource Load ][ Render ] TTFB Download Paint └─────────────────────────────────────┘ LCP Time ``` ## Detailed optimizations ### 1. Server response time (TTFB) Target: < 800ms **Causes:** - Slow server/database queries - No CDN/edge caching - Inefficient backend code - Cold starts (serverless) **Solutions:** ```javascript // Use edge functions for dynamic content // Vercel example export const config = { runtime: 'edge' }; // Use stale-while-revalidate caching // Cache-Control header res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate=300'); ``` ### 2. Resource load time **For images:** ```html ``` **For text (web fonts):** ```css @font-face { font-family: 'Heading'; src: url('/fonts/heading.woff2') format('woff2'); font-display: swap; /* Show fallback immediately */ } ``` ### 3. Render blocking resources **Critical CSS pattern:** ```html /* Only above-fold styles, < 14KB */ .hero { /* ... */ } .nav { /* ... */ } ``` **Defer JavaScript:** ```html ``` ### 4. Client-side rendering **Problem:** Content not in initial HTML. **Solutions:** **Server-side rendering (SSR):** ```javascript // Next.js export async function getServerSideProps() { const data = await fetchHeroContent(); return { props: { hero: data } }; } ``` **Static site generation (SSG):** ```javascript // Next.js export async function getStaticProps() { const data = await fetchHeroContent(); return { props: { hero: data }, revalidate: 3600 }; } ``` **Streaming SSR:** ```jsx // React 18+ import { Suspense } from 'react'; function Page() { return ( <Suspense fallback={}> ); } ``` ## Framework-specific tips ### Next.js ```jsx import Image from 'next/image'; // LCP image with priority ``` ### Nuxt ```vue ``` ### Astro ```astro --- import { Image } from 'astro:assets'; import hero from '../assets/hero.jpg'; --- ``` ## Debugging LCP ```javascript // Identify LCP element new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); const lastEntry = entries[entries.length - 1]; console.log('LCP:', { element: lastEntry.element, time: lastEntry.startTime, size: lastEntry.size, url: lastEntry.url, renderTime: lastEntry.renderTime, loadTime: lastEntry.loadTime }); }).observe({ type: 'largest-contentful-paint', buffered: true }); ``` ## Common issues | Issue | Impact | Fix | |-------|--------|-----| | No preload for LCP image | +500-1000ms | Add `` | | Large unoptimized image | +300-800ms | Compress, use WebP/AVIF | | Render-blocking CSS | +200-500ms | Inline critical CSS | | Slow TTFB | +300-2000ms | CDN, edge caching | | Client-rendered content | +500-2000ms | SSR/SSG | Source: claude-code-templates (MIT). See About Us for full credits.