Website Performance Optimisation: Core Web Vitals & Lighthouse 90+
Page speed is not a vanity metric — it is a Google ranking factor, a conversion driver, and a trust signal all in one. This guide covers every technical decision that separates a Lighthouse 90+ website from one stuck in the 50s, with implementation steps you can apply immediately.
What is Website Performance Optimisation?
Website performance optimisation is the technical process of reducing page load times, improving Core Web Vitals scores, and ensuring a website delivers a fast, stable, and responsive experience across all devices and network conditions. It directly impacts Google search rankings, user experience, and conversion rates — making it one of the highest-leverage technical investments a website can have.
Google ranking impact
Core Web Vitals are an official Page Experience ranking signal since 2021
Conversion impact
Every 1-second delay reduces conversions by up to 7% and increases bounce rate
Primary tool
Google Lighthouse — audits Performance, Accessibility, Best Practices, and SEO
▸ Core Web Vitals
The 3 Core Web Vitals — What They Measure and How to Pass Them
Google evaluates page experience through three specific metrics. Understanding what each measures and how each is calculated is the foundation of any performance optimisation programme.
Largest Contentful Paint
Measures: Loading performance
Time for the largest visible element — usually a hero image or heading — to fully render in the viewport.
Thresholds
How to fix
Optimise & preload hero image
Reduce server response time (TTFB)
Eliminate render-blocking resources
Use a CDN
Interaction to Next Paint
Measures: Responsiveness
How quickly the page responds to user interactions like clicks, taps, and keyboard input. Replaced FID in 2024.
Thresholds
How to fix
Reduce long JavaScript tasks
Break up heavy event handlers
Defer non-critical JS
Use web workers for heavy computation
Cumulative Layout Shift
Measures: Visual stability
How much visible content shifts unexpectedly during loading. High CLS means elements jump around as the page loads.
Thresholds
How to fix
Always set image width & height
Reserve space for ads & embeds
Use font-display: swap
Avoid inserting content above existing content
▸ Lighthouse Audit
The 4 Lighthouse Categories — What Each Covers
Lighthouse audits four distinct areas of your website. All four matter — but for different reasons. Here is what each category covers and why it deserves a 90+ score.
Performance
What it measures
Page speed, Core Web Vitals, resource efficiency
Why it matters
Direct Google ranking signal and conversion rate driver
Accessibility
What it measures
Screen reader support, colour contrast, keyboard navigation
Why it matters
Legal compliance, wider audience reach, and indirect SEO benefit
Best Practices
What it measures
HTTPS, secure dependencies, modern APIs, no console errors
Why it matters
Security, browser compatibility, and trust signal for users
SEO
What it measures
Meta tags, crawlability, mobile-friendliness, structured data
Why it matters
Ensures Google can correctly index and rank every page
▸ Implementation Checklist
The Complete Website Performance Checklist
Every item on this checklist has a measurable impact on Lighthouse scores and Core Web Vitals. Items marked High impact should be prioritised before anything else.
Images
Convert all images to WebP format
Add explicit width and height on every image element
Implement lazy loading on below-fold images
Preload the LCP image in the HTML head
Compress images to under 200KB where possible
Use next/image for automatic optimisation in Next.js
JavaScript
Remove unused JavaScript with bundle analyser
Code-split so only page-relevant JS loads per route
Defer all non-critical third-party scripts
Avoid render-blocking scripts in the document head
Move heavy computations to web workers or server
Tree-shake unused library imports
CSS & Fonts
Remove unused CSS with PurgeCSS or Tailwind JIT
Inline critical above-fold CSS
Use font-display: swap on all web fonts
Preload primary font files in the head
Use system font stack where brand allows
Avoid loading multiple font weights unnecessarily
Server & Delivery
Deploy on a CDN with global edge nodes (Vercel, Cloudflare)
Enable HTTP/2 or HTTP/3 on your server
Set correct Cache-Control headers on static assets
Keep server TTFB under 800ms
Use static generation (SSG) where content allows
Enable Brotli or gzip compression on all responses
▸ Why Next.js
Why Next.js Outperforms Every Other Framework on Performance
Next.js does not just make performance easier — it makes many optimisations the default. These six built-in capabilities are why every site we build at 4Byte ships on Next.js.
Automatic Image Optimisation
next/image automatically converts images to WebP, resizes for each viewport, lazy loads by default, and prevents CLS by requiring explicit dimensions.
Automatic Code Splitting
Each page only loads the JavaScript it needs. No monolithic bundles. Users on the homepage never download code for the contact page.
Static Site Generation
Pages are pre-rendered at build time and served as static HTML from a CDN — delivering sub-500ms load times globally without a server round trip.
Built-In Font Optimisation
next/font automatically self-hosts Google Fonts, eliminates external network requests, and implements font-display: swap — removing one of the most common CLS causes.
Vercel Edge Delivery
Deployed to Vercel's global edge network — over 100 locations worldwide — static assets and pages are served from the node closest to each visitor.
Zero-Config Bundle Optimisation
Tree shaking, minification, dead code elimination, and scope hoisting are applied automatically in production builds — no manual webpack configuration needed.
▸ Common Issues
4 Performance Issues We Fix on Every Audit
These four issues account for the majority of poor Lighthouse scores we encounter when auditing existing websites. Each has a clear, implementable fix.
Issue
Hero image causing LCP above 4 seconds
Root cause
The LCP element is a large, unoptimised image loaded without preload hint and served from origin, not a CDN.
Fix
Convert to WebP, add preload link in head, serve via CDN, and use next/image with priority prop. Targets LCP under 2.5s.
Issue
Third-party scripts blocking main thread
Root cause
Google Tag Manager, chat widgets, and ad pixels loaded synchronously in the head block rendering and inflate INP.
Fix
Move all third-party scripts to load with defer or async. Load non-critical tools (chat, heatmaps) after the main page is interactive.
Issue
Layout shift from fonts loading late
Root cause
Web fonts replace the fallback system font after load, causing text elements to reflow and CLS to spike.
Fix
Add font-display: swap to all @font-face declarations. Preload primary font files. Use next/font to self-host and eliminate FOUT entirely.
Issue
Unused JavaScript inflating bundle size
Root cause
A 2MB+ JavaScript bundle loaded on a simple marketing page — often caused by importing entire libraries instead of specific functions.
Fix
Run next build with ANALYZE=true to identify large bundles. Replace lodash with native methods. Import only the components used from UI libraries.
▸ Performance at 4Byte Agency
Every Site We Ship Hits Lighthouse 90+.
Performance is not an optional checklist item at 4Byte — it is a hard launch requirement. We run a full Lighthouse audit on every page before any project goes live, and no site ships until Performance, Accessibility, Best Practices, and SEO all score 90 or above.
We also offer standalone performance audits for existing websites — a full Lighthouse review with prioritised fixes and implementation support.
Book a free performance audit→▸ FAQ
Frequently Asked Questions
Common questions about website performance optimisation — Core Web Vitals, Lighthouse scores, Next.js, and how 4Byte Agency approaches performance on every build.
What are Core Web Vitals?+
Core Web Vitals are three Google performance metrics: LCP (Largest Contentful Paint) measures loading speed — target under 2.5 seconds; INP (Interaction to Next Paint) measures responsiveness — target under 200ms; and CLS (Cumulative Layout Shift) measures visual stability — target under 0.1. Google uses these as a ranking signal in its Page Experience algorithm.
What is a good Lighthouse score?+
A Lighthouse score of 90–100 is considered good. Scores of 50–89 need improvement. Below 50 is poor. The audit covers Performance, Accessibility, Best Practices, and SEO — each scored 0–100. At 4Byte, we target 90+ across all four categories on every project before launch.
How does page speed affect SEO?+
Page speed affects SEO directly — Google uses Core Web Vitals as a ranking signal. Faster sites rank higher when content quality is equal. Indirectly, slow pages increase bounce rate, which sends negative engagement signals to Google. A 1-second improvement in load time increases conversions by 7% and measurably reduces bounce rate.
How do I improve my website LCP score?+
Identify the LCP element (usually the hero image). Convert it to WebP. Add a preload hint in the HTML head. Compress it under 200KB. Serve it from a CDN. Eliminate render-blocking scripts above the fold. Reduce server response time (TTFB) under 800ms. These changes typically bring LCP from 4+ seconds to under 2.5 seconds.
What causes high Cumulative Layout Shift (CLS)?+
Common CLS causes: images without explicit width and height attributes causing reflow on load; web fonts causing text to shift when they replace the fallback font; dynamically injected content like cookie banners pushing existing content down; and CSS animations affecting layout properties. Fix by specifying all image dimensions, using font-display: swap, and reserving space for dynamic content.
What is the fastest way to improve website performance?+
The fastest wins: convert all images to WebP and add lazy loading (cuts 30–60% of page weight); remove unused JavaScript; add a CDN; enable browser caching; preload the LCP image. These five changes can move a Lighthouse score from 50 to 80+ without changing any design or content.
Does Next.js improve website performance?+
Yes significantly. Next.js provides automatic image optimisation via next/image, automatic code splitting per page, static site generation for near-instant loads, built-in font optimisation, and seamless Vercel edge deployment. Next.js sites consistently score higher on Lighthouse than equivalent WordPress or Webflow sites.
How does 4Byte ensure high performance on every build?+
Performance is a build requirement at 4Byte — not an afterthought. We use Next.js with static generation, next/image for automatic optimisation, Vercel edge deployment, preloaded LCP assets, minimal third-party scripts, and a Lighthouse audit on every page before launch. Our standard is 90+ across all four Lighthouse categories.
▸ Related Resources
Continue Learning
Explore more technical guides on SEO, accessibility, and building a web presence that ranks, converts, and scales.
Technical SEO Guide
A complete technical SEO checklist for modern websites — structured data, crawlability, and more.
Website Redesign Guide
When to redesign and how to improve performance without losing rankings.
Conversion Rate Optimisation
Performance is the foundation of CRO — learn how to convert more traffic.
Landing Page Development
Build fast, conversion-focused landing pages for ads and campaigns.
Website Development Guide
The complete guide to building professional websites in 2025.
Website Accessibility Guide
Build accessible websites that work for every user and pass Lighthouse audits.
Fast websites rank higher and convert better.
Tell us about your current site — we will audit it, identify every performance issue, and give you a clear fix plan. First audit call is free.
Lighthouse 90+
On every build
Free Audit
Full performance review
Fixed Price
No surprise costs