How to speed up your website and improve Core Web Vitals

Core Web Vitals are Google's metrics that measure user experience on your website. They consist of three key indicators: LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift).

The most common issue I encounter with clients is oversized images. The solution is using modern formats like WebP or AVIF and setting proper width and height attributes. In Next.js, the Image component handles this automatically.

Another critical factor is JavaScript bundle size. Unnecessarily large JS bundles slow down parsing and block page interactivity. Code splitting, lazy loading and tree shaking are techniques that solve this problem.

My recommendations for a fast website: minimise render-blocking resources, optimise fonts with font-display: swap, use a CDN for static assets, and regularly measure performance using Lighthouse or PageSpeed Insights.