1 LCP: Largest Contentful Paint
Good LCP: under 2.5 seconds. The LCP element is almost always a hero image, video poster, or large text block. Optimise by: serving images in WebP/AVIF format, using a CDN with edge caching, preloading the LCP image with <link rel="preload">, and removing render-blocking resources above the fold. For text-based LCP elements, ensure fonts are preloaded and font-display:swap is set. Our CWV audits find unoptimised LCP images are responsible for 68% of poor LCP scores.
2 INP: Interaction to Next Paint
Good INP: under 200ms. INP measures the latency of all user interactions — click, tap, key press — and reports the worst-case value. Key optimisation strategies: break up long JavaScript tasks (>50ms) using setTimeout or scheduler.yield(), defer non-critical third-party scripts, and use web workers for heavy computation. React and Vue apps benefit most from code-splitting and lazy-loading route components. Every third-party tag you add costs 20–80ms of INP — audit your tag manager quarterly.
3 CLS: Cumulative Layout Shift
Good CLS: under 0.1. Layout shifts are caused by images without explicit dimensions, dynamically injected content, and web fonts causing FOUT. Fix by: always setting width and height on img elements, using CSS aspect-ratio for responsive containers, and serving fonts with font-display:optional or preloading critical fonts. Monitor CLS in field data (CrUX) not just lab data — mobile users experience 2.3× higher CLS than desktop users in our benchmarks.
Marcus Chen
Head of Paid Media
Expert in digital marketing strategy and AI-powered growth. Leads our Web Dev practice and has worked with 100+ brands across 20 industries.