Three metrics, three causes
LCP is almost always your hero image or hero text waiting on a font. CLS is almost always an image without dimensions or a banner injected after load. INP is almost always a heavy third-party script competing for the main thread.
The short list that fixes most sites
- Serve hero images as WebP or AVIF at the size they are displayed, with explicit width and height attributes.
- Preconnect to your font host and use
font-display: swapwith a real fallback stack so text paints immediately. - Lazy-load everything below the fold, and nothing above it.
- Defer analytics, chat widgets and tag managers until after first interaction — a chat bubble is not worth 300ms of INP.
- Reserve space for anything injected later: cookie banners, notification bars, embeds.
Measure on a real phone
Lab scores on a fast laptop flatter you. Field data from real users on mid-range Android over mobile data is what Google uses and what your buyers experience. Check that before celebrating.
A site that scores 98 in the lab and 62 in the field has a measurement problem, not a performance problem.
Ahmed KhanzadaFounder & Chief Executive Officer, AffilioTechAbout the author