Web Performance Optimisation: Make Your Site Load in Under 1 Second

Why Performance Matters

A one-second delay in page load can reduce conversions by 7%. Google uses Core Web Vitals as a ranking factor. Optimising performance directly impacts revenue and SEO simultaneously.

Image Optimisation

Images are typically the largest payloads on any page. Convert them to WebP or AVIF, serve responsive sizes with srcset, and lazy-load below-the-fold images. In Next.js, the Image component handles all of this automatically.

Code Splitting and Tree Shaking

Split your JavaScript bundle so the browser only downloads the code needed for the current page. Use dynamic imports for heavy libraries like chart libraries or rich text editors. Tree shaking eliminates unused exports at build time.

Caching and CDN

Set long cache headers for static assets and serve them from a CDN close to your users. Vercel and Netlify do this automatically. Combine with service workers for offline support and instant repeat visits.