Web performance optimization strategies every dev needs

Performance is not a nice-to-have. A one-second delay in page load can reduce conversions by 7%. Users expect pages to load in under two seconds, and search engines penalize slow sites. Here is how to make your site fast.

Core Web Vitals

Google measures three key metrics:

LCP (Largest Contentful Paint) — how fast the main content loads. Target: under 2.5 seconds.
INP (Interaction to Next Paint) — how responsive the page is to user input. Target: under 200ms.
CLS (Cumulative Layout Shift) — how much the layout jumps around. Target: under 0.1.

These are not abstract benchmarks. They directly correlate with user satisfaction and bounce rates.

Image optimization

Images are typically the largest assets on a page. Three things you should always do:

Use modern formats. WebP and AVIF offer 25-50% smaller file sizes compared to JPEG and PNG with no visible quality loss.
Serve responsive images. Use the srcset attribute or Next.js <Image> component to serve appropriately sized images for each device.
Lazy load below-the-fold images. Add loading="lazy" to images that are not visible on initial page load.

<img
  src="hero.avif"
  srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  loading="lazy"
  alt="Hero image"
/>

Code splitting

Do not ship JavaScript your users do not need. In Next.js, this happens automatically at the route level, but you can go further:

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('./chart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false,
});

This loads the chart component only when it is needed, keeping the initial bundle small.

Caching strategies

Static assets — set Cache-Control: public, max-age=31536000, immutable for hashed assets
API responses — use stale-while-revalidate to serve cached data while fetching fresh data in the background
HTML pages — use ISR (Incremental Static Regeneration) in Next.js to cache pages at the CDN edge

Quick wins

Preconnect to external domains: <link rel="preconnect" href="https://fonts.googleapis.com">
Self-host fonts instead of loading from Google Fonts
Minimize third-party scripts — each one adds latency and blocks the main thread
Use font-display: swap to prevent invisible text during font loading

Performance optimization is iterative. Measure first, fix the biggest bottleneck, then measure again.