Skip to content

Browser internals & performance

How the browser turns code into pixels, what Core Web Vitals measure, and how to ship less JavaScript.

7 lessons

The rendering pipeline

  1. 1Critical rendering pathSeparate discovery, parsing, execution and painting before changing a resource attribute.
  2. 2Frames, layout thrashing and compositingMeasure when geometry is ready; avoid repeatedly asking the browser to rebuild it inside one operation.

Core Web Vitals

  1. 3Largest Contentful PaintIdentify the candidate and its blocked phase before choosing an optimization.
  2. 4Interaction to Next PaintFind where an interaction waits, then move or reduce the work blocking its next visual response.
  3. 5Layout stability, images and fontsA late arrival moves everything below it, unless its space was held before it came.

Shipping less JavaScript

  1. 6Bundling, tree shaking and code splittingA bundle holds everything reachable that might run on load; in esbuild only ES modules shake, and import() moves code to a later download.
  2. 7Hydration and its costVisible HTML and working client behavior are separate milestones.