Your laptop on office fibre is a poor judge of your website. The people you build for are standing at a bus stop in Bristol with two bars of signal, thumb-scrolling one-handed while the page decides whether it fancies loading. Core Web Vitals measure that reality, and most of the wins come from removing weight rather than adding cleverness.
Three metrics matter. Largest Contentful Paint (LCP) is how long the main content takes to appear. Interaction to Next Paint (INP) is how quickly the page responds when someone taps, types or scrolls. Cumulative Layout Shift (CLS) is whether the page jumps around while they are reading it. On a recent handset with strong 5G, almost any page passes. On the patchy 4G that still covers much of the UK — indoors, on trains, in busy city centres at half five — the same page can feel broken.
Measure what your visitors actually experience
Start with field data, not your own browser. Chrome UX Report data appears in PageSpeed Insights and in the Core Web Vitals report in Search Console, and it reflects real sessions over a rolling 28-day window. If your 75th percentile LCP is 3.4 seconds on mobile and 1.9 seconds on desktop, that gap is the story. It tells you the problem lives in the network and the main thread, not in your markup.
Lab tools then help you reproduce it. Open Chrome DevTools, set throttling to a slow 4G profile with a few hundred milliseconds of added latency, and load the page on the cheapest Android handset you can borrow. Better still, run a test from a UK node so you are not measuring a hop across the Atlantic. Developer machines on fast connections regularly flatter sites by a second or more.
Field data is the truth. Your laptop is a comfortable lie.
Fix LCP first, because it is usually the worst
LCP breaks into four parts: connection and server response, when the browser discovers the hero resource, how long that resource takes to download, and how long the main thread takes to render it. Work through them in that order.
- Cut time to first byte. Cache HTML at the edge, keep a point of presence close to the UK, watch for cold starts on serverless functions, and check slow database queries before touching the front end.
- Never lazy-load the hero. An above-the-fold image with loading="lazy" competes with itself. Give it fetchpriority="high" and preload it if it is discovered late in the document.
- Serve smaller images. Modern formats such as AVIF and WebP typically save a lot over JPEG, and srcset with honest sizes attributes stops you shipping a 2000-pixel image to a 390-pixel screen.
- Self-host and subset fonts. A font loaded from a third-party domain adds a connection before any text can paint. Subset to the characters you use — and since this is a UK site, remember the pound sign, curly quotes and accented names.
Clear the render-blocking queue
Every stylesheet and synchronous script in the head delays the first paint. Inline the CSS needed for the top of the page, load the rest without blocking, and defer or module-load your JavaScript. If a script is only needed after a click, do not ship it on load at all.
Make interactions respond instantly
INP punishes long JavaScript tasks. When the main thread is busy for 400 milliseconds, a tap on a menu button sits in a queue and the user taps again. The fix is to break work into smaller pieces and hand control back to the browser between them — with await, setTimeout or scheduler.yield, depending on what you are targeting — rather than running one enormous loop.
Look closely at anything that runs on every keystroke. Search boxes, postcode lookups and quantity steppers are common offenders. Debounce input handlers, filter arrays off the critical path, and let CSS handle hover and focus states instead of scripting them. Animations using transform and opacity stay on the compositor and cost far less than animating width or top.
Audit third parties, including your consent banner
Analytics, chat widgets, heatmaps, A/B testing tools and cookie banners required under UK data protection rules can easily account for more JavaScript than your own application. Load them after the page is interactive, give each one a named owner, and remove the ones nobody has reviewed in a year. A consent banner that needs a network round trip before it can render will hurt both LCP and INP.
Stop the page moving under people's thumbs
CLS is the cheapest metric to fix and the most irritating to suffer. Reserve space for everything that arrives late: set width and height attributes or an aspect-ratio on images and videos, and give ad slots and embedded maps a fixed container. Never insert content above something the user is already reading. Bottom banners and sticky headers should overlay or sit in reserved space rather than pushing the page down.
Fonts cause quiet shifts too. When a fallback face has different metrics from the webfont, every line of text moves on swap. Pair the webfont with a local fallback and adjust its metrics with size-adjust, or use font-display: optional so the first render stays stable.
A sensible order of work
- Pull field data for mobile and note your worst-performing template, not your homepage.
- Reproduce the problem with throttling on a low-end Android device.
- Fix LCP: server response, hero image, fonts, blocking CSS and JS.
- Then tackle INP: split long tasks and defer third parties.
- Finish with CLS: dimensions, reserved slots and font metrics.
- Re-measure after four weeks, because field data lags your deployment.
Do the first three and you will usually clear the thresholds on most templates. Do all six and your site will feel quick on the connections your visitors actually have — which is the only benchmark that matters.
Photo: Firmbee / Pixabay
