Website Speed Optimisation: Improving Core Web Vitals

However impressive your website looks, if it loads slowly most visitors close the page. According to Google’s research, 53% of users leave a site that takes longer than 3 seconds to load. And Google now treats speed as a direct ranking factor. In this guide we explain the Core Web Vitals metrics clearly and walk through optimisation techniques that deliver real results.

What Are Core Web Vitals?

Core Web Vitals are three key user-experience metrics that Google introduced in 2020 and added to search ranking from 2021. They come from real user data — real-world measurements, not lab tests.

1. LCP — Largest Contentful Paint

Measures how long it takes for the largest visible element on the page (usually a hero image or large heading) to appear.

• Good: 2.5 seconds or less
• Needs improvement: 2.5–4 seconds
• Poor: More than 4 seconds

The main factors affecting LCP are large image files, slow server response times and render-blocking JavaScript/CSS.

2. INP — Interaction to Next Paint

Measures how quickly the page responds when the user interacts (click, tap, keyboard input). It replaced the old FID metric in 2024.

• Good: 200 ms or less
• Needs improvement: 200–500 ms
• Poor: More than 500 ms

Long JavaScript tasks, heavy third-party scripts and inefficient event handlers hurt INP.

3. CLS — Cumulative Layout Shift

Measures how much elements “jump” while the page loads. Text moving as you read, accidental clicks and general irritation make this metric visible.

• Good: 0.1 or less
• Needs improvement: 0.1–0.25
• Poor: Above 0.25

Images without dimensions, dynamically injected content and late-loading ads are the main sources of CLS.

Where to Measure Performance

You can’t optimise without measuring first. Useful tools:

Google PageSpeed Insights — enter a URL to see both lab data and real-user data (CrUX). Free and easy to use.

Google Search Console → Core Web Vitals report — groups your site’s real user experience by URL so you see exactly which pages have problems.

WebPageTest — for advanced users: waterfall charts, video comparisons and multi-step tests.

Chrome DevTools → Lighthouse — ideal for instant measurements in local development.

Improving LCP: Concrete Steps

Move Images to Modern Formats

Converting JPEG and PNG to WebP or AVIF typically cuts file size by 30–50% with minimal quality loss.

``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``

If you use Next.js, the <Image> component does this conversion automatically — no extra work.

Preload the Hero Image

The browser starts downloading an image only when it finds the tag while parsing HTML. Telling it in advance lowers LCP:

``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``

Shorten Server Response Time (TTFB)

LCP starts when the server sends the first byte. To improve TTFB:

• Use static generation (SSG) or ISR — serve pre-built HTML instead of rendering every request from scratch
• Use a CDN so content comes from a server close to the user
• If server resources are insufficient, move to a VPS or cloud hosting

Inline Critical CSS

The browser can’t show the page until it downloads and processes the CSS. Embedding above-the-fold styles directly in the HTML shortens render time. Tools such as Critical or Critters automate this.

Improving INP: Reduce the JavaScript Load

Break Up Long Tasks

JavaScript tasks longer than 50 ms count as “long tasks” and block interaction. Split big jobs with setTimeout(..., 0) or scheduler.yield():

``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // Give the main thread a breather every 50 items if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``

Remove Unnecessary Third-Party Scripts

Live chat widgets, ad networks, analytics tools and social buttons carry a significant INP cost. Ask of every extra script: “Is this really needed on this page?”

If you use Google Tag Manager, audit it regularly and delete unused tags.

Use Code Splitting in React/Next.js

``javascript const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <div>Loading…</div>, }); ``

Load heavy components only when needed with dynamic(). This shrinks the initial bundle and helps INP.

Getting CLS to Zero

Set Dimensions on All Images

If the browser knows an image’s size in advance, it reserves the space and nothing shifts when the image arrives:

``html <img src="product.jpg" alt="Product image" width="800" height="600" /> ``

CSS aspect-ratio does the same job:

``css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``

Prevent FOUT/FOIT with Fonts

Text shifting while a font loads is a major source of CLS. Use font-display: optional or font-display: swap and preload your fonts:

``html <link rel="preload" href="/fonts/Brand.woff2" as="font" type="font/woff2" crossorigin /> ``

Use Placeholders for Dynamic Content

So data arriving from an API doesn’t shift the layout, use a fixed-height skeleton or placeholder:

``css .content-area { min-height: 120px; / reserves space until content loads / } ``

Automatic Optimisations with Next.js

With a Next.js-based website, these features work out of the box:

| Feature | What it does | |---|---| | <Image> component | Automatic WebP/AVIF, lazy loading, size attributes | | <Script strategy="lazyOnload"> | Defers non-critical scripts | | Static generation (SSG) | Minimises TTFB | | Font optimisation | Downloads Google Fonts, self-hosts them, swap strategy | | Automatic code splitting | Each page loads only the JS it needs |

We also touched on how these features save time compared with manual setups — and contribute directly to Core Web Vitals — in our article on corporate website cost.

Prioritising: Where to Start

Start with the steps that give the biggest impact for the least effort:

1. Image optimisation — on most sites this alone improves LCP by 30–40%. Convert large JPEGs to WebP and set their dimensions.

2. Remove unused JavaScript — use the Coverage tool in Chrome DevTools to see which JS isn’t used.

3. Reduce render-blocking resources — manage CSS and JS with async/defer or inline critical CSS.

4. Review server performance — if you’re on shared hosting and TTFB is above 800 ms, consider changing your hosting.

5. Audit third-party scripts — see how much weight each script adds in the “Third-party code” section of PageSpeed Insights.

Conclusion: Speed Isn’t a Luxury, It’s a Necessity

Core Web Vitals improvements are no longer optional performance work; they are a mandatory foundation for Google rankings, user satisfaction and conversions. Treat them not as a one-off sprint but as an ongoing cycle of monitoring and improvement.

If you’d like to know your site’s Core Web Vitals status or get professional speed optimisation, get in touch — we offer a free preliminary analysis.