Core Web Vitals

Core Web Vitals are the three field metrics Google reads for page experience: Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint.

• Largest Contentful Paint, LCP: how long until the main content paints. Good up to 2.5 s. Poor above 4 s.
• Cumulative Layout Shift, CLS: how much content jumps while loading. Good up to 0.1. Poor above 0.25.
• Interaction to Next Paint, INP: delay from your tap or click to the next paint. Good up to 200 ms. Poor above 500 ms.

INP replaced First Input Delay as a Core Web Vital in March 2024. Aim for good on all three for key templates like your homepage, /pricing and /guides/getting-started.

Field data is from the Chrome User Experience Report. It uses the 75th percentile of real Chrome users over 28 days, per URL or per origin. This is the assessment Google cites.

PageSpeed Insights shows field data when there is enough traffic, plus a Lighthouse lab run. The lab run is one simulation, by default a mid‑range phone on throttled 4G.

Lighthouse scores vary between runs. Its Performance score weights, as of version 10 and later: Total Blocking Time 30%, LCP 25%, CLS 25%, First Contentful Paint 10%, Speed Index 10%. Each category score is 0 to 100.

1. 1

   Cut LCP time

   Serve a smaller hero image. Set width and height in HTML. Use modern formats like AVIF or WebP. Preload the hero image and the main web font. Host static assets on a CDN. Example: /pricing hero drops from 3.4 s to 1.9 s after compressing a 1.2 MB JPG to a 180 KB AVIF and adding <link rel="preload">.

2. 2

   Prevent layout shift

   Reserve space for images, embeds and ads with fixed dimensions or aspect-ratio. Avoid inserting banners above content after load. Use font-display: swap to avoid FOIT, and match fallback and web font metrics where you can. Example: CLS drops into the good range after adding sizes to three images in the features grid. This is typical, not a measured result.

3. 3

   Reduce main‑thread blocking

   Ship less JavaScript. Remove unused libraries. Defer non‑critical scripts with defer or async. Split code and lazy‑init widgets. Keep third‑party embeds off critical paths. Example: INP drops into the good range after removing an unused carousel and deferring analytics. This is typical, not a measured result.

4. 4

   Stabilise third parties

   Give iframes fixed containers. Lazy‑load below‑the‑fold embeds. Use a placeholder with dimensions. Replace heavy widgets with server-rendered or static alternatives where possible.

5. 5

   Verify on templates

   Test one URL per template in PageSpeed Insights. If field data is missing, test lab now and check Search Console’s Core Web Vitals report later for the template group.

A fixed page feels steady, shows the hero fast, and reacts to clicks within 200 ms on a mid‑range phone.

• Chasing a perfect Lighthouse score. Field users decide. Fix what lifts LCP, CLS and INP for real users, not the dial alone.
• Testing only on desktop. The default lab run simulates a phone. Most field sessions include mobile, so optimise for mobile first.
• Deploying new fonts without metrics. Mismatched metrics cause layout shift. Use font-size-adjust or match ascent/descent if your stack allows it.
• Loading above‑the‑fold carousels and videos by default. Replace with a static poster image and a click‑to‑play.
• Letting a single slow route skew your origin. One heavy landing page can fail the origin. Fix that first.
• Assuming improvements show instantly. Field data uses a 28‑day window. Expect a lag before the assessment updates.