Web Performance & Vitals

LCP, INP, CLS, and the budget mindset behind them — diagnosing why a page feels slow, not just measuring that it is.

0 of 30 lessons complete~358 min total

Start track

Sort

Diagnosing LCP: The Four Sub-PartsIntermediateKnowing LCP is slow tells you nothing about what to fix. Breaking it into its four sub-parts tells you exactly which category of problem you're looking at.13 min · 0/3 questions correct
Diagnosing INP: Input Delay, Processing Time, Presentation DelayIntermediateA slow interaction and a slow event handler aren't always the same bug. Splitting INP into its three parts tells you whether the handler is guilty, or just an innocent bystander on a busy main thread.13 min · 0/3 questions correct
Diagnosing CLS Beyond ImagesIntermediateReserving space for images fixes the CLS bug everyone already knows about. The shifts that actually surprise teams in production come from fonts, injected content, and animations.11 min · 0/3 questions correct
Lab Data vs. Field DataBeginnerA page that lab-tests fast can still be genuinely slow for real users. Knowing which kind of data you're looking at, and what each one is actually for, is what keeps you from chasing the wrong number.12 min · 0/3 questions correct
Setting Performance BudgetsBeginnerA performance budget is only real if it's tied to a specific consequence someone cares about. An arbitrary round number is advice; a budget backed by a reason is a constraint the team will actually defend under deadline pressure.11 min · 0/3 questions correct
Resource Hints: preload, prefetch, preconnectIntermediateFour `<link rel="...">` hints let you tell the browser things it can't figure out on its own — which connections to warm up early and which resources to fetch before its normal parser would ever discover them.12 min · 0/3 questions correct
Image Optimization StrategyIntermediateImages are almost always the biggest bytes on a page, and "optimize the images" is really three separate decisions layered together: which format, what size for which device, and when to actually load it.13 min · 0/3 questions correct
Web Font Loading StrategiesIntermediatefont-display isn't a single best setting — it's a genuine three-way tradeoff between showing text fast, avoiding a visual swap, and avoiding a layout shift, and picking the right one depends on what the page actually needs.12 min · 0/3 questions correct
Code Splitting & Route-Based Lazy LoadingIntermediateWithout code splitting, every visitor downloads 100% of your app's JavaScript on the very first visit, including code for pages and features they may never touch.12 min · 0/3 questions correct
HTTP/2, HTTP/3, and Connection OverheadIntermediateA lot of performance folklore — concatenate everything, shard assets across domains — was a real, necessary workaround for a protocol limitation that mostly stopped existing years ago. Knowing the history is what stops you reaching for a fix your CDN already made unnecessary.11 min · 0/3 questions correct
The Render Pipeline in Practice: Style, Layout, Paint, CompositeIntermediateThe same render pipeline that runs once at page load re-runs every time JS changes a style after the page is interactive — and which stages it re-runs depends entirely on which CSS property changed.13 min · 0/3 questions correct
Layout Thrashing and Forced Synchronous LayoutIntermediateThe browser wants to batch layout work into once per frame. Alternating reads and writes to the DOM defeats that batching entirely, and can turn a cheap loop into a dropped frame.12 min · 0/3 questions correct