How to Improve Largest Contentful Paint (LCP) on Your Website
Why Largest Contentful Paint Matters More Than Ever Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element on your page to fully render. It could be a hero image, a headline, a video poster, or a large block of text. Google considers a good LCP score to be 2.5 seconds or less. Anything above 4 seconds is rated poor. As a Core Web Vital, LCP directly influences your search rankings, user experience, and conversion rates. If your pages feel sluggish, there is a strong chance your LCP score is the culprit. In this guide, we will walk through exactly how to diagnose and improve Largest Contentful Paint step by step, whether you are a developer tuning an Express.js application or a website owner trying to understand why your site feels slow. Step 1: Identify Your LCP Element Before you fix anything, you need to know what your LCP element actually is. Different pages may have different LCP elements. Here is how to find yours: Open Chrome DevTools and go to the Performance tab. Record a page load and look for the “LCP” marker in the timeline. Alternatively, run a Lighthouse audit. The report will explicitly tell you which element is your Largest Contentful Paint element. Use PageSpeed Insights or the Chrome User Experience Report (CrUX) for real-world field data. Common LCP elements include: Hero images or background images <img> tags above the fold <video> poster images Large heading or paragraph text blocks SVGs or canvas elements Pro tip: If your LCP element is text-based, your optimization path is significantly simpler. Text renders as soon as the CSS and fonts are ready. If it is an image, you have more work to do. Step 2: Reduce Server Response Time (TTFB) Everything starts with how fast your server responds. Time to First Byte (TTFB) is the foundation of LCP. If your server takes 1.5 seconds to respond, you have already burned more than half your LCP budget before the browser even starts rendering. How to Optimize TTFB Strategy What It Does Expected Impact Use a CDN Serves content from edge servers geographically close to users High Enable server-side caching Avoids regenerating pages on every request High Upgrade hosting Better CPU/memory means faster response times Medium to High Optimize database queries Reduces backend processing time Medium Use stale-while-revalidate Serves cached content while refreshing in the background Medium If you are running an Express.js server, consider adding response caching middleware and ensuring your routes do not perform expensive synchronous operations during the request lifecycle. Step 3: Eliminate Render-Blocking Resources Render-blocking CSS and JavaScript prevent the browser from painting content until they are fully downloaded and parsed. This is one of the most common reasons for a poor LCP score. CSS Optimization Inline critical CSS: Extract the CSS needed for above-the-fold content and place it directly in a <style> tag in the <head>. Defer non-critical CSS: Load the rest of your stylesheets asynchronously using rel=”preload” with an onload handler or the media attribute trick. Remove unused CSS: Tools like PurgeCSS can strip out styles your page never uses. On large projects, unused CSS can account for 80% or more of your stylesheet. Minify and compress: Use tools like cssnano for minification and ensure Brotli or Gzip compression is enabled on your server. JavaScript Optimization Add defer or async attributes to script tags that are not essential for initial rendering. Move third-party scripts (analytics, chat widgets, ad tags) below the fold or load them after the LCP element has rendered. Consider breaking your JavaScript bundle into smaller chunks and loading only what the current page needs. Step 4: Optimize Images (The Biggest LCP Win) Images are the LCP element on the majority of web pages. Optimizing them is often the single most impactful thing you can do to improve Largest Contentful Paint. Image Format Use modern image formats that offer better compression ratios than JPEG and PNG: WebP: Widely supported across all modern browsers. Typically 25-35% smaller than JPEG at comparable quality. AVIF: Even better compression than WebP, with growing browser support. In 2026, AVIF support is robust enough for production use with a JPEG fallback. Use the <picture> element to serve the best format each browser supports: <picture> <source srcset=”hero.avif” type=”image/avif”> <source srcset=”hero.webp” type=”image/webp”> <img src=”hero.jpg” alt=”descriptive alt text” width=”1200″ height=”600″> </picture> Responsive Images Do not serve a 2400px wide image to a phone with a 400px viewport. Use the srcset and sizes attributes to let the browser pick the right size: <img src=”hero-800.jpg” srcset=”hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w” sizes=”(max-width: 600px) 100vw, (max-width: 1200px) 80vw, 1200px” alt=”descriptive alt text” width=”1200″ height=”600″ > Image Loading Priorities This is critical and often overlooked: Never lazy-load your LCP image. Lazy loading tells the browser to deprioritize the image, which directly delays LCP. Use fetchpriority=”high” on the LCP image to tell the browser to download it as early as possible. Preload the LCP image if it is referenced in CSS (like a background image) rather than an <img> tag: <link rel=”preload” as=”image” href=”hero.webp” type=”image/webp”> Additional Image Tips Always specify width and height attributes to prevent layout shifts. Use an image CDN (like Cloudinary, imgix, or Cloudflare Images) that can dynamically resize, compress, and convert images on the fly. Compress images before upload. Tools like Squoosh, Sharp, or ImageOptim can dramatically reduce file sizes. Step 5: Optimize Font Loading If your LCP element is text, web fonts can be a hidden bottleneck. By default, many browsers hide text until custom fonts load (a behavior called FOIT, or Flash of Invisible Text). This means your largest text block might be invisible for hundreds of milliseconds or more. Font Loading Strategies Use font-display: swap: This tells the browser to show text immediately using a fallback font, then swap in the custom font once it loads. Add it to your @font-face declarations: @font-face { font-family: ‘CustomFont’; src: url(‘/fonts/custom.woff2’) format(‘woff2’); font-display: swap; } Preload your most important font files: <link rel=”preload” as=”font” href=”/fonts/custom.woff2″ type=”font/woff2″ crossorigin>
How to Improve Largest Contentful Paint (LCP) on Your Website Read More »
