ðŸĶ–FrontendDinosaur
Fossils🧠 ConceptualExplain the Critical Rendering Path
ðŸĶ–DinosaurBrowserPerformanceRendering

Explain the Critical Rendering Path

This question tests whether you understand how browsers actually render pages — or if you just know that 'HTML becomes a page somehow.'

Explain the Critical Rendering Path

Interview Question: "Walk me through what happens from when the browser receives an HTML response to when the user sees pixels on screen."

The Senior Answer

Don't just list steps. Show you understand why each step exists and what blocks what.

"The Critical Rendering Path is a six-stage pipeline: HTML parsing builds the DOM tree, CSS parsing builds the CSSOM tree, these merge into the Render Tree (only visible elements), Layout computes geometry, Paint converts to pixels, and Compositing sends layers to the GPU. What makes this interesting architecturally isn't the steps — it's the blocking relationships between them."

The Pipeline in 30 Seconds

HTML → DOM
CSS → CSSOM         → Render Tree → Layout → Paint → Composite
JS (can modify DOM & CSSOM)

Key blocking points:

  1. CSS is render-blocking — Browser won't paint until all CSS is parsed (because later rules can override earlier ones)
  2. Synchronous JS is parser-blocking — The HTML parser stops completely until the script downloads and executes
  3. JS can be CSSOM-blocking — If CSS is still loading and a script might read styles, the script waits for CSS

"This means a single <script> tag in <head> without defer or async creates a triple dependency: HTML parsing waits for the script, the script might wait for CSS, and rendering waits for both. That's why we inline critical CSS and defer scripts."

The Follow-Up Questions

"How do async and defer affect this?"

"defer downloads the script in parallel but delays execution until after HTML parsing completes. Scripts execute in document order. async also downloads in parallel but executes immediately when ready — pausing the parser briefly. Use defer for app scripts that depend on DOM or each other. Use async for independent scripts like analytics."

"What's the difference between Layout, Paint, and Composite?"

"Layout computes where things go — positions, sizes, resolving percentages and flexbox. Paint determines what they look like — colors, text, shadows, borders. Compositing merges painted layers on the GPU.

The cost hierarchy matters: changing width triggers all three. Changing color skips layout. Changing transform or opacity only triggers compositing — which is why CSS animations using transform are dramatically cheaper than those using top/left."

"How would you optimize the CRP for a slow-loading page?"

"I'd work through three strategies:

  1. Reduce critical resources — Inline critical CSS in <head>, defer all JavaScript, eliminate render-blocking resources
  2. Minimize critical bytes — Preload key resources like fonts and hero images, use compression (Brotli)
  3. Shorten the critical path — Reduce the chain of serial requests. If HTML loads CSS which loads a font, that's 3 round trips before first paint. Preload the font directly from HTML to flatten it to 1 round trip."

"What are reflows and repaints?"

"A reflow (layout recalculation) happens when geometry changes — width, height, margin, font-size. It's the most expensive because it can cascade through the tree. A repaint happens when visual properties change without affecting geometry — color, background, box-shadow. The worst case is forced synchronous layout — reading a layout property like offsetHeight while layout is dirty forces the browser to recalculate immediately, and doing this in a loop is called layout thrashing."

"How does this relate to Core Web Vitals?"

"FCP (First Contentful Paint) measures when the first content appears — directly gated by CRP. LCP (Largest Contentful Paint) measures when the main content is visible — often delayed by slow images, fonts, or render-blocking resources. CLS (Cumulative Layout Shift) happens when layout changes after initial paint — caused by images without dimensions, injected content, or late-loading fonts. INP (Interaction to Next Paint) measures how fast the browser responds to input — blocked by long tasks on the main thread."

The Answer That Wins

Structure it as: Pipeline → Blocking relationships → Optimization strategy → Measurement.

Don't just describe what happens — explain the performance implications of each step and what you'd do about them.

Red Flags in Your Answer

  • Skipping CSSOM (many candidates only mention DOM)
  • Not knowing that CSS is render-blocking
  • Saying "the page loads" without explaining the stages
  • Not connecting CRP to Core Web Vitals
  • Missing the Layout → Paint → Composite cost hierarchy
  • Not mentioning defer/async as optimization strategies