Web Performance Optimization

Web Performance Optimization is the systematic practice of reducing the time from when a user requests a web page to when they can interact with it. It matters when users expect instant responses, when content must render before a user scrolls, and when network conditions vary widely—especially on mobile. This page details the actions, tools, and patterns engineers use to make web experiences fast, predictable, and responsive.

Reducing Time to First Paint

The first visible content on a page is critical. To reduce the time to first paint (TTFP), engineers focus on the critical rendering path: the sequence of steps from receiving the first byte of HTML to rendering the first pixels.

Start with a minimal, inlineable HTML shell. The <head> must include a preload for the first render-blocking CSS and JavaScript, and dns-prefetch for common origins.

<head>
  <link rel="preload" as="style" href="/styles.css" />
  <link rel="preload" as="script" href="/main.js" />
  <link rel="dns-prefetch" href="//cdn.example.com" />
  <link rel="dns-prefetch" href="//fonts.example.com" />
  <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'" />
  <noscript><link rel="stylesheet" href="/styles.css" /></noscript>
</head>

The onload="this.media='all' " pattern ensures the CSS is available immediately but allows the browser to load it without blocking rendering. Use media="print" to avoid blocking the initial render while the CSS loads.

Serve the initial HTML as early as possible. Use server-side rendering (SSR) with renderToStaticMarkup or renderToStream and send the response with Content-Type: text/html; charset=utf-8, Cache-Control: public, max-age=3600, and Vary: Accept-Encoding.

For dynamically generated content, use incremental hydration: load the HTML shell, then gradually hydrate components in the background.

// In the browser, after DOM is ready
import { hydrate } from 'react-dom/client';

const root = document.getElementById('root');
const hydrateNow = () => {
  hydrate(<App />, root);
};

// Start hydration early, even before full load
document.addEventListener('DOMContentLoaded', hydrateNow);
window.addEventListener('load', hydrateNow);

Hydration is expensive. To avoid it blocking the main thread, schedule it with requestIdleCallback and prioritize critical components:

const idleCallback = (deadline) => {
  while (deadline.timeRemaining() > 1 && componentsToHydrate.length > 0) {
    const component = componentsToHydrate.shift();
    hydrate(component, root);
  }
};

if (window.requestIdleCallback) {
  requestIdleCallback(idleCallback);
}

Optimizing Asset Delivery

Assets—images, fonts, scripts, styles—must be delivered efficiently. Start by setting the correct Content-Type, Cache-Control, and ETag headers on all assets.

For images, use WebP or AVIF with decoding="async" to allow early rendering without waiting for decode.

<img src="/hero.webp" alt="Hero" width="1200" height="600" decoding="async" loading="lazy" />

Serve multiple image formats using picture with srcset and sizes:

<picture>
  <source srcset="/hero-480w.webp 480w, /hero-800w.webp 800w" type="image/webp" sizes="(max-width: 600px) 100vw, 50vw" />
  <source srcset="/hero-480w.jpg 480w, /hero-800w.jpg 800w" type="image/jpeg" sizes="(max-width: 600px) 100vw, 50vw" />
  <img src="/hero.jpg" alt="Hero" width="800" height="400" loading="lazy" decoding="async" />
</picture>

Use fetch() with cache: 'force-cache' and integrity for script and style assets:

const loadScript = async (url, integrity) => {
  const response = await fetch(url, {
    cache: 'force-cache',
    integrity,
    headers: {
      'Accept': 'application/javascript'
    }
  });

  const script = document.createElement('script');
  script.src = url;
  script.integrity = integrity;
  script.crossOrigin = 'anonymous';
  document.head.appendChild(script);
};

For fonts, use font-display: swap and preload the font files:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* In HTML */
<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/fonts/inter.woff2" />

Minimizing JavaScript Payload

Large JavaScript bundles delay time to first interactive (TTI). Use code splitting via import() to load only the code needed for a route or component.

// Lazy load a complex component
const loadDashboard = async () => {
  const { Dashboard } = await import('./dashboard.js');
  const root = document.getElementById('dashboard-root');
  root.replaceChildren(new Dashboard());
};

// Trigger on scroll or navigation
document.addEventListener('scroll', () => {
  if (window.scrollY > 1000) {
    loadDashboard();
  }
});

Bundle with Vite, Webpack, or Rollup. Use splitChunks to extract common code across chunks:

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/
        },
        ui: {
          test: /[\\/]src[\\/]components[\\/]/,
          name: 'ui',
          chunks: 'all'
        }
      }
    }
  }
};

Enable module preloading for critical paths:

// In the main bundle, add:
import('/path/to/critical.js').then(() => {
  // Execute critical logic after the module loads
});

Reducing Layout Shifts

Layout shifts degrade perceived performance. Minimize them by reserving space for content that arrives late.

Use aspect-ratio and height in CSS to prevent reflow:

.image-container {
  aspect-ratio: 16 / 9;
  height: 0;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

For images, set width and height on the <img> element and use loading="lazy" to defer offscreen images:

<img src="/card-1.webp" width="400" height="300" loading="lazy" alt="Card 1" />

Preload critical images with rel="preload" and as="image":

<link rel="preload" as="image" href="/hero.webp" />

Avoid dynamic content insertion that shifts layout. If adding content to the DOM, ensure it has the same dimensions as the placeholder.

Managing Network and Resource Priorities

The browser’s resource prioritization system is powerful but often underused. Use fetch() with priority hints and preload with as and media to guide the browser.

// Prioritize critical API calls
fetch('/api/user', {
  priority: 'high'
});

// Preload a script that will be used later
fetch('/api/data.js', {
  priority: 'low'
});

// Use <link rel="preload"> for resources
<link rel="preload" as="script" href="/analytics.js" />
<link rel="preload" as="font" href="/fonts/inter.woff2" />

Set priority on <link> and <script> elements via fetch() or import():

import('/critical.js').then(() => {
  // This script is high priority
}).catch(err => console.error('Critical script failed:', err));

Use IntersectionObserver to trigger resource loading when elements enter the viewport:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const src = entry.target.dataset.src;
      const img = entry.target;
      img.src = src;
      observer.unobserve(img);
    }
  });
}, { threshold: 0.1 });

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

Monitoring and Diagnosing Performance

Performance is only effective when measurable. Use the PerformanceObserver API to track real-world metrics.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.name === 'first-paint') {
      console.log('First Paint:', entry.startTime);
    }
    if (entry.name === 'first-contentful-paint') {
      console.log('First Contentful Paint:', entry.startTime);
    }
    if (entry.name === 'largest-contentful-paint') {
      console.log('Largest Contentful Paint:', entry.startTime);
    }
    if (entry.name === 'first-input-delay') {
      console.log('First Input Delay:', entry.startTime);
    }
    if (entry.name === 'total-blocking-time') {
      console.log('Total Blocking Time:', entry.startTime);
    }
  });
});

observer.observe({ entryTypes: ['paint', 'first-input', 'largest-contentful-paint', 'layout-shift'] });

Use PerformanceTiming to gather low-level timing data:

const timing = performance.timing;
const dns = timing.domainLookupEnd - timing.domainLookupStart;
const tcp = timing.connectEnd - timing.connectStart;
const ttfb = timing.responseStart - timing.navigationStart;
const dom = timing.domComplete - timing.domInteractive;
const load = timing.loadEventEnd - timing.loadEventStart;

Log performance metrics to a backend service:

const sendPerformanceMetrics = async () => {
  const metrics = performance.getEntriesByType('paint');
  const firstPaint = metrics.find(m => m.name === 'first-paint');
  const firstContentfulPaint = metrics.find(m => m.name === 'first-contentful-paint');
  const lcp = performance.getEntriesByName('largest-contentful-paint')[0];

  const payload = {
    firstPaint: firstPaint?.startTime,
    firstContentfulPaint: firstContentfulPaint?.startTime,
    largestContentfulPaint: lcp?.startTime,
    firstInputDelay: performance.getEntriesByName('first-input')[0]?.startTime,
    totalBlockingTime: performance.getEntriesByName('total-blocking-time')[0]?.duration,
    loadEvent: performance.timing.loadEventEnd - performance.timing.loadEventStart
  };

  await fetch('/api/performance', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
  });
};

window.addEventListener('load', sendPerformanceMetrics);

Handling Failures and Edge Cases

Critical CSS not inlined: The page renders with unstyled content. Use media="print" and onload to fall back to all after load.
Script loading fails silently: Use onerror on <script> elements and fetch() with integrity and crossorigin.
Image srcset not respected: Ensure sizes is provided and width/height on <img> is accurate.
Hydration not triggered: Check for DOMContentLoaded and load events; verify hydrate() is called and react-dom/client is available.
Font loading delays render: Set font-display: swap and preload the font file.
Layout shift from late content: Use aspect-ratio and reserve space in CSS; avoid margin or padding changes after render.
Network requests blocked by queue: Use priority hints and fetch() with high priority on critical calls.

Performance optimization is not a one-time task. It is continuous: measure, iterate, and refine. The goal is not just faster pages, but more responsive, more engaging user experiences.

This page was rewritten on 18 October 2026. It replaced a templated version that was not specific to its own title. How these pages are written and checked. If anything here is wrong, tell us at [email protected] and we will correct it.