Критический путь рендеринга — это последовательность шагов, которые браузер выполняет, чтобы преобразовать HTML, CSS и JS в пиксели. Понимание этого процесса объясняет, что блокирует рендеринг и как сделать отрисовку страницы быстрее.
Этапы
text
1. Parse HTML → DOM tree (the document structure)
2. Parse CSS → CSSOM tree (the style rules)
3. DOM + CSSOM → Render tree (visible nodes + their styles)
4. Layout (reflow) → compute each node's geometry (position/size)
5. Paint → fill in pixels (colors, text, images)
6. Composite → combine layers onto the screen
Что блокирует рендеринг
Браузер не начнёт отрисовку, пока не будет готова CSSOM (чтобы избежать вспышки неоформленного контента). Поэтому большие или медленно загружаемые CSS-файлы задерживают первую отрисовку — держите критические CSS компактными и встраивайте их в документ, когда это возможно.