Core Web Vitals Optimization: Complete Guide for South African Websites (2026)

What Are Core Web Vitals?

Core Web Vitals are three metrics Google uses to measure page experience and rank websites. They're official ranking factors that directly impact your organic traffic. Core Web Vitals are one critical piece of complete technical SEO-see our comprehensive technical SEO guide for the full strategy.

"Page speed" and "Core Web Vitals" get used as if they mean the same thing. They overlap, but they are not identical. Page speed is how fast a page feels to a visitor. Core Web Vitals are the three measurements Google uses to score that experience, taken from real visitors' browsers. You can have a fast-feeling page that still fails one metric, and the fix is different for each. This guide covers both: what to measure, and what to change.

The Three Metrics

• LCP (Largest Contentful Paint): Time for main content to load. Target: <2.5 seconds
• INP (Interaction to Next Paint): How quickly the page responds when someone taps or clicks. Target: under 200ms
• CLS (Cumulative Layout Shift): Visual stability (elements don't jump around). Target: <0.1

How to Measure Your Core Web Vitals

Option 1: Google PageSpeed Insights (Free)

• Go to pagespeed.web.dev
• Enter your URL
• See LCP, INP, CLS scores for mobile + desktop
• Get optimization suggestions

Option 2: Google Search Console

• Sign in to Search Console
• Go to "Experience" > "Core Web Vitals"
• See real-world data from actual visitors
• Identify which pages need fixes

Fix Largest Contentful Paint (LCP), The Speed Score

LCP is often the biggest culprit. Here's how to improve it:

1. Optimize Images (Biggest Impact)

• Use WebP format (30-40% smaller than JPEG)
• Serve responsive images: <img srcset="small.webp 480w, large.webp 1200w">
• Compress images (use TinyPNG, ImageOptim)
• Lazy load images: <img loading="lazy">

2. Use a CDN (Cloudflare, AWS CloudFront)

CDN serves content from servers geographically closer to users. During load shedding or network congestion, this cuts LCP time by 30-40%.

3. Prioritize Above-the-Fold Content

• Load critical CSS inline (in <head>)
• Defer non-critical JavaScript
• Lazy load below-the-fold content

Expected improvement: 4+ seconds → 2 seconds LCP (50% reduction)

Fix Interaction to Next Paint (INP)

INP measures how long the page takes to visibly respond after someone taps, clicks or types. It replaced First Input Delay as a Core Web Vital in March 2024. FID only measured the delay before the browser started handling the first interaction. INP looks at interactions across the whole visit and reports one of the slowest, which is a harder test to pass. Google treats 200 milliseconds or less as good.

What usually causes a poor INP

• Third-party scripts (analytics, chat widgets, ad tags) keeping the main thread busy
• Large JavaScript bundles that take long to parse and run
• Heavy work running inside a click handler, such as filtering a big product list

Fixes

• Load non-essential scripts with defer or async, and remove the ones you do not need
• Break long tasks into smaller chunks so the browser can respond between them
• Move heavy calculations off the main thread with Web Workers
• Test on a mid-range Android phone, not only your own laptop. INP problems are much easier to see on slower devices

Fix Cumulative Layout Shift (CLS)

CLS prevents elements from unexpectedly moving around during load. Example: ads pop in and shift content down.

Common CLS Culprits

• Images/videos without explicit dimensions
• Ads/embeds inserted without reserved space
• Web fonts causing text reflow
• Animations/transitions during load

Fixes

• Set explicit width + height on all images: <img width="1200" height="630">
• Pre-allocate space for ads/embeds
• Use font-display: swap in @font-face
• Avoid inserting content above existing content

What Slows Your Site Down Beyond Images and Scripts

The LCP, INP and CLS fixes above deal with what the browser does. These four causes sit underneath them, and they are the ones a plugin will not fix.

Slow server response

Nothing on the page can load until the server answers. Cheap shared hosting slows down when other sites on the same server get busy, and that delay lands directly on your LCP. If most of your customers are in South Africa, host in South Africa or put a CDN with local edge locations in front of the site, so the first response does not travel across an ocean. Test it: if PageSpeed Insights reports a slow server response, no amount of image compression will make up for it.

No caching

Without caching, every visit rebuilds the page and every returning visitor downloads the same files again.

• Set long cache lifetimes on files that rarely change, such as images, fonts, CSS and JavaScript
• Cache full pages on the server so the database is not queried on every visit
• Use object caching (Redis or Memcached) on database-heavy sites, such as large WooCommerce stores

Too many requests, too much render-blocking code

Each stylesheet, script and font file is a separate request, and CSS and synchronous JavaScript in the <head> hold back the first paint.

• Remove plugins and third-party scripts you no longer use. Old chat widgets and abandoned tracking tags are the usual culprits
• Minify CSS and JavaScript, and inline only the CSS needed for the first screen
• Make sure your server supports HTTP/2 or HTTP/3, so many small files are not a penalty
• Turn on Brotli or Gzip compression for text files

Web fonts

Custom fonts delay text and can cause layout shifts. Limit yourself to the weights you use, serve only the character sets you need, preload the one or two files that appear above the fold, and keep font-display: swap so text shows immediately.

If your site slows down during power cuts and network congestion specifically, that is a related but separate problem. See Site Speed Optimisation During Load Shedding.

Speed Fixes by Platform

The same problems show up differently depending on how your site is built.

WordPress

• Install one caching plugin (WP Rocket and LiteSpeed Cache are common choices; LiteSpeed Cache needs a LiteSpeed server to do its full job) and configure it properly rather than stacking several
• Compress and convert images on upload with a tool such as ShortPixel
• Audit your plugins. Every active plugin can add scripts to every page, so keep only the ones you use
• Pick a lightweight theme. Multipurpose themes with built-in sliders and page builders are heavy by default
• Move to managed WordPress hosting if server response is your bottleneck

Shopify

• Shopify already serves your files from its CDN, so the gains are in what you add on top
• Remove apps you are not using, because many leave code behind in the theme after uninstalling
• Lazy-load product images below the first screen, but not the main product image, which is usually your LCP element
• Limit third-party scripts such as pop-ups, review widgets and tracking pixels

Custom-built sites

• Add minification and image conversion to your build process so it happens every time, not when someone remembers
• Serve responsive images in modern formats
• Keep the critical rendering path short: inline the first-screen CSS and defer the rest
• For content-heavy sites, consider generating pages ahead of time rather than building them on every request

Real South African Case Study

Client: Johannesburg eCommerce store (vitamin supplements)

Before: LCP 5.2s, FID 180ms, CLS 0.25 | Mobile score: 32

Fixes Applied:

• Cloudflare CDN (free tier)
• Image optimization (WebP + compression)
• Deferred non-critical JavaScript
• Fixed image dimensions

After (6 weeks): LCP 1.8s, FID 65ms, CLS 0.05 | Mobile score: 78

Impact: +35% conversion rate, +40% organic traffic

Tools to Monitor & Test

• Google PageSpeed Insights, Lab + field data
• Web.dev Measure, Detailed audit
• Web Vitals Chrome Extension, Real-time monitoring
• Google Search Console, Real-world user data

Quick Wins Checklist

Start at the top. The first items cost little and often move LCP the most.

• Compress images and set explicit width and height on every one
• Turn on browser caching and server-side page caching
• Lazy-load images below the first screen (not the main image)
• Remove plugins, apps and tracking scripts you no longer use
• Defer non-critical JavaScript
• Minify CSS and JavaScript and enable Brotli or Gzip
• Put a CDN in front of the site
• Cut web fonts to the weights and characters you use
• Upgrade hosting if server response is still slow after the steps above

Then check the result in Google Search Console under Core Web Vitals. Field data updates over several weeks, so do not expect it to change the day you deploy.

Action Plan: Next 30 Days

Week 1: Audit Core Web Vitals (PageSpeed Insights + GSC)

Week 2: Implement quick wins (image optimization, lazy loading)

Week 3: Deploy CDN + defer JavaScript

Week 4: Monitor improvements + iterate

Related: Read the complete Technical SEO guide

Related Articles