Core Web Vitals & SpeedLCP

Largest Contentful Paint

Definition

Largest Contentful Paint (LCP) is a Core Web Vital metric measuring the time from initial page navigation until the largest visual content element within the user's viewport is fully rendered.

Why It Matters

LCP represents perceived load speed from a human perspective. When the primary above-the-fold content (hero image, heading text, or banner video) renders rapidly, users perceive the site as responsive and functional. LCP is an official Google ranking factor in page experience evaluations.

Google Core Web Vitals LCP Thresholds (75th Percentile)

Criterion / State	Requirement / Target	Status
Good (Pass)	≤ 2.5 seconds	Optimal
Needs Improvement	2.5 s – 4.0 seconds	Needs Work
Poor (Fail)	> 4.0 seconds	Avoid / Fail

Practical Implementation Example

Using Next.js Image with priority and fetchPriority='high' ensures the browser discovers the LCP image in the raw HTML stream before parsing external stylesheets.

src/components/Hero.tsx

import Image from 'next/image';

export function HeroBanner() {
  return (
    <section className="relative h-[480px] w-full">
      <Image
        src="/images/hero-visual.webp"
        alt="Platform analytics dashboard preview showing conversion rates"
        priority // Injects link rel="preload" in HTML head
        fetchPriority="high"
        fill
        sizes="(max-width: 768px) 100vw, 1200px"
        className="object-cover"
      />
    </section>
  );
}

Automated Verification

How to Audit LCP in ScanWise

ScanWise captures real synthetic and field LCP elements, pinpointing whether TTFB, resource load delay, resource load duration, or element render delay causes the majority of latency.

Identify your LCP element and bottlenecks in ScanWise

Common LCP Mistakes & How to Fix Them

Common LCP Mistakes & How to Fix Them
Mistake	Why It Hurts	The Fix
Applying loading='lazy' to above-the-fold hero images.	Lazy-loading delays the network request until layout calculation finishes, adding 1 to 2 seconds of pure delay to LCP.	Never lazy-load the primary hero image; use priority={true} instead.
Rendering the primary hero text inside client-side components hidden behind authentication loaders.	Client hydration cascades postpone text paint until heavy JavaScript bundles download and execute.	Server-render above-the-fold headings and hero copy in static or server components.