# Critical rendering path — Web Performance Optimization

Source: https://www.geekswithgeeks.com/en/web-performance/web-perf-11

> 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

**Quiz:** What blocks rendering in the critical path?

- [ ] CSS and synchronous JavaScript
- [ ] Images only
- [ ] Nothing, rendering happens independently