Performance Engineering Knowledge Base
Frontend Performance Optimization Guide
Production playbooks spanning Core Web Vitals and field measurement, JavaScript delivery and hydration cost, caching and edge architecture, third-party containment, font loading and image optimization. Measure the metric, isolate the bottleneck in DevTools, then ship a fix you can lock in with a CI budget.
Browse by Topic
Advanced Caching Strategies & CDN Architecture
CDN edge caching, Cache-Control, stale-while-revalidate, Service Workers and 103 Early Hints.
19 guides
Core Web Vitals & Measurement
Measure and fix LCP, INP and CLS — including font loading and a RUM beacon pipeline for the p75 that actually ships.
28 guides
Image & Media Optimization
Responsive images, AVIF/WebP, fetchpriority and CLS-safe lazy loading.
11 guides
JavaScript Bundle Optimization & Code Splitting
Code-split, tree-shake and hydrate less, then contain the third-party scripts your build never sees.
23 guides
Start Here
Understanding Core Web Vitals Thresholds
What LCP < 2.5s, INP < 200ms and CLS < 0.1 actually mean at the p75 boundary.
HTTP Cache-Control Headers Explained
max-age, immutable, s-maxage and SWR composed into a fast, correct cache policy.
Serving AVIF & WebP with Fallbacks
Ship next-gen image formats safely and cut LCP image bytes without breakage.
Dynamic Imports & Route-Based Splitting
Defer non-critical JavaScript by route to shrink the initial bundle.
Hydration & Partial Rehydration Strategies
Cut the hydration long task with islands, lazy hydration and selective streaming.
RUM Beacons & Field Data Collection
Attribution-grade beacons that turn a failing p75 into a ticket with an owner.
Font Loading & Text Rendering Performance
Paint text inside the LCP budget without the swap moving the page.
Third-Party Script Performance
Price every tag in main-thread milliseconds, then contain it with facades and budgets.
Resource Hints & Early Hints
Preconnect, preload and 103 Early Hints — without starving the LCP resource.
Recently Added Guides
Using 103 Early Hints Behind a CDN
Fill origin think time with useful downloads — without hinting a previous deploy’s assets.
Attributing INP to a Component
Turn a failing p75 into a named component, an event type and a dominant phase.
Fixing CLS from Web Font Swap
Derive size-adjust and ascent overrides from measurement instead of copying them.
Fixing Long Hydration Tasks in Next.js App Router
Find the client boundary that swallowed the tree and push interactivity to the leaves.
Replacing YouTube Embeds with a Facade
Defer ~700KB of player until the reader actually presses play.
Vary Header Pitfalls That Destroy CDN Hit Rate
How one header fragments the edge cache into objects that never warm.