The data is unambiguous: every second of page load time costs you conversions. Google found that as page load time increases from 1 to 3 seconds, the probability of a bounce increases by 32%. From 1 to 5 seconds, it increases by 90%. Speed is not a technical concern — it is a business concern.

The Numbers

These figures come from studies by Google, Portent, and Deloitte across thousands of sites:

  • A 0.1-second improvement in mobile site speed improves conversion rates by 8% (Deloitte)
  • 53% of mobile users abandon a site that takes more than 3 seconds to load (Google)
  • A 1-second delay in page load reduces conversions by 7% (Akamai)
  • The average e-commerce site takes 6.7 seconds to load on mobile — far above the threshold

Translated: for a site making Rs 500,000/month in revenue, reducing load time from 4 seconds to 2 seconds could conservatively represent Rs 50,000–100,000/month in recovered revenue.

How to Measure Your Current Speed

Before optimising, measure. Use these tools:

  • PageSpeed Insights (pagespeed.web.dev) — tests both mobile and desktop, gives actionable recommendations
  • WebPageTest (webpagetest.org) — detailed waterfall charts showing exactly what loads when
  • Lighthouse in Chrome DevTools — local testing, good for development
  • Search Console → Core Web Vitals — field data from your real visitors

Always test on mobile and on a throttled connection (4G) — this is how most of your visitors experience your site.

The Biggest Wins: Image Optimisation

Images typically account for 60–80% of a page's total transfer size. This is where the biggest speed gains come from:

  • Format — use WebP for photos (30% smaller than JPEG at equivalent quality). Use AVIF where browser support allows (even smaller)
  • Compression — compress images to 80% quality. The visual difference is imperceptible; the file size difference is significant
  • Resize — never serve a 2000px wide image in a 400px container. Generate multiple sizes and use srcset
  • Lazy loading — images below the fold should load only when the user scrolls near them (loading="lazy")
  • Priority loading — your hero/LCP image should have fetchpriority="high" to load first

In Next.js, next/image handles all of this automatically when used correctly.

Eliminate Render-Blocking Resources

CSS and JavaScript that load in the <head> block the browser from rendering anything until they finish downloading and parsing. Every millisecond of render-blocking is visible to the user as a white screen.

  • Load non-critical CSS asynchronously or inline critical CSS
  • Defer non-critical JavaScript with defer or async
  • In Next.js, use next/script with strategy="lazyOnload" for third-party scripts (analytics, chat widgets, social embeds)
Third-party scripts are the silent killers of page performance. A single marketing tag manager loading 15 scripts can add 2–4 seconds to your load time. Audit ruthlessly.

Use a CDN

A Content Delivery Network stores copies of your static assets (images, CSS, JS) at edge servers around the world. When a user in Sri Lanka visits your site, assets load from the nearest server — not from a data centre in the US or Europe.

The latency difference between a server in Asia and one in the US can easily be 200–400ms per request. For a page with 20 assets, that compounds severely.

Cloudflare offers a free CDN tier that is straightforward to enable. Vercel includes global CDN deployment automatically for Next.js apps.

Minimise JavaScript

JavaScript is the most expensive type of web resource — it must be downloaded, parsed, compiled, and executed, all before it has any effect. Every KB of JavaScript added to a page costs more than a KB of image.

  • Audit your bundle with @next/bundle-analyzer — find large dependencies
  • Use dynamic imports (import('...')) to split large components into separate chunks loaded only when needed
  • Replace heavy libraries with lighter alternatives where possible
  • Use React Server Components for anything that does not need interactivity — they add zero JS to the client bundle

Enable Caching

Static assets (images, fonts, CSS, JS) should be cached aggressively — browsers that have already downloaded them should not re-download on subsequent visits.

  • Set Cache-Control: max-age=31536000, immutable on assets with versioned URLs
  • Next.js handles this automatically for its build output
  • Your HTML pages should be cached shorter (or not at all) so updates appear immediately

Performance work has a compounding return. A faster site ranks higher, which brings more traffic. More traffic with better conversion rates generates more revenue. That revenue funds further investment. Start with images and third-party scripts — they are the highest-leverage changes available and often require no code changes at all.