Why performance work changed
Core Web Vitals are no longer “just optimize images and minify JS.” Modern sites are component-heavy, data-heavy, and personalization-heavy, which makes runtime behavior (main-thread load, hydration, async rendering) the real bottleneck. The goal is fast perceived speed + measurable responsiveness.
The metrics that matter in practice
- LCP (Largest Contentful Paint): Usually your hero image, headline block, or above-the-fold product media. Fix by reducing server time, render-blocking resources, and improving critical asset delivery.
- INP (Interaction to Next Paint): Measures responsiveness during real interactions. Fix by reducing long tasks, unnecessary re-renders, and main-thread congestion.
- CLS (Cumulative Layout Shift): Layout instability. Fix by reserving space and avoiding late-loading UI shifts.
High-impact LCP improvements
- Make the LCP element cheap to load
- Use next-gen formats (AVIF/WebP), correct sizing, and responsive
srcset.
- Preload only the real LCP asset (don’t preload everything).
- Reduce render-blocking
- Inline critical CSS for above-the-fold when feasible.
- Defer non-critical CSS and load non-essential scripts with
defer/async.
- Shrink server latency
- Cache HTML at the edge when content allows.
- Use streaming SSR so the browser can paint sooner.
INP: responsiveness is a design + engineering problem
- Prefer optimistic UI (show immediate results, reconcile later).
- Break long work into chunks using
requestIdleCallback (non-critical), setTimeout(0), or scheduler APIs when appropriate.
- Avoid heavy work in input handlers. Debounce expensive filtering and offload computation to Web Workers for large datasets.
CLS: stability is a layout discipline
- Always reserve space for images/ads/embeds via width/height or aspect-ratio containers.
- Don’t inject banners above content after render; place them in reserved regions.
- Animate with
transform/opacity, not layout properties.
Practical measurement stack
- Lab: Lighthouse + DevTools Performance panel for deep diagnosis.
- RUM: Real User Monitoring (analytics-based) to see actual device/network impact.
- Track p75 trends per page template (home, PDP, blog, checkout), not just site-wide averages.
Quick checklist
- LCP element identified and preloaded appropriately
- Main thread long tasks reduced (profiling confirms)
- Images reserve space + use responsive sizes
- Third-party scripts audited and delayed where possible
- RUM dashboard by page type + device class
