Что такое критический путь рендера

Критический путь рендера (Critical Rendering Path) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация CRP ускоряет время первого рендера.

Основные этапы:

1. DOM — парсинг HTML и построение дерева DOM
2. CSSOM — парсинг CSS и построение дерева CSSOM
3. Render Tree — комбинация DOM и CSSOM
4. Layout — вычисление позиций и размеров элементов
5. Paint — отрисовка пикселей

Пример оптимизации:

<!-- Подключаем критический CSS в head -->
<style>
  .header { color: red; }
</style>
<!-- Остальной CSS асинхронно -->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

Оптимизируя CRP, мы минимизируем количество блокирующих ресурсов и сокращаем время до первого значимого рендера.