Rendering Pipeline: Layout, Paint, Composite (and How to Avoid Jank)
A practical mental model of the browser rendering pipeline and how common coding patterns cause forced reflow, jank, and slow interactions.
Practice
Search by concept, narrow to a roadmap, or pick a tag to focus on the exact topic you want to rehearse.
16 articles · page 2 of 2
A practical mental model of the browser rendering pipeline and how common coding patterns cause forced reflow, jank, and slow interactions.
A practical guide to cache-control, ETag, immutable assets, and CDN strategy to reduce TTFB and speed up repeat visits.
How JS hurts INP and load performance, how to find long tasks, and practical patterns to reduce client JS in modern apps (especially Next.js).
How fonts hurt LCP/CLS, when to preload, how font-display works, and practical strategies to avoid layout shift with good typography.
How to ship fast images: responsive sizes, AVIF/WebP, LCP hero strategy, lazy loading, and when preloading helps (or hurts).
A senior-level workflow to diagnose performance issues: find the bottleneck, verify the hypothesis, ship the fix, and prevent regressions.
A high-signal mental model for LCP, INP, and CLS: what they measure, what actually moves the needle, and how to debug them in real apps.