Where a small website loses time: Core Web Vitals in practice

What the three numbers measure

Largest Contentful Paint (LCP) is how soon the main content appears. Interaction to Next Paint (INP) is how quickly the page responds to a tap. Cumulative Layout Shift (CLS) is how much the layout jumps while it loads.

On small sites the same few causes come back again and again.

Images are usually the biggest cost

Serve each image at the size it is shown, in a modern format such as WebP or AVIF, and set its width and height so the browser reserves the space. Lazy-load images below the first screen, but let the hero image load early.

Fonts should not hide the text

Use font-display: swap, load only the weights the page uses, and host the font files with the site. A page that waits for several font files before showing any text feels slow even when everything else is fast.

Reserve space for late content

Give room to anything that arrives late: a banner, a video, an embedded map, or a form message. A shift that moves a button under a thumb is the kind of problem users notice most.

Animation code has a cost

Motion libraries are useful, but their script runs on the main thread. Keep animations short, respect the reduced-motion setting, and remove any effect that does not help the reader.

Measure, change one thing, measure again

Run Lighthouse on mobile before changing anything, fix one group of problems, and run it again. Compare several runs, because one run can be an outlier.