Skip to content

Largest Contentful Paint

Identify the candidate and its blocked phase before choosing an optimization.

Predict first

Before you read: predict

A proctor overview first displays a short text block, label. The harness then inserts a visible 500×300 patterned image, hero, and releases its response. No input occurs.

Which LCP candidate sequence does the observer report?

Pick one

The 30-second version

Use LCP to investigate when the page's main visible content becomes useful. Start with the recorded element and its blocked checkpoint. Local barrier tests distinguish states and request order; field reporting uses the published target separately. [S1, S2]

Identify the candidate and its blocked phase before choosing an optimization.

How it works

Step 1 of 10

Observe eligible visible text and images; size is painted area, not transfer bytes. [S1]

Analogy: An observatory's largest-object log

An observer writes a new line whenever a larger apparent object enters a telescope's view. A small early object remains part of the history even when a larger one becomes the current record. The log is chronological; sorting it by object size would destroy the observation sequence. When the observing session closes, later objects no longer revise that record.

Observatory Browser
Apparent area inside the view Eligible visible content area
New record holder Later larger LCP candidate
Session closes First input stops collection
Instrument ready but shutter closed Resource ready but element not rendered

In real terms, LCP is an observation of visible page content, not the biggest file fetched. The analogy breaks down because browser eligibility rules exclude some content, and the telescope has no HTML response, resource discovery or decoding. It also does not make “largest” a promise about what a person considers most important. A visually prominent background can be irrelevant while meaningful text is eligible. Always inspect the recorded element. [S1]

Examples, run for real

4.1 ExamHall: the overview candidate changes

EXH-1570 investigates the proctor overview; MR !1770 records candidate IDs and the blocked phase before changing image bytes. The fixture paints a small label, waits for its actual observer entry, then inserts a patterned image. Its response remains held until the request arrives. Once released, the image becomes the larger visible candidate. The observer reports the chronological sequence below. [S1]

A separate fresh navigation clicks the background after the first entry appears and before the later image is inserted. The image still loads and renders, but candidate collection is already closed. Stopping measurement does not stop the page from changing. Nor does it erase the earlier observation. This is why a late screenshot cannot reconstruct the loading metric reliably.

4.2 Catalog: four forced boundaries

The experiment holds the document response first. It then sends a small catalog page but creates no image yet. Next it inserts an image and holds its response. Finally it finishes and decodes the image while keeping the element hidden. Only after the last checkpoint does it show the image and wait for its LCP entry. These are explicit boundaries, not simulated stopwatch readings. [S2]

The saved checkpoints separately record document delivery, image request, image completion and candidate presentation. The corresponding investigation labels are TTFB, resource load delay, resource load duration and element render delay. Removing bytes from an already completed image does not release a visibility gate. Conversely, an undiscovered resource cannot benefit from a transfer optimization yet. Text LCP has no separate image download; use the breakdown appropriate to the actual element, rather than inventing an image stage for every page.

4.3 Catalog: discovery is not priority

A catalog hero is already discoverable in markup and carries high priority. A separate later image is either declared by a compatible head preload or created by a held script. The capture records each request before the script barrier opens; it grades request state and order, never a duration or a competing-request race. [S2, S3]

The saved request trace distinguishes the already-discoverable hero from the later image. A separate lazy-loading control uses a distant image and a later scroll boundary. This does not define Chromium's lazy-load distance as a web guarantee, nor promise that every lazy image waits for a scroll. It demonstrates the extra visibility-dependent discovery gate that makes lazy loading a poor default for intended LCP imagery. Render-blocking mechanics remain in perf-critical-rendering-path; this lesson examines which LCP phase contains the wait.

Try it

Answer first, then check. Nothing is saved.

Question 1 of 5

Two intended LCP images wait behind different gates. In variant X the server has accepted the image request but holds the body. In variant Y a client gate has not assigned the image URL yet, although HTML arrived.

Which pair classifies X then Y?

Pick one

Question 2 of 5

A page has a 200×120 catalog tile, then appends two 500×300 images: one at top:20000px, one with display:none. There is no input.

Which image remains the LCP candidate?

Pick one

Question 3 of 5

A catalog team must select the published good LCP target and reporting percentile.

Which pair matches the source?

Pick one

Question 4 of 5

Each variant has an already-discoverable high-priority hero and a held creator for a second catalog image. X also declares a compatible preload for that second image; Y gives it high priority only when the held script creates it.

Before release, which [hero,later] request pairs does the fixture record for X then Y?

Pick one

Question 5 of 5

The checkpoint recorder reports document received, image request recorded, image complete, and no candidate.

Which investigation belongs next?

Pick one

Go deeper

Pro tip

Record the element identifier, viewport and input history with an LCP investigation. They make two observations comparable and help explain why an image-focused change can leave a text-focused measurement unaffected. Keep device groups separate when examining field data. [S1]

Sources

Checked against the tools and docs as of 2026-09-29.