Page Speed Optimization: How to Make Your Website Faster
Page speed is a direct Google ranking factor and has a massive impact on conversion rates. A one-second delay in load time can reduce conversions by 7%. Fast sites rank higher, convert better, and provide a better user experience across all devices.
Image Optimization
Images are typically the largest assets on a webpage. Use modern formats - WebP reduces file size by 25-35% versus JPEG with no perceptible quality loss. AVIF reduces it further still. Always set explicit width and height attributes to prevent layout shift. Use lazy loading on below-the-fold images with loading="lazy". Serve responsive images using srcset so mobile users do not download desktop-sized images. Compress images before upload using tools like Squoosh or ImageOptim.
JavaScript Optimization
JavaScript is the biggest cause of slow interactivity. Defer non-critical scripts with the defer attribute so they do not block HTML parsing. Use async for scripts that do not depend on DOM readiness. Split your JavaScript bundle so users only download code needed for the current page. Remove unused JavaScript - unused code still has to be parsed by the browser. Avoid long tasks over 50ms that block the main thread and hurt INP scores.
CSS Optimization
Minimize render-blocking CSS by inlining critical above-the-fold styles and loading the full stylesheet asynchronously. Remove unused CSS - large stylesheets slow down style calculation. Avoid CSS animations that trigger layout recalculation; use transform and opacity instead which are GPU-accelerated and do not affect layout.
Server and Caching
Use a CDN to serve static assets from servers geographically close to your users. Enable browser caching with Cache-Control headers so repeat visitors do not re-download unchanged files. Use HTTP/2 or HTTP/3 for multiplexed requests. Optimize Time to First Byte (TTFB) by upgrading your hosting, enabling server-side caching, and reducing server-side processing time. For Next.js sites like those on Vercel, edge caching handles most of this automatically.
Fonts
Web fonts cause invisible text while loading. Use font-display: swap to show fallback text immediately, or font-display: optional to skip loading if slow. Preload your most important font files. Limit yourself to 2 font families maximum. Self-host fonts rather than loading from Google Fonts to avoid an extra DNS lookup.