Core Web Vitals: making a small business website fast, metric by metric

A visitor who stares at a blank page for three seconds often leaves before seeing your offer. Google measures this experience with three indicators, the Core Web Vitals, and takes them into account in its ranking. Good news: on a small business website, meeting them is mostly a matter of discipline.

The three metrics

Thresholds apply to the 75th percentile of real visits: three visitors out of four must get a good experience. INP replaced FID in March 2024; it is stricter, because it accounts for every interaction and not only the first one.

Where to measure

• PageSpeed Insights shows real data from your Chrome visitors, if your site has enough traffic, plus a lab measurement.
• Lighthouse, in Chrome's developer tools, measures in the lab. Handy during development, but it does not replace real data.
• Search Console groups the slow pages of your site once it is indexed.

Always test in mobile mode with a throttled network: that is the situation of most of your visitors.

Improving LCP

On a small business website, the largest element is almost always the hero image or headline.

1. Serve the main image as AVIF or WebP, at the right size. A 4000-pixel-wide photo displayed at 1200 pixels wastes time and data. The srcset attribute lets the browser choose.
2. Do not lazy-load that image. loading="lazy" helps for images further down the page but hurts the main one. Give it fetchpriority="high" instead.
3. Limit fonts. Two families, in WOFF2, with font-display: swap so text shows immediately in a fallback font.
4. Pick hosting close to your visitors, or a CDN. A server response time above 800 ms makes a good LCP nearly impossible.

Improving INP

INP gets worse when the browser is busy running JavaScript at the moment someone clicks.

• Fewer scripts. Every third-party widget (chat, map, social feeds) adds code. Ask whether it is essential, and load it when needed: a map can appear when someone clicks "Show the map".
• No heavy work on click. An immediate visible response, even a simple loading indicator, then the work.
• Be wary of sliders and scroll animations driven by JavaScript: CSS does the same without blocking the page.

Improving CLS

Layout jumps nearly always come from elements whose size is not known in advance.

• Give every image and video a width and height, or a CSS aspect-ratio. The browser reserves the space before loading.
• Reserve space for banners (cookies, announcements) instead of inserting them at the top of the page afterwards; or overlay them at the bottom.
• Choose fallback fonts close to your web fonts, so text does not change length when they load.

What we do in Forge templates

Templates ship no heavy photos: demo visuals are drawn in CSS and SVG, fonts are WOFF2 files hosted with the site, and the HTML versions load only about 4 KB of JavaScript, for the mobile menu. When you add your own photos, keep the habits above: that is often where good scores get lost.

In short

A light, prioritised main image, dimensions on every image, few fonts, few scripts. These four rules are enough to put most small business websites in the green.