Web Performance Optimization: Overview and Playbook

Overview of web performance optimization covering infrastructure, JavaScript, CSS, images, and fonts. Provides quick reference tables and links to detailed articles in the series.

Abstract

Web performance optimization reduces to three user-centric questions: How fast does content appear? (Largest Contentful Paint, or LCP), How quickly does the page respond? (Interaction to Next Paint, or INP), and Does the layout stay stable? (Cumulative Layout Shift, or CLS). These Core Web Vitals (CWV) are Google’s ranking signals measured at the 75th percentile—a page passes only when 75% of real user visits meet the “good” threshold for all three metrics.

The optimization stack follows a dependency chain:

1. Infrastructure (DNS, HTTP/3, CDN, caching) determines the floor for all metrics—you cannot optimize your way out of a slow origin or missing edge cache
2. JavaScript (bundle size, long tasks, workers) directly gates INP—a 200ms task budget means breaking work into chunks and offloading computation
3. CSS & Typography (critical path, containment, font loading) affects both CLS and LCP—inlined critical CSS and font metric overrides eliminate layout shifts
4. Images (formats, responsive sizing, loading priority) dominate LCP on media-heavy pages—AVIF/WebP and fetchpriority target the largest element

Each layer has diminishing returns without the previous layer being sound. A perfectly code-split bundle won’t help if TTFB is 2 seconds. Zero-CLS font loading won’t matter if JavaScript blocks the main thread for 500ms.

Core Web Vitals Thresholds

As of March 2024, Core Web Vitals consist of three metrics that capture the user experience dimensions Google considers most critical: loading, interactivity, and visual stability.

Supporting metric (not a Core Web Vital):

TTFB is excluded from CWV because fast server response doesn’t guarantee good user experience—a page can have 100ms TTFB but 5 seconds of JavaScript blocking LCP. However, slow TTFB makes good LCP nearly impossible.

Why These Metrics?

Google’s threshold methodology targets the 75th percentile with a balance between achievability (most sites can reach “good”) and meaningfulness (users perceive the difference). The 2.5s LCP threshold corresponds to research showing users begin abandoning pages after 3 seconds; 200ms INP aligns with the 100-200ms window where interactions feel instant; 0.1 CLS represents shifts users barely notice.

INP replaced FID in March 2024: First Input Delay (FID) measured only the first interaction’s input delay. INP measures every interaction throughout the session, including input delay + processing time + presentation delay. Most sites that passed FID failed INP initially because FID ignored subsequent interactions and processing time entirely.

1. Infrastructure & Architecture

Infrastructure determines the performance floor. Network round trips, server processing, and cache misses create latency that no amount of frontend optimization can overcome. A 2-second TTFB leaves only 500ms for everything else if targeting 2.5s LCP.

Detailed coverage: Infrastructure Optimization for Web Performance

Quick Reference

Key Techniques

• DNS Protocol Discovery: HTTPS records enable HTTP/3 discovery, saving 100-300ms on connection establishment
• HTTP/3 and QUIC: Eliminates TCP head-of-line blocking; up to 55% faster page loads in high packet loss scenarios (Cloudflare HTTP/3 benchmarks)
• Edge Computing: Run logic at CDN edge for personalization, A/B testing, auth
• BFF Pattern: 30-50% payload reduction, 60-80% fewer API requests
• Multi-layer Caching: Service Worker + IndexedDB + CDN for comprehensive caching

2. JavaScript Optimization

JavaScript directly gates INP. Every millisecond of main thread blocking is a millisecond added to interaction latency. The 200ms INP budget means: receive input, run handlers, let browser paint—all within 200ms. Long tasks (>50ms) risk exceeding this budget on slower devices.

Detailed coverage: JavaScript Performance Optimization

Quick Reference

Key Techniques

• Script Loading: Use defer for app code (preserves order), async for independent scripts
• Code Splitting: Route-based with React.lazy() + Suspense, component-level for heavy widgets
• Task Scheduling: scheduler.yield() every 50 items or 5ms to maintain responsiveness
• Worker Pools: Manage multiple workers for parallel computation with task queuing
• Tree Shaking: Mark packages sideEffects: false, use ES modules for dead code elimination

3. CSS & Typography

CSS blocks rendering until parsed; fonts cause layout shifts when they swap. The critical rendering path requires CSS before first paint, but only the CSS needed for above-the-fold content. Font loading is a common CLS culprit—fallback fonts have different metrics than web fonts, causing text to reflow on swap.

Detailed coverage: CSS and Typography Optimization

Quick Reference

Key Techniques

• Critical CSS: Inline ≤14KB above-the-fold styles, defer rest with media=“print” swap
• CSS Containment: contain: layout paint style isolates reflows to subtrees
• Compositor Animations: Only animate transform and opacity for 60fps
• Font Subsetting: Remove unused glyphs with pyftsubset for 65-90% reduction
• Variable Fonts: Single file for all weights, smaller than 3+ static files combined
• Font Metric Overrides: size-adjust, ascent-override for zero-CLS fallback fonts

4. Image Optimization

Images are typically the LCP element on content-heavy pages. A hero image that’s 2MB and served in JPEG when AVIF would be 400KB directly delays LCP. Beyond format, loading strategy matters: the browser must discover, request, download, and decode the image before it can paint.

Detailed coverage: Image Optimization for Web Performance

Quick Reference

Format Selection

Key Techniques

• Picture Element: Format negotiation with AVIF → WebP → JPEG fallback chain
• Responsive Images: srcset with width descriptors, sizes for layout hints
• LCP Images: loading="eager" + fetchpriority="high" + decoding="async"
• Below-fold Images: loading="lazy" with 200px rootMargin for prefetching
• Network-aware Loading: Adjust quality based on navigator.connection.effectiveType

5. Performance Monitoring

Continuous monitoring ensures optimizations remain effective and regressions are caught early.

Key Metrics to Track

• Core Web Vitals: LCP, INP, CLS via PerformanceObserver
• TTFB and Server Response: Backend and infrastructure health
• Bundle Sizes: Track with size-limit, fail builds on regression
• Cache Hit Rates: CDN and service worker effectiveness

Monitoring Tools

Implementation Checklist

Infrastructure

• Enable HTTP/3 with HTTPS DNS records
• Configure TLS 1.3 with 0-RTT resumption
• Set up CDN with edge computing capabilities
• Implement multi-layer caching (CDN + Service Worker + Redis)
• Configure Brotli compression (level 11 static, level 4-5 dynamic)

JavaScript

• Implement route-based code splitting
• Use scheduler.yield() for tasks >50ms
• Offload heavy computation to Web Workers
• Configure tree shaking with ES modules
• Set up bundle size budgets in CI

CSS & Typography

• Extract and inline critical CSS (≤14KB)
• Apply CSS containment to independent sections
• Use WOFF2 format with subsetting
• Implement font metric overrides for zero-CLS
• Preload critical fonts with crossorigin attribute

Images

• Serve AVIF/WebP with JPEG fallback via <picture>
• Implement responsive images with srcset and sizes
• Use fetchpriority="high" for LCP images
• Apply loading="lazy" to below-fold images
• Set explicit width/height to prevent CLS

Monitoring

• Set up Lighthouse CI in GitHub Actions
• Configure bundle size budgets with size-limit
• Implement RUM with PerformanceObserver
• Create performance dashboards and alerts

Performance Budget Reference

1
{
2
  "resourceSizes": {
3
    "total": "500KB",
4
    "javascript": "150KB",
5
    "css": "50KB",
6
    "images": "200KB",
7
    "fonts": "75KB"
8
  },
9
  "metrics": {
10
    "lcp": "2.5s",
11
    "fcp": "1.8s",
12
    "ttfb": "200ms",
13
    "inp": "200ms",
14
    "cls": "0.1"
15
  }
16
}

Series Articles

Conclusion

Web performance optimization follows a layered dependency model where each layer sets constraints for the next. Infrastructure determines the floor (TTFB), JavaScript controls interactivity (INP), CSS/fonts affect stability and render timing (CLS, LCP), and images often dominate the critical path for LCP.

The Core Web Vitals framework—LCP, INP, CLS measured at the 75th percentile—provides a user-centric success criterion. Optimization work should be prioritized by which metric is failing and which layer is the bottleneck. A site with good infrastructure but poor INP needs JavaScript work, not more CDN tuning.

Start with measurement (RUM and synthetic), identify the weakest metric, trace it to the responsible layer, and apply targeted fixes. The detailed articles in this series cover each layer’s implementation specifics.

Appendix

Prerequisites

• Understanding of browser rendering pipeline (parsing, layout, paint, composite)
• Familiarity with HTTP protocol basics
• Basic knowledge of JavaScript execution model and event loop

Summary

• Core Web Vitals (as of March 2024): LCP ≤2.5s, INP ≤200ms, CLS ≤0.1—measured at the 75th percentile
• Optimization layers: Infrastructure → JavaScript → CSS/Typography → Images, each constraining the next
• Infrastructure: HTTP/3, CDN edge computing, multi-layer caching target TTFB <200ms
• JavaScript: Code splitting, task scheduling with scheduler.yield(), Web Workers maintain INP <200ms
• CSS & Fonts: Critical CSS inlining, font metric overrides eliminate CLS from font loading
• Images: AVIF/WebP formats, responsive delivery, fetchpriority for LCP images

References

Specifications and Standards

• Web Vitals - Google’s Core Web Vitals specification and thresholds
• Interaction to Next Paint (INP) - INP metric definition and measurement
• Largest Contentful Paint (LCP) - LCP specification
• Cumulative Layout Shift (CLS) - CLS calculation methodology
• Defining Core Web Vitals Thresholds - Rationale behind threshold values

Official Documentation

• INP Becomes a Core Web Vital (March 2024) - INP replacing FID announcement
• HTTP/3 Explained - QUIC and HTTP/3 protocol guide
• Time to First Byte (TTFB) - Why TTFB is not a Core Web Vital
• Lighthouse CI - Synthetic performance testing

Implementation References

• Web Workers API - MDN - Background thread processing
• CSS Containment - MDN - Layout isolation
• Responsive Images - MDN - srcset and sizes
• Variable Fonts - MDN - Font optimization