Close
More:
Social:
© Copyright 2026. All Rights Reserved.
computer laptop statistics illustration

How to Fix Core Web Vitals for Any Website (Custom Code & WordPress)

98d9dc2c_69eb_4d08_bf97_29d7ed05d488.png

Core Web Vitals are Google's way of measuring how real users experience your website. If your site fails these metrics, you lose rankings, traffic, and sales – regardless of how well‑optimised your content is.

The good news? You can fix them. Whether you run a custom‑coded website or a WordPress site, the principles are the same. Here is what you need to know.

What Are Core Web Vitals in 2026?

Google evaluates three specific user‑experience signals:

Largest Contentful Paint (LCP) – measures loading speed. How long until the main content appears? Google considers under 2.5 seconds good.

Interaction to Next Paint (INP) – measures responsiveness. How quickly does the page respond to clicks and taps? This replaced First Input Delay (FID) in 2024. A good INP score is under 200 milliseconds.

Cumulative Layout Shift (CLS) – measures visual stability. Does the page jump around while loading? A score below 0.1 is good.

Important: Google uses field data from real users on real devices, not just lab tests. A page that feels fast on your desktop may still fail for mobile users on slower connections.


Why This Matters for Your Business

Poor Core Web Vitals directly affect your bottom line:

  • Lower Google rankings
  • Higher bounce rates – mobile users abandon slow pages quickly
  • Fewer conversions – speed gains directly lift sales
  • Reduced AI search visibility – platforms like ChatGPT and Google Gemini favour fast, well‑structured sites

For Kenyan businesses, where mobile traffic dominates, these metrics are even more critical.


How to Fix Each Metric

1. Fix LCP: Speed Up Loading

LCP is usually caused by slow hero images, poor hosting, or render‑blocking resources.

What to do:

  • Optimize your hero image – convert to WebP or AVIF format and keep it under 100KB
  • Preload the LCP element – add <link rel="preload" as="image" href="hero.webp"> to the <head>
  • Never use loading="lazy" on hero images – this guarantees LCP failure
  • Improve server response time – use fast hosting and a CDN like Cloudflare
  • Remove render‑blocking CSS and JavaScript – defer or inline critical styles

 

2. Fix INP: Improve Responsiveness

INP measures how quickly your site responds to every user interaction – clicks, taps, and keypresses. Approximately 43% of sites still fail this metric.

What to do:

  • Break up long JavaScript tasks – use yield() to yield to the main thread between work chunks
  • Minimise third‑party scripts – analytics, ads, and chat widgets block the main thread
  • Use useDeferredValue in React – keep the UI responsive while heavy lists re‑render in the background
  • Remove unused JavaScript – audit and trim what you actually need

 

3. Fix CLS: Eliminate Layout Shifts

CLS happens when page elements move unexpectedly while loading.

What to do:

  • Add width and height attributes to every image – this alone eliminates most CLS issues
  • Reserve space for ads, embeds, and dynamically injected content
  • Avoid inserting content above existing content – unless you reserve space first
  • Use stable font loading – preload critical fonts and use font-display: swap

Quick Wins

 Before diving into deep code changes, these fixes take about 15 minutes and move the needle immediately:

  1. Convert hero images to WebP/AVIF – use app
  2. Add width and height to every <img> tag
  3. Set long‑lived cache headers for versioned assets: Cache-Control: public, max-age=31536000, immutable
  4. Put your site behind Cloud flare – even the free tier improves TTFB globally
  5. Baseline your scores using PageSpeed Insights before you change anything – you cannot measure improvement without a baseline

How to Test and Monitor

Use these tools to diagnose and track your Core Web Vitals:

  • Google PageSpeed Insights – shows both lab and field data
  • Google Search Console – see which pages are failing under Core Web Vitals
  • Lighthouse – runs in Chrome DevTools for detailed diagnostics
  • WebPageTest – advanced testing from multiple locations and devices

Pro tip: Google grades the 75th percentile of real user visits over 28 days. Monitor consistently – performance can degrade as your site grows.

The Bottom Line

Core Web Vitals are not optional. They are a ranking signal, a user experience requirement, and a business metric. Whether you build with custom code or WordPress, the fixes are technical but achievable.

Start with the quick wins. Measure your baseline. Fix one metric at a time. And monitor continuously.

 

Published: 23rd, Tuesday, Jun, 2026 Last Modified: 13th, Monday, Jul, 2026

7+

Years of Experience

135+

Happy Clients

140+

Web Systems Built