How do I fix Largest Contentful Paint (LCP)?

How do I fix Largest Contentful Paint (LCP)?Fix LCP by: identifying the LCP element in PageSpeed Insights, preloading it (e.g., hero image), serving it in a modern format (WebP/AVIF), inlining critical CSS, and eliminating render-blocking JavaScript before the LCP element renders.AnswerLCP optimization follows a predictable playbook. Step 1: open PageSpeed Insights, run your URL, scroll to the 'Largest Contentful Paint element' diagnostic — this tells you exactly which DOM element Google considers the LCP candidate. Step 2: optimize that element. If it is an image (typical for hero sections), serve it in WebP or AVIF, use the correct width/height attributes, and add a `<link rel="preload">` tag in the document head pointing to the image. If it is a text block, inline its critical CSS in the document head so it can render before any external stylesheet. Step 3: eliminate render-blocking resources before LCP: defer non-critical CSS with media queries, defer or async non-critical JavaScript, and avoid synchronous third-party scripts (analytics, chat widgets, A/B testing tools) above the fold. Step 4: serve from a CDN with HTTP/3 enabled. Most Canadian SMB sites can get LCP from 4+ seconds to under 2 seconds with these four steps.