# 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 `Hero ``` **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 ``` **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 ( }> ); } ``` ## Framework-specific tips ### Next.js ```jsx import Image from 'next/image'; // LCP image with priority Hero ``` ### Nuxt ```vue ``` ### Astro ```astro --- import { Image } from 'astro:assets'; import hero from '../assets/hero.jpg'; --- Hero ``` ## 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 |