Skip to main content

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures when the primary, above-the-fold content finishes rendering in the user's viewport. Because it maps closely to perceived loading speed, LCP is usually the first metric to fix when a site "feels slow" even if everything eventually loads.

Quick Summary

A fast LCP requires a rapid server response (TTFB), immediate discovery of the LCP element (often via HTML preloading), and an optimized payload (such as a compressed WebP image or inlined critical CSS).

Concept Overview​

What Is LCP?​

LCP measures the render time of the largest visible element in the initial viewport — the exact moment when the primary content becomes fully visible and consumable by the user.

Why It Matters​

LCP shapes the user's first impression of your site's speed. A poor LCP (> 4s) makes the page feel completely stuck, even if smaller background elements loaded earlier.

  • Google ranking factor: LCP directly and heavily influences search positioning.
  • Bounce rate driver: Slow hero loading causes users to leave before interacting.
  • Revenue lever: A faster hero load equals demonstrably higher conversion rates.

Thresholds​

RatingTime (mobile)
Good≤ 2.5s
Needs Improvement2.5–4.0s
Poor> 4.0s

What Counts as the LCP Element​

ElementExampleNotes
Hero imageFeatured banner or top product photoThe most common LCP element on WordPress. Optimize this first.
Background image<div style="background-image: url(...)">CSS backgrounds count if they are visible in the viewport.
H1 or main text blockPage title or hero headingIf text finishes loading before images, it can be flagged as the LCP element.
Video posterEmbedded video thumbnailPoster images are frequently enormous and unoptimized.
Non-Qualifying Elements

Logos, favicons, ad units, off-screen images, and any elements strictly below the fold do not count as your LCP element.

Step-by-Step Examples​

Example 1: Identify Your LCP Element​

  1. Open Chrome DevTools → Performance tab.
  2. Enable the Web Vitals overlay checkbox.
  3. Reload the page while recording.
  4. The timeline will explicitly highlight the element responsible for your LCP.

Example 2: Preload the LCP Hero Image​

preload-hero.html
<!-- Add to <head> for immediate hero image loading -->
<link rel="preload" as="image" href="/wp-content/uploads/hero-banner.webp" fetchpriority="high">

Why this works: The browser can start downloading the hero image as soon as it parses the <head>, instead of waiting to discover it later through CSS/JS.

Example 3: Convert and Compress the Hero Image​

convert-webp.sh
# Convert a heavy PNG to WebP with quality 80
cwebp -q 80 hero-banner.png -o hero-banner.webp

# Verify the massive size reduction
ls -la hero-banner.png hero-banner.webp

Expected Result: A heavy 2.4 MB PNG can often be reduced to a ~200 KB WebP file with minimal visible quality loss.

Example 4: Generate and Inline Critical CSS​

If your LCP is an H1 text element or relies heavily on a stylesheet, the CSS file itself blocks the rendering.

lscache-settings.txt
Using LiteSpeed Cache:
Navigate to Page Optimization → CSS Settings:
  - Generate Critical CSS = ON
  - Load CSS Asynchronously = ON

Practical Use Cases​

Blog with Heavy Hero Banner​

Problem: A 2.5 MB PNG hero image delays LCP to 5.1s. Fix: Convert the file to WebP (saving significant weight) and preload it using fetchpriority="high". Result: LCP drops from 5.1s to 1.9s.

WooCommerce Product Pages​

Problem: The product gallery lazy-loads the primary product image. Fix: Exclude the first main product image from lazy loading, and add a preload hint. Result: LCP drops from 3.8s down to 2.1s, creating a snappier shopping experience.

Landing Page with CSS Background Hero​

Problem: The hero image is set via CSS background-image, so the browser discovers it later than an inline <img>. Fix: Add a direct <link rel="preload" as="image" href="..."> element to the <head> and strictly inline the background CSS. Result: The browser downloads the asset preemptively, fixing LCP.

Common Mistakes & Troubleshooting​

MistakeExplanationFix
Lazy loading the LCP imageThe browser intentionally defers loading the most important image on the screen.Set loading="eager" or explicitly exclude it from your optimization plugin's lazy load.
No preload hint for the heroThe browser discovers the hero late in the rendering pipeline.Inject <link rel="preload" as="image"> as high in your <head> as possible.
Using sliders/carouselsCarousel JS must execute fully before the image appears.Replace immediately with a static hero image.
Serving uncompressed JPG/PNGA massive payload dominates bandwidth and download time.Always convert to AVIF or WebP.

Best Practices​

  • Never lazy load above-the-fold elements: The LCP hero element must begin loading instantly.
  • Preload the LCP image natively using fetchpriority="high".
  • Reduce render-blocking work: Defer scripts that are not required for the initial render.
  • Use font-display: swap to guarantee that text renders instantly, even if the custom web font is still downloading.
  • Avoid autoplay videos above the fold: Videos are catastrophic for mobile LCP scores.

Quick Reference​

LCP Optimization Checklist
  1. Measure server response and ensure TTFB is < 200ms.
  2. Ensure the LCP element is requested early (preload, fetchpriority="high").
  3. Ensure the LCP payload is tiny (WebP compression, responsive srcset).
  4. Ensure rendering is unblocked (Critical CSS inlined, JS deferred).

What's Next​