What the metrics mean (in plain terms)
Largest Contentful Paint (LCP) measures how quickly the main content appears.
Interaction to Next Paint (INP) measures how responsive the page feels when a user interacts.
Cumulative Layout Shift (CLS) measures visual stability — whether content jumps while loading.
Checklist: LCP (largest content shows up fast)
Start by identifying the LCP element in the field and in lab tools.
Then make the critical content (hero image/text) arrive earlier than everything else.
- Optimize and preload the hero image (correct size + modern format).
- Avoid heavy client-side rendering for above-the-fold content.
- Use a fast font strategy (subset, preload, limit weights).
- Reduce server time to first byte where possible.
Checklist: INP (fast interactions)
INP usually improves when the main thread does less work and components render less often.
Prioritize interaction paths: menus, forms, and primary CTAs.
- Split large bundles; defer non-critical scripts.
- Avoid expensive re-renders on input and scroll.
- Remove long tasks; keep handlers quick and predictable.
- Prefer server rendering for heavy sections when it reduces JS work.
Checklist: CLS (no layout jumps)
CLS improves when the page reserves space before content loads.
The biggest offenders are images without size, injected UI, and late-loading fonts.
- Always define image dimensions (or aspect ratio).
- Reserve space for banners, toasts, and embedded content.
- Avoid inserting content above existing content after load.