LCP Monitoring
Monitor Largest Contentful Paint and understand how Coframe's anti-flicker affects it
Copy this guide and your current settings as a prompt for your AI agent.
Preview agent promptSee the guide, code and settings included when you copy.
Largest Contentful Paint (LCP) measures the time from when a page navigation starts until the largest image or text block visible in the viewport is rendered. It is one of the three Core Web Vitals and a primary indicator of perceived load speed. Google’s published threshold for a “good” LCP score is under 2.5 seconds at the 75th percentile of real-user page loads.
When Coframe is installed, the anti-flicker mechanism deliberately delays body visibility until variants are applied or a timeout elapses. Understanding that interaction is essential for interpreting LCP measurements on pages running Coframe experiments.
On this page
01How Coframe Affects LCP
Coframe’s anti-flicker snippet runs synchronously in <head> and sets body { opacity: 0 } before the browser first paints. The body remains hidden until one of two things happens:
- The SDK applies its variant changes and explicitly reveals the body.
timeoutMselapses — the default for installed sites is 1000 ms — and the failsafeshow()call runs.
Because LCP is measured against visible content, any element whose paint is blocked by the opacity hide counts as not yet painted from the browser’s perspective. This means that on pages where the LCP candidate sits inside <body>, the anti-flicker reveal is on the critical path for LCP.
In the best case — variants loaded and applied quickly — the body is revealed as soon as the SDK finishes, and LCP reflects the time to fetch, apply, and paint the variant. In the worst case — SDK unavailable or slow — the body reveal is delayed up to timeoutMs before the failsafe fires. The page is never permanently hidden; this is a fail-open design. See Anti-Flicker for the full mechanism, including why the snippet must be installed synchronously.
02Measuring LCP With and Without Coframe
The recommended way to isolate Coframe’s contribution to LCP is a side-by-side comparison: one measurement with Coframe active, one with it disabled.
Append ?cf_disabled to any page URL to disable Coframe for that load:
https://yoursite.com/?cf_disabledWith ?cf_disabled present, the install script exits before the SDK loads or the anti-flicker body hide runs — so an LCP measurement with the parameter is a clean baseline, and the same measurement without it shows LCP with Coframe active. The difference reflects the cost of the SDK load and anti-flicker delay for that page and network condition.
This technique is described in full in Testing and Validation. For loading a specific variant in preview mode — useful when you want to measure LCP for a particular variant rather than a live experiment assignment — see Preview and Debug.
To adjust the anti-flicker timeout for your site, see timeoutMs in Config Reference.
03Field vs Lab Measurements
Lab measurements (Lighthouse, the Performance panel, WebPageTest) run in a controlled environment and produce reproducible LCP numbers. Field measurements (Chrome User Experience Report, real-user monitoring tools) capture actual visitor conditions — varying network speeds, device capabilities, cache state, and geography.
For Core Web Vitals reporting purposes, Google evaluates field data at the 75th percentile. Lab data is useful for diagnosing regressions and running the ?cf_disabled comparison above, but a change that improves lab LCP does not always move field LCP in the same direction or by the same magnitude.
Use both: lab measurements for iterative investigation, field measurements for tracking long-term trends. See Core Web Vitals for how LCP fits alongside other metrics in a Coframe setup.
# LCP Monitoring
Monitor Largest Contentful Paint and understand how Coframe's anti-flicker affects it
Largest Contentful Paint (LCP) measures the time from when a page navigation starts until the largest image or text block visible in the viewport is rendered. It is one of the three Core Web Vitals and a primary indicator of perceived load speed. Google’s published threshold for a “good” LCP score is under 2.5 seconds at the 75th percentile of real-user page loads.
When Coframe is installed, the anti-flicker mechanism deliberately delays body visibility until variants are applied or a timeout elapses. Understanding that interaction is essential for interpreting LCP measurements on pages running Coframe experiments.
## How Coframe Affects LCP
Coframe’s [anti-flicker](../docs/anti-flicker.html) snippet runs synchronously in `<head>` and sets `body { opacity: 0 }` before the browser first paints. The body remains hidden until one of two things happens:
- The SDK applies its variant changes and explicitly reveals the body.
- `timeoutMs` elapses — the default for installed sites is 1000 ms — and the failsafe `show()` call runs.
Because LCP is measured against visible content, any element whose paint is blocked by the opacity hide counts as not yet painted from the browser’s perspective. This means that on pages where the LCP candidate sits inside `<body>`, the anti-flicker reveal is on the critical path for LCP.
In the best case — variants loaded and applied quickly — the body is revealed as soon as the SDK finishes, and LCP reflects the time to fetch, apply, and paint the variant. In the worst case — SDK unavailable or slow — the body reveal is delayed up to `timeoutMs` before the failsafe fires. The page is never permanently hidden; this is a fail-open design. See [Anti-Flicker](../docs/anti-flicker.html) for the full mechanism, including why the snippet must be installed synchronously.
## Measuring LCP With and Without Coframe
The recommended way to isolate Coframe’s contribution to LCP is a side-by-side comparison: one measurement with Coframe active, one with it disabled.
Append `?cf_disabled` to any page URL to disable Coframe for that load:
TEXT
```
https://yoursite.com/?cf_disabled
```
With `?cf_disabled` present, the install script exits before the SDK loads or the anti-flicker body hide runs — so an LCP measurement with the parameter is a clean baseline, and the same measurement without it shows LCP with Coframe active. The difference reflects the cost of the SDK load and anti-flicker delay for that page and network condition.
This technique is described in full in [Testing and Validation](../docs/testing-and-validation.html). For loading a specific variant in preview mode — useful when you want to measure LCP for a particular variant rather than a live experiment assignment — see [Preview and Debug](../docs/preview-and-debug.html).
To adjust the anti-flicker timeout for your site, see `timeoutMs` in [Config Reference](../docs/config-reference.html).
## Field vs Lab Measurements
Lab measurements (Lighthouse, the Performance panel, WebPageTest) run in a controlled environment and produce reproducible LCP numbers. Field measurements (Chrome User Experience Report, real-user monitoring tools) capture actual visitor conditions — varying network speeds, device capabilities, cache state, and geography.
For Core Web Vitals reporting purposes, Google evaluates field data at the 75th percentile. Lab data is useful for diagnosing regressions and running the `?cf_disabled` comparison above, but a change that improves lab LCP does not always move field LCP in the same direction or by the same magnitude.
Use both: lab measurements for iterative investigation, field measurements for tracking long-term trends. See [Core Web Vitals](../docs/core-web-vitals.html) for how LCP fits alongside other metrics in a Coframe setup.
## Related
- [Anti-Flicker](../docs/anti-flicker.html) — how Coframe hides the body on load and when it reveals it
- [Core Web Vitals](../docs/core-web-vitals.html) — broader context for performance metrics in a Coframe setup
- [Testing and Validation](../docs/testing-and-validation.html) — the `?cf_disabled` comparison technique and SDK verification checklist
- [LCP Regressions](../docs/lcp-regressions.html) — diagnosing and resolving LCP regressions after Coframe rollout
- [Preview and Debug](../docs/preview-and-debug.html) — loading specific variants for targeted LCP measurement
- [Config Reference](../docs/config-reference.html) — `timeoutMs` and other configuration options