Page speed is no longer just a user experience concern — it directly affects your search rankings, conversion rates, and revenue. Google's Core Web Vitals are now an official ranking factor. Studies consistently show that a 1-second delay in page load time reduces conversions by 7% and increases bounce rate significantly. This comprehensive guide covers the most impactful web performance optimisation techniques for 2025.

Understanding Core Web Vitals

Google's Core Web Vitals are three specific metrics that measure real-world user experience on the web. They are used as a ranking signal:

  • LCP — Largest Contentful Paint: Measures how quickly the largest visible content element (hero image, heading, or block of text) loads. Target: under 2.5 seconds.
  • INP — Interaction to Next Paint (replaced FID in 2024): Measures responsiveness — how quickly the page responds to user interactions. Target: under 200ms.
  • CLS — Cumulative Layout Shift: Measures visual stability — how much page content unexpectedly shifts as it loads. Target: under 0.1.

1. Optimise Images — The Biggest Win

Images typically account for 50–80% of a web page's total byte weight. Image optimisation alone can halve your page load time:

  • Use WebP or AVIF format — WebP is 25–35% smaller than JPEG/PNG for equivalent quality. AVIF is even smaller but has slightly lower browser support. Serve WebP with a JPEG fallback using the <picture> element.
  • Specify image dimensions — Always set width and height attributes on <img> elements. This allows the browser to reserve space before the image loads, eliminating CLS entirely for images.
  • Use responsive images — Use srcset and sizes to serve appropriately sized images for each device. Don't serve a 2000px image to a 400px mobile screen.
  • Lazy-load off-screen images — Add loading="lazy" to images below the fold. The browser will defer loading them until the user is about to scroll to them.
  • Never lazy-load the LCP image — The hero image or first visible image should load as fast as possible. Use fetchpriority="high" on it instead.

2. Minify and Compress Text Assets

Every byte of HTML, CSS, and JavaScript that you don't send is a byte the browser doesn't have to download and parse. Optimise text assets at two levels:

  • Minification — Remove whitespace, comments, and unnecessary characters. A typical CSS file can be reduced by 20–40% through minification. Use our free CSS Minifier, JS Minifier, and HTML Minifier.
  • GZIP / Brotli Compression — Enable server-side compression. Brotli compresses text assets 15–25% better than GZIP. Minified text compresses even better than formatted text. A 100KB minified JavaScript file might compress to 25KB with Brotli — a 75% reduction over the wire.

3. Eliminate Render-Blocking Resources

Render-blocking resources are scripts and stylesheets that prevent the browser from displaying any content until they finish downloading and processing. They are the most common cause of slow First Contentful Paint (FCP):

  • Move scripts to the bottom of <body> or add the defer attribute to <script> tags. Scripts with defer are downloaded in parallel but executed only after the HTML is parsed.
  • Use async for independent scripts like analytics that don't depend on the DOM.
  • Split CSS — Load only the critical CSS needed for above-the-fold content in the <head>, and defer the rest.
  • Inline critical CSS — For the most critical above-the-fold styles, inline them directly in <style> tags in the <head> to eliminate an extra HTTP request.

4. Implement Effective Caching

Caching is the most impactful optimisation for returning visitors. A perfectly cached page can load in milliseconds from the browser's disk cache, regardless of server response time:

  • Version your static assets — Add a content hash to filenames (main.abc123.js). Set Cache-Control: public, max-age=31536000, immutable — browsers will cache them for a year and never revalidate.
  • Set appropriate cache lifetimes for HTML — HTML pages should use Cache-Control: no-cache so that browsers always revalidate the HTML (but use ETags so they only re-download if it actually changed).
  • Use a CDN — A Content Delivery Network caches your static assets on servers close to your users worldwide, dramatically reducing latency.

5. Reduce JavaScript Payload and Execution Time

JavaScript is the most expensive type of resource on the web — it must be downloaded, parsed, compiled, and executed. Every 50KB of JavaScript you remove saves parse/compile time even after the file has been cached:

  • Code splitting — Instead of loading one giant JavaScript bundle, split your code into smaller chunks and load each chunk only when it's needed (lazy-loading routes in React, Vue, etc.).
  • Tree shaking — Modern bundlers like Vite and webpack remove unused code (dead code elimination) from your final bundle. Import only what you use from libraries.
  • Avoid heavy libraries for small tasks — Don't load a 70KB date library just to format a date. Use Intl.DateTimeFormat (built into browsers) instead.
  • Move non-UI work to Web Workers — Offload computationally expensive operations to background threads so they don't block the main thread and cause INP issues.

6. Preload and Prefetch Critical Resources

Browser hints tell the browser to fetch resources earlier than it would otherwise discover them:

Resource Hints
<!-- Preload: fetch this resource ASAP (critical for current page) -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero-image.webp" as="image">

<!-- Prefetch: fetch this resource in the background (likely to be needed soon) -->
<link rel="prefetch" href="/next-page.html">

<!-- Preconnect: establish connection early to third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">

7. Optimise Web Fonts

Web fonts are often invisible render-blockers. The browser must download a font file before it can display text that uses it, causing a Flash of Invisible Text (FOIT):

  • Use font-display: swap — This tells the browser to show text in a system font immediately and swap to your web font when it's ready, eliminating FOIT.
  • Preload your primary font file using <link rel="preload">.
  • Use the unicode-range descriptor to load only the character subsets you actually use.
  • Self-host fonts when possible — avoids the DNS lookup, TCP connection, and TLS handshake overhead of connecting to an external font CDN.

Minify Your Assets for Faster Load Times

Compress HTML, CSS, and JavaScript instantly with our free online tools — no installation required.