Back to Calculator

How to Reduce Website Latency

Performance optimisation has a clear priority order. Start with the highest-impact, lowest-effort changes. For most sites, a CDN plus image optimisation delivers 80% of the available improvement for 20% of the work.

Low effort
Medium effort
High effort

Content Delivery Network (CDN)

Low effortHigh impact
Speed gain: 50 to 200ms reduction for global users
Cost: $20 to $500/month depending on traffic

A CDN caches your static assets on servers close to users worldwide. Instead of every request travelling to your origin server, most requests are served from a node within 10 to 50ms of the user. This is the single highest-ROI performance investment for most websites.

How to implement

  • Choose a CDN provider: Cloudflare (free tier available), Fastly, AWS CloudFront, or Vercel Edge Network for Next.js
  • Configure caching headers (Cache-Control) correctly on static assets: images, JS, CSS should cache for at least 1 year with content-addressed URLs
  • Enable Gzip or Brotli compression on all text responses
  • Use the CDN edge for A/B testing and geo-targeting to avoid additional round trips

Image Optimisation

Low to Medium effortHigh impact
Speed gain: 300ms to 2s reduction (images are typically 50-70% of page weight)
Cost: $0 with Next.js built-in, or $50-$200/month for Cloudinary/Imgix

Images are the largest contributor to page weight on most websites. Converting to modern formats (WebP, AVIF) and implementing lazy loading delivers one of the highest performance gains for the least code change.

How to implement

  • Use next/image in Next.js for automatic WebP conversion and lazy loading
  • Implement responsive images with srcset to avoid serving large images on small screens
  • Use AVIF for hero images (40% smaller than WebP with similar quality)
  • Compress images before upload: aim for under 100KB for above-the-fold images
  • Set explicit width and height attributes on images to eliminate layout shift (CLS)

JavaScript Bundle Reduction

Medium to High effortHigh impact
Speed gain: 500ms to 3s on mobile (parsing/executing JS is the main mobile bottleneck)
Cost: Engineering time only

JavaScript is the most expensive resource per byte: it must be downloaded, parsed, compiled, and executed. Large JS bundles are the primary cause of slow Time to Interactive (TTI), particularly on mid-range mobile devices.

How to implement

  • Audit your bundle with webpack-bundle-analyzer or Next.js built-in bundle analysis
  • Remove unused dependencies: lodash, moment.js, and large UI libraries are common culprits
  • Use dynamic imports to code-split and lazy-load routes and components
  • Replace large libraries with smaller alternatives (date-fns instead of moment.js)
  • Defer non-critical third-party scripts (analytics, chat, advertising)

Server-side Rendering and Caching

Medium effortMedium to High impact
Speed gain: 200ms to 1s on initial page load
Cost: Engineering time; possible infrastructure changes

Moving rendering to the server (SSR or SSG) allows HTML to be sent immediately instead of waiting for JavaScript to execute. Static Generation (SSG) with incremental regeneration (ISR) delivers the fastest possible initial page loads.

How to implement

  • Use Static Site Generation (getStaticProps / generateStaticParams) for pages that do not require per-request data
  • Implement Incremental Static Regeneration (ISR) for pages that change occasionally
  • Add a Redis or Vercel Edge Config cache layer for dynamic data that can be stale for short periods
  • Use Next.js Server Components to reduce client-side JavaScript hydration cost

HTTP/2 and HTTP/3

Low effortMedium impact
Speed gain: 50 to 300ms, especially on high-latency connections
Cost: $0 (supported by all major CDNs and hosting providers)

HTTP/2 multiplexes multiple requests over a single connection, eliminating the head-of-line blocking of HTTP/1.1. HTTP/3 (QUIC) further improves performance on lossy connections. Most CDNs enable this automatically.

How to implement

  • Verify HTTP/2 is enabled: check the Network tab in Chrome DevTools (Protocol column shows 'h2')
  • Enable HTTP/3 (QUIC) on Cloudflare or similar CDNs that support it
  • With HTTP/2, domain sharding is counterproductive. Remove it if you have multiple asset domains

Critical CSS Inlining

Medium effortMedium impact
Speed gain: 100 to 400ms for first meaningful paint
Cost: Engineering time; tools like Critical or PurgeCSS help automate

Render-blocking CSS prevents the browser from displaying anything until the stylesheet is downloaded and parsed. Inlining the critical CSS (styles needed for above-the-fold content) allows the browser to render immediately while the full stylesheet loads asynchronously.

How to implement

  • Use the Critical npm package to automatically extract and inline above-the-fold CSS
  • Load the full CSS stylesheet asynchronously using the media='print' trick or JavaScript
  • Remove unused CSS with PurgeCSS (Tailwind CSS does this automatically in production builds)

Edge Computing and Edge Functions

Medium to High effortHigh for specific use cases impact
Speed gain: 100 to 500ms for personalisation and A/B testing decisions
Cost: $0 to $50/month on Vercel, Cloudflare Workers, or similar

Edge functions run server-side code at CDN nodes globally, bringing server logic within milliseconds of users. Particularly powerful for personalisation, authentication, A/B testing, and geo-routing that previously required round trips to origin.

How to implement

  • Use Vercel Edge Middleware or Cloudflare Workers for auth checks, A/B test splits, and redirects
  • Move geo-detection and personalisation decisions to the edge to eliminate origin round trips
  • Use edge caching for API responses that can tolerate short staleness (30s to 5min)
Calculate Your Latency Revenue Impact