Critical Rendering Path: как браузер рендерит страницу

Что такое Critical Rendering Path (CRP)?

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

Проще говоря, это путь от получения HTML до отображения страницы пользователю.

Цель CRP — минимизировать время, необходимое для отображения первого полезного контента (First Contentful Paint, FCP).

Этапы CRP

1. Парсинг HTML

   • Браузер считывает HTML и создаёт DOM-дерево.

2. Загрузка и парсинг CSS

   • CSS блокирует рендеринг. Пока стили не будут загружены и обработаны, браузер не может отрисовать страницу.
   • Создаётся CSSOM (CSS Object Model).

3. Создание Render Tree

   • Объединяются DOM + CSSOM → Render Tree (только видимые элементы с нужными стилями).

4. Layout (или Reflow)

   • Браузер рассчитывает размеры и позиции всех элементов (расположение на экране).

5. Painting

   • Элементы из Render Tree превращаются в пиксели на экране.

6. Composite & Display

   • Финальная сборка слоёв, их отрисовка и отображение пользователю.

Визуализация процесса

---

Почему это важно?

CRP напрямую влияет на:

• Время загрузки и отображения страницы (первая отрисовка)
• Восприятие скорости пользователем
• SEO и Core Web Vitals

Что блокирует рендеринг?

• CSS-файлы — без них нельзя построить Render Tree.
• JavaScript, если он загружается без defer или async, может остановить парсинг HTML.
• Большие изображения и шрифты, загружаемые синхронно.

---

Как оптимизировать CRP?

Вывод

• CRP — это критически важный путь от загрузки HTML/CSS/JS до появления страницы.
• Его оптимизация = быстрая загрузка, лучшая производительность, выше оценка в Core Web Vitals.
• Минимизируйте блокирующие ресурсы, используйте async/defer, делайте lazy load.