Skip to content

Performance Engineering

Where senior engineers separate from the rest. Core Web Vitals, the RAIL model, JavaScript parse cost, network optimization, bundle analysis, and scientific performance methodology.

1
Performance Mental Models and RAIL
advanced

Think about performance the way Google engineers do. Master the RAIL model, understand the true cost of JavaScript, build performance budgets, and learn why perceived performance matters more than raw numbers.

18 min read
2
Core Web Vitals: LCP, CLS, INP
advanced

The three metrics Google uses to rank your site. Master Largest Contentful Paint, Cumulative Layout Shift, and Interaction to Next Paint — what triggers them, how to measure them, and how to fix them in production.

18 min read
3
The 16ms Frame Budget
advanced

Why smooth animation demands fitting all work into 16.67ms, how the rendering pipeline consumes that budget, and the techniques that let you hit 60fps consistently — compositor-only animations, layout isolation, and scientific measurement.

14 min read
4
Lab Data vs Field Data
advanced

Why your Lighthouse score lies to you. Understand the fundamental difference between synthetic lab measurements and real-user field data, when to use each, and how to implement RUM with the web-vitals library.

18 min read
5
JavaScript Parse and Execution Cost
advanced

Why JavaScript is the most expensive asset on your page. The full cost breakdown from download to parse to compile to execute — and how to measure, reduce, and eliminate unnecessary main thread work.

14 min read
6
Web Workers for Parallel Computation
advanced

JavaScript is single-threaded, but your CPU isn't. Web Workers let you offload heavy computation to background threads — image processing, search indexing, WASM, JSON parsing — without blocking the main thread. Master dedicated Workers, SharedArrayBuffer, Atomics, Transferable objects, Comlink, and when the overhead isn't worth it.

22 min read
7
Network Performance and the Critical Chain
advanced

Every millisecond between click and pixels comes from somewhere. Master the critical rendering path, resource hints, HTTP/2 multiplexing, compression algorithms, font strategies, and modern image optimization — the full network performance toolkit that separates senior engineers from everyone else.

18 min read
8
Caching Strategies in Depth
advanced

From browser memory cache to CDN edge nodes, understand every caching layer that stands between your user and your server. Master Cache-Control, ETags, Service Worker strategies, the Cache API, and Next.js caching — then know exactly when to bust the cache.

18 min read
9
Bundle Splitting and Tree Shaking
advanced

Your users download, parse, and execute every byte of JavaScript you ship. Bundle splitting breaks monoliths into parallel-loaded chunks. Tree shaking eliminates dead code at build time. Together they're the difference between a 2s load and a 12s load.

18 min read
10
Core Web Vitals Optimization Playbook
advanced

A step-by-step field guide to diagnosing and fixing LCP, CLS, and INP in production. No theory fluff — just the debugging workflows and code fixes that actually move the numbers.

22 min read
11
Quiz: Core Web Vitals Diagnosis
advanced

12 scenario-based performance diagnosis questions. Real-world LCP, CLS, and INP problems pulled from production sites. If you can diagnose all 12, you think like a performance engineer.

15 min read