Skip to content

Core Web Vitals in Production

Moving past lab scores — how to track LCP, INP, and CLS in the real world, what usually breaks them, and fixes that stick after launch.

  • performance
  • web vitals
  • monitoring
  • ux
  • frontend

Lighthouse green in local doesn’t mean users are fine. Core Web Vitals are field metrics. Here’s how I think about them once a site is live — a practical follow-up to frontend observability work.

Lab vs field

Lab (Lighthouse, local profiles): great for debugging and regressions in CI.

Field (CrUX, RUM): what Chrome users actually experience on real devices and networks.

Ship with lab checks. Judge success with field data. They disagree more often than people admit — especially on image-heavy or third-party-heavy pages.

The three that matter

LCP (Largest Contentful Paint) — usually your hero image, headline block, or main product visual. Slow LCP is often: oversized images, late discovery of the hero, fonts blocking render, or a slow TTFB.

INP (Interaction to Next Paint) — responsiveness to clicks and taps. Main-thread long tasks, heavy hydration, and expensive handlers are the usual suspects. (INP replaced FID as the interactivity vital.)

CLS (Cumulative Layout Shift) — visual jumpiness. Reserve space for images and embeds, avoid inserting banners above existing content, and be careful with late-loading fonts and ads.

What breaks cultural and marketing sites

Patterns I see on Astro/content sites:

  • Heroes without width/height or modern srcset
  • Carousels and embeds that shift when they finally load
  • Cookie banners and announcement bars injected late
  • “Just one more” analytics or chat widget on the critical path

Static HTML helps a lot. Third parties can undo that help in an afternoon.

Fixes that tend to stick

  1. Optimize and prioritize the actual LCP element — not every image on the page
  2. Self-host critical fonts with sensible font-display
  3. Bound layout for media and dynamic slots
  4. Defer non-essential scripts; load chat/analytics after idle when possible
  5. Watch field data after each release, not only before launch

Make it a habit

Add a lightweight RUM or rely on CrUX + Search Console. Tie regressions to releases. When INP spikes, profile the interaction — don’t guess with another micro-optimization pass on CSS.

Observability without Web Vitals is incomplete. Web Vitals without production monitoring is theater. Connect them and you fix what users feel, not only what the audit screenshot shows.

Back to blog