LCP: win the first request
The LCP element — almost always the hero image or headline — must need nothing beyond the initial HTML and one preloaded asset. That means static text or an image under 120KB with fetchpriority=high, fonts subsetted and self-hosted with swap, and zero render-blocking third-party scripts. If your LCP asset waits on JavaScript, you've already lost the budget.
CLS: reserve every pixel
Layout shift is a discipline problem, not a mystery: every image gets explicit dimensions, every embed gets a reserved container, every web font gets a size-adjusted fallback, and nothing injects above existing content after load. Our CI fails any template exceeding 0.05 — half of Google's threshold — because field data is always worse than lab.
INP: respect the main thread
Interaction to Next Paint punishes JavaScript bloat on the main thread. Budget JS per route (we hold marketing routes to 200KB gzipped), code-split every island of interactivity, and defer analytics behind consent and idle. Measure on a mid-range Android over throttled 4G — the phone your actual median visitor holds — and the honest numbers will change your priorities.
Working on something in this space?
We help teams turn articles like this into shipped systems. One business day to an honest answer.
Request a Quote