The Complete Guide to Web Performance Optimisation in 2025

Google's Core Web Vitals are now a confirmed ranking signal, and the data on their conversion impact is unambiguous: a 1-second improvement in page load time increases conversions by 2–7%, depending on your industry. For a £10M e-commerce site, that's potentially £700K in annual revenue from engineering work alone. Here's how we approach performance systematically.

The Three Core Web Vitals

• <strong>LCP (Largest Contentful Paint) — target: < 2.5s.</strong> How long until the main content is visible? Usually your hero image or headline.
• <strong>INP (Interaction to Next Paint) — target: < 200ms.</strong> How fast does the page respond to user interactions? Replaced FID in 2024.
• <strong>CLS (Cumulative Layout Shift) — target: < 0.1.</strong> Do elements jump around as the page loads? Caused by images without dimensions, dynamically injected content.

LCP Optimisation Techniques

<!-- 1. Preload your LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. Use fetchpriority on the img element -->
<img src="/hero.webp" alt="Hero" fetchpriority="high" width="1200" height="600">

<!-- 3. Serve modern formats -->
<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero" width="1200" height="600">
</picture>

JavaScript Optimisation

JavaScript is the single biggest performance lever on most sites. Key tactics: (1) Code split aggressively — no bundle over 100KB uncompressed. (2) Defer non-critical scripts. (3) Remove unused dependencies (use bundle-buddy or webpack-bundle-analyzer). (4) Use dynamic imports for heavy libraries (chart libraries, rich text editors). (5) Move computation off the main thread with Web Workers for anything over 50ms.

The Image Checklist

1. Serve WebP or AVIF (40–70% smaller than JPEG at same quality).
2. Always set explicit width and height to prevent CLS.
3. Use loading="lazy" on all below-the-fold images.
4. Serve responsive images with srcset and sizes attributes.
5. Use a CDN with image transformation (Cloudflare Images, Cloudinary, or imgix).