Website Page Speed Optimization: The Definitive Guide for 2026

LCP (Largest Contentful Paint): Measures loading performance — how fast the largest visible element renders. Target: <2.5 seconds. The most common cause of poor LCP is unoptimized hero images and render-blocking resources.

CLS (Cumulative Layout Shift): Measures visual stability — how much page content shifts during loading. Target: <0.1. Common causes include images without dimensions, dynamic ads, and web fonts loading late.

INP (Interaction to Next Paint): Measures responsiveness — how quickly the page responds to user interactions. Target: <200ms. Heavy JavaScript, long main-thread tasks, and third-party scripts are the main culprits of poor INP.

1. Convert to modern formats (WebP/AVIF) — WebP images are 25-35% smaller than JPEG at equivalent quality. AVIF offers even better compression at 50% reduction. Use <picture> element with fallbacks for browser compatibility.

2. Implement responsive images — Use srcset and sizes attributes to serve appropriately sized images based on the user's viewport. A 2000px hero image on a 375px mobile screen wastes enormous bandwidth.

3. Lazy load below-the-fold images — Add loading="lazy" to images below the fold. Only load images when they are about to enter the viewport, reducing initial page weight by 40-60%.

4. Set explicit width and height — Always declare image dimensions (or CSS aspect-ratio) to prevent Cumulative Layout Shift (CLS). This is one of the easiest CLS fixes available.

5. Eliminate render-blocking resources — Defer non-critical JavaScript with defer or async attributes. Inline critical CSS and load the rest asynchronously.

6. Code-split JavaScript — Load only the code needed for the current page using dynamic imports. Frameworks like Next.js handle this automatically, but custom implementations may require manual splitting.

7. Minify and compress all assets — Remove whitespace, comments, and unused code from CSS, JS, and HTML. Enable Gzip or Brotli compression on your server for 60-80% smaller file transfers.

8. Remove unused CSS and JavaScript — Audit your code for unused styles and scripts. Tools like PurgeCSS can remove unused CSS automatically, often reducing stylesheet size by 90%+.

9. Reduce third-party script impact — Analytics, chat widgets, ad scripts, and social media embeds can add 300-500ms to your load time. Audit and limit third-party scripts to essential ones only, and load them asynchronously.

10. Use a CDN (Content Delivery Network) — Serve assets from servers geographically closest to users. CDNs can reduce latency by 50-70%. Cloudflare, AWS CloudFront, and Fastly are popular choices.

11. Enable browser caching — Set appropriate Cache-Control headers so returning visitors load cached assets locally. Static assets should have cache durations of 1 year; HTML pages should use shorter durations.

12. Implement server-side rendering (SSR) or static generation — Pre-render HTML on the server for faster initial page loads. Frameworks like Next.js offer both SSR and static site generation (SSG) for optimal performance.

13. Upgrade to HTTP/2 or HTTP/3 — HTTP/2 enables multiplexing (multiple requests over a single connection) and header compression. HTTP/3 adds QUIC transport for even faster connections, especially on mobile.

14. Optimize web font loading — Use font-display: swap to prevent invisible text. Preload critical font files with <link rel="preload">. Consider using system font stacks for maximum performance.

15. Preload critical resources — Use <link rel="preload"> for hero images, critical fonts, and above-the-fold assets. Use <link rel="preconnect"> for third-party domains to establish early connections.