Website speed is no longer just a technical metric — it's a business metric. Google uses page speed as a ranking factor, users abandon slow sites within 3 seconds, and every 100ms improvement in load time directly increases conversion rates.
1. Understand Core Web Vitals First
Measure your baseline with Google PageSpeed Insights before optimising anything. The three Core Web Vitals are: LCP (Largest Contentful Paint) — target under 2.5s; INP (Interaction to Next Paint) — target under 200ms; CLS (Cumulative Layout Shift) — target under 0.1. These metrics directly influence your Google search rankings and user experience scores.
- LCP under 2.5 seconds
- INP under 200 milliseconds
- CLS under 0.1
- Test with PageSpeed Insights and Lighthouse
2. Optimise Images — The Biggest Win
Images account for 60–70% of a page's total weight. Converting to WebP or AVIF gives 30–50% size reduction at the same quality. Use srcset for responsive images so mobile devices download appropriately sized images. Add loading="lazy" to all below-the-fold images and set explicit width/height to prevent layout shift.
- Convert to WebP or AVIF format
- Use srcset for responsive images
- Add loading="lazy" below the fold
- Set explicit width and height on every image
- Serve images from a CDN
3. Reduce and Defer JavaScript
Render-blocking JavaScript is one of the most common causes of slow LCP. Add defer to all non-critical scripts, use code splitting to load only what's needed per page, and remove unused JavaScript from third-party plugins. Dynamic imports in React/Next.js let you load heavy components only when needed.
- Add defer or async to non-critical scripts
- Implement code splitting
- Remove unused JavaScript
- Use dynamic imports for heavy components
4. Implement Caching and Compression
Set Cache-Control: max-age=31536000 for static assets with content hashing for cache busting. Enable Gzip or Brotli compression on your server — this compresses HTML, CSS, and JS by 60–80%. Use a CDN like Cloudflare to serve assets from edge locations closest to your users.
- Long cache headers for static assets
- Enable Brotli compression
- Use a CDN for global delivery
- Cache HTML with short TTL + ETags
5. Optimise CSS and Web Fonts
Inline critical CSS in <head> and load the rest asynchronously. Use PurgeCSS to strip unused styles. For fonts: use font-display: swap, self-host instead of loading from Google Fonts to eliminate extra DNS lookups, and preload critical font files.
- Inline critical above-fold CSS
- Remove unused CSS with PurgeCSS
- Use font-display: swap
- Preload critical fonts in head
6. Server-Side Performance
Enable HTTP/2 or HTTP/3 for multiplexed connections. Reduce Time to First Byte (TTFB) by upgrading hosting or using server-side caching. Choose a host with servers geographically close to your primary audience — for Indian users, this means servers in Mumbai or Singapore.
