Core Web Vitals are Google's way of measuring whether a page feels fast and stable. They're a ranking signal, but more importantly, slow pages lose customers before they read a word. This is the checklist I use on Next.js sites, including the ClampHook platform, where targeted build tuning improved Core Web Vitals and organic search performance.
The three numbers to know
- LCP (Largest Contentful Paint): how long the biggest thing on screen takes to appear. Aim for 2.5 seconds or less.
- INP (Interaction to Next Paint): how quickly the page responds when someone taps or clicks. Aim for 200 milliseconds or less.
- CLS (Cumulative Layout Shift): how much the page jumps around while it loads. Aim for 0.1 or less.
Google judges these on real visitors' experience, measured at the 75th percentile, so a fast laptop on office wifi tells you very little about a phone in a busy area.
Step 1: measure before you change anything
Start with the Core Web Vitals report in Google Search Console and PageSpeed Insights. Look at the real-user data first and the lab score second. Test on mobile, because that's where most sites fail. Write down the starting numbers so you can prove what helped.
Step 2: fix LCP
- Find the LCP element. It's usually the hero image or a big heading. PageSpeed Insights tells you which.
-
Prioritise the hero image. Use
next/image, mark the main above-the-fold image as the priority image (check the docs for your Next.js version), and never lazy-load it. - Shrink images. Serve modern formats like WebP or AVIF at the size they're displayed. A 700 KB screenshot is rarely necessary.
-
Use
next/font. It hosts fonts with your site and avoids the extra request and flash of unstyled text that come from loading them from elsewhere. - Cut server delay. Cache pages, render static where you can, and keep your first response quick.
Step 3: fix CLS
- Give every image, video and embed a width and height, so the browser reserves space.
- Reserve space for banners, cookie notices and ads, instead of inserting them above content.
- Avoid fonts that change the text size when they load.
Step 4: fix INP
- Ship less JavaScript. Remove unused packages and keep heavy libraries out of the first load.
- Use dynamic imports for components people don't see immediately, such as modals and charts.
- Keep components on the server when they don't need interactivity.
- Break up long tasks so the page can respond between them.
Step 5: tame third-party scripts
Analytics, chat widgets and ad tags are among the most common causes of slow pages. Load them
with next/script using a late strategy, and ask whether each one earns its cost.
import Script from "next/script";
<Script src="https://example.com/widget.js" strategy="lazyOnload" />Step 6: re-measure, and be patient
Lab tools update straight away, but the real-user data Google uses is a rolling window of about 28 days, so improvements take weeks to show in Search Console. Fix the biggest problem first, measure, then move to the next one.
Need a hand?
If your site is slow or you aren't sure what's holding it back, I can audit it and fix the problems in the code. Read more about my technical SEO and speed work.