Largest Contentful Paint (LCP)

Technical Deep Dive & Specifications

What Qualifies as an LCP Candidate?

According to the W3C Paint Timing and Largest Contentful Paint specifications, only specific DOM element types are considered candidates for LCP:

+--------------------------------------------------------------------------+
|                        LCP CANDIDATE TAXONOMY                            |
+--------------------------------------------------------------------------+
|  ELIGIBLE FOR LCP:                                                       |
|    ├── <img> and <picture> raster images                                 |
|    ├── CSS background-image: url('...')                                  |
|    ├── <video> poster images & initial video frame                       |
|    ├── <svg> <image> raster wrappers                                     |
|    └── Block-level text containers (<h1>, <p>, <section> text)           |
|                                                                          |
|  EXCLUDED FROM LCP:                                                      |
|    ├── Pure CSS gradients (linear-gradient, radial-gradient)             |
|    ├── SVG vector paths (<path>, <circle>, <rect>)                       |
|    ├── HTML5 <canvas> elements                                           |
+--------------------------------------------------------------------------+

The Sizing & Boundary Calculation Algorithm

How does the browser determine which element is the "largest"?

1. Viewport Intersection: Only the visible area within the initial viewport matters. Content overflowing or positioned outside the viewport has an effective area of $0$.
2. Clipping & Margins: CSS margins, padding, and borders are excluded. Only the painted content box is counted.
3. Intrinsic vs. Rendered Size: $$\text{Reported Sizing Area} = \min(\text{Intrinsic Width} \times \text{Intrinsic Height}, \text{Rendered Width} \times \text{Rendered Height})$$
   • Downscaled Images: If a $4000\times3000\text{ px}$ image is rendered in a $400\times300\text{ px}$ box, the browser counts $400 \times 300 = 120,000\text{ px}^2$.
   • Upscaled Images: If a $100\times100\text{ px}$ image is stretched via CSS to $1000\times1000\text{ px}$, the browser only counts its intrinsic area: $100 \times 100 = 10,000\text{ px}^2$. This prevents blurry low-res placeholders from claiming LCP.
4. Dynamic Updates: As the page loads, each newly painted element that surpasses the previous largest element triggers a new LCP candidate entry. LCP reporting stops the millisecond the user interacts with the page (taps, clicks, keypresses).

The 4 Sub-Phases of the LCP Lifecycle

To systematically optimize LCP to meet the $\le 2.5\text{ s}$ threshold, senior performance engineers break LCP down into four distinct temporal phases:

0ms                                                                                   LCP Complete (<=2.5s)
 ├── Time to First Byte (TTFB) ──┤                                                              │
 │   [ DNS + TLS + Server Logic ] │                                                              │
 └────────────────────────────────┼── Load Delay ──┤                                             │
                                  │   [ HTML Parsing to Request Start ]                         │
                                  └─────────────────┼────── Resource Load Duration ──────┤       │
                                                    │       [ Image/Asset Network Stream ] │       │
                                                    └─────────────────────────────────────┼── Render Delay ──┤
                                                                                          │   [ CSS/JS Block ]

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 47 (fetchpriority="high"): Informs the browser's preload scanner that this <img> is the high-priority LCP candidate, elevating its network request stream above other asynchronous resources.
• Lines 58–78 (PerformanceObserver): Configures the browser to emit LCP events. As larger elements paint (e.g., first the <h1> headline, then the large <img>), new entries are pushed to the observer.
• Line 64 (latestEntry.renderTime || latestEntry.loadTime): Handles cross-origin image timing. If an image is served from an external CDN without a Timing-Allow-Origin header, the browser sanitizes renderTime to $0$ for security, falling back to loadTime.
• Line 79 (buffered: true): Retrieves paints that occurred before the JavaScript execution reached this line.

Expected Browser Render Output

[LCP Observer Telemetry Log]
> LCP Candidate Detected:
  • Tag: <H1> (ID: #headline)
  • Render Timestamp: 210.40 ms
  • Pixel Surface Area: 14280 px²
  • Resource URL: Inline Text

> LCP Candidate Detected:
  • Tag: <IMG> (ID: #hero-banner)
  • Render Timestamp: 680.15 ms
  • Pixel Surface Area: 280000 px²
  • Resource URL: https://images.unsplash.com/photo-1451187580459...