largest contentful paint — lcp

lcp measures how long it takes for the largest visible element on the page to fully appear. on most business sites, that is the hero image or the headline above the fold. google's threshold is 2.5 seconds on a mobile connection. above that, lcp is 'needs improvement'. above 4 seconds, it is 'poor' — which is a ranking signal.

a slow lcp is almost always a large unoptimised image, a slow server, or a font that blocks the first paint. the fix is usually one of three things: compress the hero image, move to a faster host, or tell the browser to prioritise loading above-fold content first.

interaction to next paint — inp

inp replaced first input delay in 2024. it measures how quickly the page responds to a tap or a click anywhere on the page, across the full session. google's threshold is 200 milliseconds. above that, the page feels slow to use even if it loaded quickly — because loading and responding are two different things.

a high inp is usually a javascript problem. too much script running in the main thread means the browser is busy when the user taps something. the fix is deferring or splitting the javascript that runs in the background, so the main thread is free to respond.

cumulative layout shift — cls

cls measures how much the page moves around as it loads. if you have ever tapped a button and hit the wrong element because the page shifted at the last second — that is cls. google's threshold is 0.1. above that, the page is penalised.

the most common cause is images and ads without declared dimensions. the browser does not know how much space to hold for them, so it renders the rest first and shifts when they arrive. the fix is simple: declare a width and height on every image, and reserve space for any element that loads asynchronously.

what to actually do

run the site through google pagespeed insights (pagespeed.web.dev). it is free, takes thirty seconds, and gives a score for mobile and desktop separately. the mobile score is the one that matters for rank.

a score under 50 on mobile means one or more vitals is in the 'poor' range. above 90 and all three are green — google treats the site as fast. the gap between 50 and 90 is the rank gap. it is often closable without a redesign: image compression, font subsetting, javascript deferral. three changes that typically take a developer one week.