A field guide to Core Web Vitals
Core Web Vitals provide a shared vocabulary for loading, interaction and visual stability. In 2022 that means Largest Contentful Paint, First Input Delay and Cumulative Layout Shift—measured at the 75th percentile, with field evidence taking precedence over a perfect laboratory run.
Know what each number can tell you
LCP measures when the principal visible content finishes rendering. FID records the delay between a real user’s first interaction and the browser becoming able to process it. CLS measures unexpected movement over the life of the page. They describe different failure modes and should not be combined into one average performance score.
Chrome User Experience Report data is aggregated over a rolling 28-day window. Search Console exposes that evidence by groups of similar URLs, not as an instant test of the deployment made this morning. Lighthouse and WebPageTest are controlled diagnostics; they can reproduce problems and support release gates, but they do not replace field measurement.
| SIGNAL | GOOD | USEFUL DIAGNOSTIC |
|---|---|---|
| LCP | ≤ 2.5 seconds | Waterfall and element timing |
| FID | ≤ 100 milliseconds | Total Blocking Time as a lab proxy |
| CLS | ≤ 0.10 | Layout-shift attribution |
Measure templates, not a convenient URL
Group pages by rendering behaviour: editorial article, listing, product detail, account page, search result and campaign landing page. Sample busy and quiet examples from each group on an agreed mobile device and connection profile. A fast homepage says little about a product page with a recommendation widget, six tracking tags and user-generated images.
Record the test environment with every result. Browser version, viewport, network shaping, cache state, consent state and geographic test location materially affect the output. Retain trace files and waterfalls for regressions; a screenshot of a green score cannot explain why the result changed.
Improve LCP from the dependency chain outward
Identify the LCP element before changing bundles. If it is an image, make the correctly sized candidate discoverable in the initial HTML, avoid loading it through a client-side carousel and do not apply lazy loading to it. Preload only when the browser cannot otherwise discover the resource early; excessive preloads compete with CSS, fonts and other critical requests.
If the LCP element is text, inspect stylesheet and font dependencies. Deliver the minimum blocking CSS for the initial view, use an appropriate font-display strategy and avoid waiting for application JavaScript before rendering server-known content. Reduce server response time through caching and query work before attempting to recover the same delay with browser hints.
Treat FID as main-thread capacity
FID is collected only when a user interacts, so pages with little interaction may have sparse field evidence. Use Total Blocking Time in laboratory tests to locate the long tasks most likely to delay an input. Break work into smaller units, remove unused JavaScript and defer non-essential initialisation until after the primary interface is ready.
Profile execution rather than relying on compressed bundle size. A small script can perform expensive DOM work; a larger library may parse once and remain idle. Test low-powered mobile hardware, where parse, compile and execution costs are more visible than on a developer workstation.
Prevent layout shift at the source
Reserve space for images, video, advertising and embedded tools before they arrive. Do not inject consent notices or promotional banners above existing content without an allocated container. Font substitution should preserve a similar line length and vertical rhythm, particularly in headings that can push an entire page downward when the final face loads.
Use the browser’s layout-shift attribution to identify the element that moved and the element that caused it to move; these are not always the same node. Exercise menus, validation messages, accordions and delayed personalisation during testing, because instability after the initial load contributes to the field result.
Do not report Lighthouse Performance as “the Core Web Vitals score.” Lighthouse is a weighted laboratory model. Core Web Vitals pass or fail individually from field data at the 75th percentile.
Make third parties accountable
Tag managers, analytics, advertising, chat and experimentation platforms consume network and main-thread capacity belonging to the product. Inventory every third-party origin, its business owner, loading condition and expiry date. Measure a representative page with and without each class of script so the cost is visible during renewal and campaign decisions.
Set regression thresholds per template and run them before release. Then annotate deployments in the field-data dashboard and review the corresponding 28-day trend. Improvement is an operating practice: ownership, measurement and removal of recurring cost matter more than a one-off optimisation sprint.