Web Performance Optimization: A Practical Developer's Guide

Table of Contents

• Core Web Vitals: What Google Measures
• Reduce JavaScript Bundle Size
• Image Optimization
• Lazy Loading
• Caching Strategies
• Rendering Patterns

Core Web Vitals: What Google Measures

Google uses Core Web Vitals as ranking signals. The three key metrics:

Measure with web-vitals library:

import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);

Reduce JavaScript Bundle Size

# Analyze your bundle
npx vite-bundle-visualizer   # Vite
npx next/bundle-analyzer     # Next.js

Tree-shaking: Only import what you use:

// Bad — imports entire library
import _ from 'lodash';
const result = _.groupBy(data, 'category');

// Good — only the function you need
import groupBy from 'lodash/groupBy';
const result = groupBy(data, 'category');

Code splitting: Load code only when needed:

// React lazy loading
const HeavyChart = lazy(() => import('./HeavyChart'));

<Suspense fallback={<Spinner />}>
  <HeavyChart />
</Suspense>

Image Optimization

Images are often 60–80% of a page's weight.

<!-- Use modern formats -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero" width="1200" height="600" />
</picture>

<!-- Always specify width and height to prevent CLS -->
<!-- Use loading=lazy for below-the-fold images -->
<img src="photo.webp" loading="lazy" width="800" height="600" alt="..." />

Lazy Loading

// Intersection Observer for deferred loading
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Caching Strategies

# Cache-Control headers

# Static assets (hashed filenames) — cache forever
Cache-Control: public, max-age=31536000, immutable

# HTML pages — revalidate on every request
Cache-Control: no-cache

# API responses — short cache
Cache-Control: public, max-age=60, stale-while-revalidate=300

Rendering Patterns

The fastest code is code that never runs — aggressive caching, precomputed HTML, and minimal client-side JS remain the most impactful optimizations.