LCP measures the time until the largest visible content element in the viewport finishes rendering. It is the primary metric for perceived load speed — when LCP fires, the user feels the page is ready even if background resources are still loading.
What counts as the largest element
The browser considers these element types as LCP candidates:
- Images (
<img>,<image>in SVG) - Video poster frames
- Elements with a CSS background image
- Block-level text nodes (headings, paragraphs)
The candidate can change as the page loads — a large image that loads late can replace an earlier text heading as the LCP element. The browser emits a new event each time the candidate changes, and the final value is what matters.
How Witnes captures it
Witnes uses a PerformanceObserver listening for
largest-contentful-paint entries with buffered: true so no early
candidates are missed. The observer updates the tracked value every time the browser reports
a larger candidate. The value is snapshotted at the load event, which captures
the final state before user interaction can invalidate LCP candidates.
What good looks like
Witnes uses different thresholds than Google Web Vitals. The table shows both for comparison:
| Range | Witnes | Google Web Vitals |
|---|---|---|
| < 2 500 ms | Good | Good |
| 2 500 – 3 000 ms | Good | Needs Improvement |
| 3 000 – 4 000 ms | Needs Improvement | Needs Improvement |
| 4 000 – 5 000 ms | Needs Improvement | Poor |
| > 5 000 ms | Poor | Poor |
Witnes uses wider thresholds because Overall Health requires both LCP and CLS to pass simultaneously — a combined requirement justifies slightly relaxed individual thresholds.
LCP and Overall Health
LCP is one of the two inputs to the Overall Health score. For the session-level Sentiment Score, LCP is evaluated separately: an LCP above 4 000 ms triggers the Slow Visual Load symptom, which is one factor toward a Bad grade.