Core Web Vitals are a set of performance metrics that Google uses to measure how well a web page performs for real users. Introduced as a ranking factor in 2021, Core Web Vitals assess three specific aspects of the user experience: loading speed, interactivity, and visual stability. If your scores are poor, your pages are likely ranking below competitors with faster, more stable sites — even if your content is better. Understanding and improving your Core Web Vitals is one of the most technical but impactful SEO improvements you can make.

What Are Core Web Vitals and What Do They Measure?

There are three Core Web Vitals metrics, each measuring a different dimension of user experience. Google updates these over time, so it is worth checking the latest guidance at web.dev/vitals, but as of 2025 the three key metrics are as follows.

Largest Contentful Paint (LCP) measures loading performance. Specifically, it records how long it takes for the largest visible content element on the page — typically a hero image, a featured photo, or a large heading — to load and render. A good LCP score is 2.5 seconds or less. Scores between 2.5 and 4 seconds need improvement, and anything above 4 seconds is considered poor. LCP is the metric most sites struggle with, and improving it usually has the biggest impact on rankings.

Interaction to Next Paint (INP) measures interactivity and responsiveness. It records how quickly the page responds to user interactions — clicks, taps, and keyboard inputs. A good INP score is 200 milliseconds or less. Poor responsiveness is most commonly caused by heavy JavaScript that blocks the browser's main thread. Reducing JavaScript execution time and deferring non-critical scripts are the primary fixes.

Cumulative Layout Shift (CLS) measures visual stability — specifically how much the page layout shifts unexpectedly while loading. We have all experienced this: you are about to click a button and suddenly an image or ad loads above it, pushing everything down and causing you to click the wrong thing. A good CLS score is 0.1 or less. Layout shifts are usually caused by images without defined dimensions, ads that load after content, or web fonts that replace placeholder text.

How to Improve Your Core Web Vitals Scores

Run your site through Google PageSpeed Insights (pagespeed.web.dev) to see your current Core Web Vitals scores for both mobile and desktop. PageSpeed Insights shows your scores alongside specific recommendations — follow those recommendations as your starting point. Here are the most common and impactful fixes for each metric.

Improving LCP. The biggest LCP wins usually come from optimising your largest image. Convert images to modern formats like WebP, which are significantly smaller than JPEG or PNG without visible quality loss. Set explicit width and height attributes on your images so the browser can reserve space before they load. Use the loading="eager" attribute on your hero image (do not lazy-load it) and consider adding a rel="preload" link in your HTML head for the LCP image so the browser fetches it as early as possible.

Slow server response time (measured as Time to First Byte or TTFB) is another common LCP culprit. If your hosting is slow, no amount of frontend optimisation will make your LCP fast. South African businesses should choose a host with servers either in South Africa or at least nearby — Hetzner SA, Afrihost, and Xneelo all offer locally hosted plans that give South African visitors faster response times than overseas servers.

Improving INP. Heavy JavaScript is the primary INP problem. Audit your installed plugins if you are on WordPress — every plugin adds JavaScript to your site, and many plugins load scripts on every page even when they are only needed on one. Deactivate any plugin you do not actively use. Consider using a plugin like Asset CleanUp or Perfmatters to load scripts only on the pages that need them. Defer or async-load any non-critical JavaScript so it does not block the browser's main thread.

Improving CLS. Set explicit width and height attributes on all images and video elements. This tells the browser how much space to reserve before the media loads, preventing layout shifts. For Google AdSense ads, reserve the ad space in your CSS using a min-height value that matches the expected ad size. For web fonts, use font-display: swap or font-display: optional in your CSS to control how the browser handles font loading.

Core Web Vitals improvements take time to reflect in rankings — Google re-evaluates pages periodically rather than instantly. But the effort is worthwhile. Faster, more stable pages not only rank better; they also convert better, reduce bounce rates, and provide a genuinely better experience for your South African visitors.