Website Speed Optimisation Guide 2026: Core Web Vitals

Over half of mobile users abandon a website that takes more than three seconds to load. For e-commerce sites, every single second of delay reduces conversion rates by roughly 7%. Google has given Core Web Vitals increased weight as ranking signals since late 2025, making website speed optimisation simultaneously a user experience priority and an SEO necessity. Spending thousands on advertising and then sending that traffic to a slow website is the digital equivalent of pouring water into a sieve. This guide covers Google’s speed metrics from the ground up, walks through every optimisation layer from image compression to server configuration, and provides WordPress-specific tips alongside universal principles that apply regardless of your platform.

Core Web Vitals: Google’s Speed Report Card

Core Web Vitals are three metrics Google uses to measure page experience. They directly influence search ranking and together paint a picture of how real users experience your site’s performance.

LCP (Largest Contentful Paint)

Measures when the largest visible content element (hero image, headline block, video thumbnail) finishes rendering. Google’s “good” threshold is 2.5 seconds. Most UK and US websites exceed this on mobile because of unoptimised images and slow server response times. To improve LCP, start with server response time (TTFB). If the server takes over 800 milliseconds to respond, front-end optimisation alone cannot fix LCP. The second priority is the LCP element’s loading priority. Add fetchpriority="high" to the hero image and avoid lazy loading it.

INP (Interaction to Next Paint)

Replaced FID in March 2024. INP measures how quickly the browser visually responds to every user interaction (click, tap, keystroke) throughout the entire page session. The “good” threshold is 200 milliseconds. Heavy JavaScript, main-thread-blocking third-party scripts, and complex DOM structures are the primary causes of poor INP. A common problem on UK and US e-commerce sites: live chat widgets, analytics scripts, ad pixels, and social embeds all stacking up, collectively blocking the main thread for 300-500 milliseconds. This makes buttons feel unresponsive and forms feel sluggish.

CLS (Cumulative Layout Shift)

Measures unexpected content shifts during page loading. Reading a paragraph when an ad banner loads above it, pushing the text down, is the classic CLS problem. The threshold is 0.1. Setting explicit width and height on images, reserving space for ads and dynamic content, and optimising web font loading strategy all reduce CLS.

Measuring Your Current Performance

Before optimising anything, benchmark your current state. You cannot improve what you do not measure.

Google PageSpeed Insights: The essential first tool. Provides both lab data (simulated) and field data (real user metrics from the Chrome User Experience Report). Focus on field data when available because it reflects actual user experience. Test both mobile and desktop, but prioritise mobile scores.

GTmetrix: Offers waterfall charts showing exactly what loads, in what order, and how long each resource takes. Invaluable for diagnosing specific bottlenecks. Free tier is sufficient for most needs.

Chrome DevTools Performance Tab: For developers, this provides frame-by-frame analysis of page loading and interaction performance. The Lighthouse tab runs automated audits with actionable suggestions.

WebPageTest: Advanced testing with multi-step scripts, video comparison, and testing from multiple global locations. Particularly useful for comparing before-and-after optimisation results.

Google Search Console Core Web Vitals Report: Shows how Google sees your site’s performance across all pages, grouped into “Good,” “Needs Improvement,” and “Poor” categories. This is the authoritative source because it reflects the data Google actually uses for ranking decisions.

Image Optimisation

Images are typically the heaviest elements on a web page and the single biggest opportunity for speed improvement. On an average web page, images account for over 50% of total page weight.

Format Selection

WebP is the standard image format for the web in 2026. It delivers 25-35% smaller file sizes than JPEG at equivalent quality and supports transparency (replacing PNG). AVIF offers even better compression (50% smaller than JPEG) but browser support, while growing, is not yet universal. Use WebP as the primary format with JPEG fallback for older browsers.

Responsive Images

Serve different image sizes to different devices using the srcset attribute. A 1920px-wide hero image is wasteful on a 375px phone screen. Generate image variants at 400px, 800px, 1200px, and 1920px widths. Let the browser choose the appropriate size based on viewport and device pixel ratio.

Lazy Loading

Images below the fold should use native lazy loading (loading="lazy"). This defers their loading until the user scrolls near them, reducing initial page weight and improving LCP. Never lazy-load the hero image or any above-the-fold content; these should load immediately with high priority.

Compression

Tools like ShortPixel, Imagify, TinyPNG, and Squoosh compress images without perceptible quality loss. Aim for file sizes under 200 KB for standard content images and under 400 KB for hero images. Automated compression via WordPress plugins (ShortPixel, Imagify) handles this at upload time.

CSS and JavaScript Cleanup

Render-blocking CSS and unused JavaScript are the second most common performance bottleneck after images.

Critical CSS: Extract the CSS needed to render the above-the-fold content and inline it in the HTML head. Defer the rest. This allows the browser to render the visible page immediately without waiting for the full stylesheet to download.

Unused CSS removal: Most WordPress themes and page builders load CSS for every possible component on every page, even if only 20% of the styles are used. Tools like PurgeCSS and UnCSS identify and remove unused styles. On a typical WordPress site, 60-80% of loaded CSS goes unused on any given page.

JavaScript deferral: Non-critical JavaScript should load with the defer or async attribute. Third-party scripts (analytics, chat widgets, ad tracking) should load after the main page content. Every render-blocking script delays INP and LCP.

Bundle optimisation: Concatenating and minifying CSS and JavaScript files reduces HTTP requests and total file size. Modern build tools handle this automatically, and WordPress caching plugins (WP Rocket, LiteSpeed Cache) provide these features without requiring development tools.

Caching Strategies

Caching stores pre-built versions of your pages so the server does not need to generate them from scratch for every visitor. The performance improvement can be dramatic: uncached WordPress page loads in 2-4 seconds; cached page loads in 200-500 milliseconds.

Browser caching: Set appropriate cache headers so returning visitors load static assets (images, CSS, JS, fonts) from their browser cache rather than re-downloading them. Cache durations of one year for static assets and shorter periods for HTML are standard practice.

Server-side caching: Page caching stores complete HTML output. Object caching (Redis, Memcached) stores database query results. Both dramatically reduce server processing time. On WordPress, WP Rocket, LiteSpeed Cache, or W3 Total Cache handle both page and object caching.

Edge caching: CDN edge servers cache your content at locations geographically close to your visitors, reducing latency. Cloudflare’s APO (Automatic Platform Optimisation) for WordPress caches entire HTML pages at the edge, delivering near-instant load times for repeat visitors.

CDN Configuration

A Content Delivery Network (CDN) distributes your website’s static assets across a global network of servers. When a visitor from London accesses your site, they receive assets from a London server rather than a server in Virginia. This reduces latency by hundreds of milliseconds.

Cloudflare: The most widely used CDN, with a generous free tier. Provides DNS management, SSL, DDoS protection, and caching. The Pro plan (£16/month) adds image optimisation and better analytics. APO for WordPress (£4/month) caches HTML at the edge.

Fastly: Used by major platforms (Shopify, Pinterest). Instant cache purging and edge computing capabilities. Better suited for high-traffic sites and applications with frequently changing content.

Bunny CDN: Budget-friendly alternative with pay-as-you-go pricing starting at around £0.01 per GB. Good performance and easy setup. A solid choice for smaller sites that need CDN benefits without Cloudflare’s complexity.

Hosting and Server Selection

No amount of front-end optimisation can compensate for a slow server. If your TTFB (Time to First Byte) exceeds 800 milliseconds, the battle is lost before it begins.

Shared hosting (£3-10/month) crams hundreds of sites onto a single server. Adequate for very low-traffic sites but creates performance problems as traffic grows. Not recommended for any business that takes its online presence seriously.

Managed WordPress hosting (£20-100/month) from providers like Kinsta, WP Engine, Cloudways, or SiteGround provides optimised server configurations, built-in caching, staging environments, and expert support. The performance difference compared to shared hosting is immediate and dramatic.

VPS and cloud hosting (£30-200/month) from DigitalOcean, Linode, Vultr, or AWS Lightsail gives you a dedicated virtual server. More control but more responsibility. Best for teams with server administration knowledge.

For UK-focused businesses, choose a hosting provider with servers in London or the UK. For US-focused businesses, choose East Coast or West Coast data centres depending on your primary audience location. Server proximity to your visitors directly affects TTFB.

Mobile Speed Optimisation

Mobile devices process JavaScript three to five times slower than desktop computers and often connect via slower networks. Optimising for mobile requires additional considerations beyond general speed work.

Serve mobile-sized images using srcset. A 400px-wide image for a phone is 70-80% smaller than the 1920px desktop version. Use content-visibility: auto on below-the-fold sections to defer their rendering until needed. Limit third-party scripts; each one competes for the mobile device’s limited processing power. Test on real devices, not just emulators. Mid-range Android phones (the most common devices globally) process pages noticeably slower than the latest iPhones used by developers during testing.

WordPress Speed Tips

WordPress powers the majority of business websites, so platform-specific optimisation advice is worth covering in detail.

Plugin audit: Deactivate and delete plugins you are not actively using. Every plugin adds database queries, CSS, and JavaScript. Many sites run 30+ plugins when 10-15 would suffice. Use Query Monitor to identify which plugins consume the most resources.

Theme selection: Lightweight themes (GeneratePress, Kadence, Astra) outperform heavy multi-purpose themes by a large margin. If you are using a theme that loads 500 KB of CSS and 1 MB of JavaScript on every page, switching themes may be the single most impactful change you can make.

Database cleanup: WordPress databases accumulate post revisions, spam comments, transient options, and orphaned metadata over time. Use WP-Optimize or Advanced Database Cleaner to purge unnecessary data. A bloated database slows every page load.

PHP version: Ensure your hosting runs PHP 8.1 or higher. Each PHP version brings meaningful performance improvements. Sites still running PHP 7.x are leaving significant speed gains on the table.

Recommended plugin stack for speed: WP Rocket or LiteSpeed Cache (caching), ShortPixel or Imagify (image compression), Perfmatters (script management), and Asset CleanUp (per-page CSS/JS control). This combination addresses the most common WordPress performance issues.

Third-Party Script Management

Third-party scripts are the most underestimated performance killers on modern websites. Analytics tags, chat widgets, social media embeds, advertising pixels, heat mapping tools, A/B testing scripts, and CRM integrations each add HTTP requests, JavaScript execution time, and main thread blocking. Individually, each seems harmless. Together, they often account for 40-60% of total JavaScript execution time on a page.

Audit every third-party script on your site. For each one, ask: do we actively use the data this script collects? Is this tool essential to the business? Can it be loaded differently (deferred, async, on interaction only)? Many businesses still load scripts for tools they trialled months ago and never configured properly, or analytics platforms whose dashboards nobody checks.

Lazy-load interactive widgets: Chat widgets like Intercom and Tidio can be loaded only when the user clicks the chat icon rather than on page load. This technique alone can improve INP by 100-200 milliseconds. The Perfmatters plugin for WordPress provides per-page script management that enables this without custom code.

Server-side tracking: Google Tag Manager’s server-side container moves tracking execution from the visitor’s browser to your server. This reduces client-side JavaScript load, improves privacy (first-party cookies instead of third-party), and makes tracking more reliable. Implementation requires Google Cloud Platform setup but dramatically improves both performance and data quality.

Font Loading Optimisation

Custom web fonts are essential for brand consistency but can create performance problems if not handled correctly. An unoptimised font setup causes: FOIT (Flash of Invisible Text) where text is hidden until the font loads, FOUT (Flash of Unstyled Text) where a fallback font swaps to the custom font mid-read, and CLS as different font sizes cause layout shifts.

Best practices: Use font-display: swap to show a fallback font immediately while the custom font loads. Subset your fonts to include only the characters you actually use . This can reduce font file sizes by 60-80%. Host fonts locally rather than loading from Google Fonts CDN; local hosting eliminates a DNS lookup and connection to an external server. Use WOFF2 format exclusively; it offers the best compression and is supported by all modern browsers.

Variable fonts replace multiple font files (regular, bold, italic, etc.) with a single file, reducing total download size while providing more typographic flexibility. A variable font file is typically smaller than two static font files combined.

Ongoing Performance Monitoring

Speed optimisation is not a one-time project. New content, plugin updates, theme changes, and third-party script modifications can all degrade performance over time. Establish a monitoring routine.

Monthly: Run Google PageSpeed Insights and GTmetrix tests on your five most important pages. Compare scores to the previous month. Investigate any significant declines.

Quarterly: Review Google Search Console Core Web Vitals report. Check for newly flagged “Needs Improvement” or “Poor” URLs. Run a full Lighthouse audit across key page templates.

After every change: Test performance after plugin updates, theme changes, new content with heavy media, or third-party script additions. Catching regressions immediately is far easier than diagnosing months-old performance decay.

E-Commerce Specific Speed Optimisation

E-commerce sites face unique speed challenges that generic optimisation guides overlook. Product listing pages often load dozens of images simultaneously. Category filtering can trigger expensive database queries. Checkout flows load payment gateway scripts that block the main thread. Each of these requires targeted solutions.

Product listing pages: Implement intersection observer-based lazy loading for product images. Load the first 12-20 product images immediately and defer the rest until the user scrolls. Use skeleton screens (grey placeholder boxes that match image dimensions) to prevent CLS while images load. Consider infinite scroll or “Load More” buttons instead of traditional pagination to keep users engaged.

Category filtering: Ajax-based filtering (no full page reload) is significantly faster than server-side filtering. Cache filtered results when possible. For WooCommerce, plugins like FiboSearch and FacetWP provide high-performance filtering without page reloads.

Checkout speed: The checkout page is where speed matters most because abandoned checkouts directly equal lost revenue. Defer non-essential scripts on the checkout page. Load payment gateway scripts asynchronously. Minimise form fields. Pre-fill address data using browser autofill or postcode lookup APIs. Every 100 milliseconds of checkout delay costs measurable revenue.

Tools like SpeedCurve and CalibreApp provide continuous real-user monitoring (RUM) and automated alerts when performance drops below thresholds. For businesses where website speed is revenue-critical (e-commerce, SaaS), these tools are worth the investment.

Frequently Asked Questions