• 8 min read
What the three metrics actually measure
LCP is how long the largest visible element takes to render, INP is how quickly the page responds to interactions, and CLS is how much the layout shifts while loading. Field data from real users, not lab scores, is what search engines use.
Fixing LCP once the easy wins are gone
Compress and correctly size the hero image, serve it as AVIF or WebP, and preload it. Remove render-blocking CSS and fonts, use font-display: swap, and make sure the server responds fast — a slow first byte caps every other improvement. Server-side rendering the above-the-fold content usually beats any client-side optimisation.
Improving INP
INP problems are almost always long JavaScript tasks. Split heavy bundles, defer analytics and chat widgets until after interaction, and break expensive work into smaller chunks so the main thread stays free. Audit third-party scripts first — they are the most common cause and the easiest to remove.
Keeping CLS near zero
Reserve space for images, embeds, and ads with explicit dimensions or aspect ratios. Never inject banners above existing content after load, and preload fonts to avoid a late swap that reflows text.
A checklist to run before every launch
Test on a throttled mobile connection, check field data after two weeks of traffic, set a performance budget for JavaScript, and re-test after every third-party script is added.