Performance Engineering Knowledge Base
Frontend Performance Optimization Guide
Production playbooks spanning Core Web Vitals and field measurement, rendering and CSS, server response time and protocols, JavaScript delivery and hydration cost, caching and edge architecture, framework-specific tuning, 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.
53 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.
71 guides
Framework Performance
React, Next.js, Vue and Nuxt, Angular, Astro and SvelteKit: rendering, hydration and bundles.
25 guides
Image & Media Optimization
Responsive images, AVIF/WebP, image CDNs, fetchpriority and CLS-safe lazy loading.
38 guides
JavaScript Bundle Optimization & Code Splitting
Code-split, tree-shake and hydrate less, then contain the third-party scripts your build never sees.
60 guides
Network & Server Response Optimization
TTFB, Brotli and Zstandard, HTTP/2 and HTTP/3, streaming HTML and speculative loading.
23 guides
Rendering & CSS Performance
Critical CSS, containment, layout thrashing, compositor-only animation and DOM size.
22 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.
Time to First Byte (TTFB) Optimization
Break TTFB into redirects, connection and server time, then fix the part that dominates.
Layout Thrashing & Forced Reflow
Find the reads that force synchronous layout and batch them out of your handlers.
React Rendering Performance
Wasted renders, the React Compiler and transitions that keep typing responsive.
Recently Added Guides
Speculation Rules for Instant Navigations
Prerender likely next pages on hover so they open in milliseconds.
Using content-visibility: auto on Long Pages
Skip rendering for offscreen sections and cut initial layout time on long pages.
Adopting the React Compiler
Automatic memoization, rolled out safely and measured with the Profiler and INP.
Compression Dictionary Transport
Ship only the bytes that changed in an updated bundle.
Reducing Nuxt Payload Size
Serialise only the data the page renders, for lighter HTML and faster hydration.
Back/Forward Cache (bfcache)
Make back and forward navigations instant by removing what blocks the cache.