Lesson 11 / 25

Critical rendering path

Understand how browsers download, parse, and render HTML, CSS, and JavaScript to optimize loading sequence.

Critical path sequence

  1. Fetch HTML → 2) Parse HTML & find resources → 3) Download CSS/fonts (render-blocking) → 4) Download JS (parser-blocking) → 5) Build CSSOM + DOM → 6) Calculate layout → 7) Paint. Minimize steps and optimize sequence.

Optimizing the critical path

Inline critical CSS, defer non-critical JS with <script async> or <script defer>, preload fonts with <link rel=preload>, minimize DOM size, avoid layout thrashing. Reduce bytes, eliminate dependencies.

Render-blocking resources

CSS and synchronous JavaScript block rendering. Font requests block text rendering. Split CSS per viewport/device to reduce blocking. Use <link rel=preconnect> and <link rel=prefetch> strategically.

Quick check

Quick check: What blocks rendering in the critical path?

  • CSS and synchronous JavaScript
  • Images only
  • Nothing, rendering happens independently
Answer