Critical Rendering Path

В прошлом уроке мы разобрали, как браузер строит DOM, CSSOM и Render Tree. Но скорость, с которой страница появляется на экране, зависит от порядка загрузки ресурсов. Critical Rendering Path (CRP) — это последовательность шагов между получением HTML и первой отрисовкой страницы. Понимание CRP позволяет делать сайты, которые показываются пользователю за доли секунды.

Что такое Critical Rendering Path

CRP — это минимальный набор шагов, необходимых браузеру для первой отрисовки:

HTML → DOM → CSSOM → Render Tree → Layout → Paint
                                    ↑
                              Только здесь страница
                              появляется на экране

Всё, что задерживает любой из этих шагов, откладывает первую отрисовку. Задача веб-разработчика — убрать с этого пути всё некритичное.

Ключевое понятие: критические ресурсы

Критический ресурс — это файл, без которого страница не может отрисоваться:

HTML страницы — всегда критичен. Без него нет DOM.
CSS в <head> — критичен. Блокирует рендеринг.
Синхронный <script> в <head> — критичен. Блокирует парсинг HTML.

Некритичные ресурсы можно загружать позже или асинхронно:

Изображения (не блокируют рендеринг).
Шрифты (браузер может временно показать системный шрифт).
Скрипты с defer или async.
CSS для контента вне первого экрана.

Оптимизация CRP: практические приёмы

1. Минимизировать число критических ресурсов. Чем меньше файлов в <head>, тем быстрее CSSOM будет готов. Несколько маленьких CSS-файлов хуже одного объединённого из-за накладных расходов на HTTP-запросы (хотя HTTP/2 с мультиплексированием сглаживает эту проблему).

2. Inline critical CSS. CSS, необходимый для отрисовки верхней части страницы (above the fold), встраивается прямо в HTML в теге <style>. Это убирает один сетевой round-trip:

<head>
  <style>
    /* Критические стили: шапка, заголовок, верх страницы */
    body { margin: 0; font-family: Arial; }
    header { background: #333; color: white; padding: 20px; }
  </style>
  <link rel="stylesheet" href="full-style.css" media="print" onload="this.media='all'">
</head>

3. async, defer, и положение скриптов. Разница между ними прямо влияет на CRP:

<script src="app.js"></script>           <!-- блокирует парсинг, останавливает CRP -->
<script src="app.js" async></script>     <!-- загружается параллельно, выполняет при загрузке -->
<script src="app.js" defer></script>     <!-- загружается параллельно, выполняет после DOM -->

defer — идеально для скриптов, которым нужен полный DOM. Выполняются после парсинга HTML, перед DOMContentLoaded.
async — для независимых скриптов (аналитика, реклама). Выполняются как только загрузились, могут прервать парсинг.
Перенос скриптов в конец <body> — классический приём: парсинг HTML не блокируется, DOM строится быстро.

4. Минимизировать байты. Каждый байт критического ресурса должен пройти по сети. Сжатие (gzip/brotli), минификация HTML/CSS/JS, удаление неиспользуемого кода — всё это уменьшает время загрузки.

5. Сократить длину критической цепочки. Критическая цепочка — это последовательность зависимых запросов:

HTML → style.css → шрифт.woff2
         ↑             ↑
    надо сначала     надо сначала
    скачать HTML     скачать style.css

Ресурсы в одной цепочке не могут загружаться параллельно. Решение: inline критического CSS убирает цепочку «HTML → style.css».

Как измерить CRP

Инструменты разработчика дают несколько ключевых метрик:

FP (First Paint). Момент, когда на экране появился первый пиксель (не белый экран).
FCP (First Contentful Paint). Момент, когда появился первый контент (текст, изображение).
LCP (Largest Contentful Paint). Самое большое изображение или текстовый блок стал видимым. Google считает хорошим LCP ≤ 2.5 секунд.
DCL (DOMContentLoaded). DOM полностью построен, все defer-скрипты выполнены.
Load. Все ресурсы (включая картинки) загружены.

Для диагностики CRP наиболее важны FP и FCP — они показывают, когда пользователь впервые видит страницу.

Пример анализа CRP

Возьмём типичную страницу:

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="print.css" media="print">
  <script src="app.js"></script>
</head>
<body>
  <h1>Привет</h1>
  <img src="photo.jpg" alt="Фото">
  <script src="analytics.js" async></script>
</body>
</html>

Критический путь:

Загрузить HTML (нельзя пропустить).
Загрузить и распарсить main.css (блокирует рендеринг).
print.css не блокирует (media="print" — браузер знает, что для экрана не нужно).
<script src="app.js"> блокирует парсинг DOM, но находится после CSS — ждёт загрузки main.css.
Только после всего этого — Layout → Paint.

Оптимизация:

app.js перенести в конец <body> или добавить defer.
Критический CSS из main.css вставить inline в <head>.

Результат: FCP на 300–500 мс раньше.

Проверь себя

Почему inline critical CSS ускоряет первую отрисовку?
Чем async отличается от defer с точки зрения CRP?
Что означает FCP и почему он важен?

<details> <summary>Ответы</summary>

Inline CSS не требует отдельного HTTP-запроса — он уже внутри HTML. Убирается один round-trip, CSSOM строится сразу после DOM.
defer выполняется после полного построения DOM, не задерживая CRP (кроме загрузки). async выполняется как только загрузится, что может прервать парсинг HTML и задержать DOM.
First Contentful Paint — момент, когда на экране появляется первый контент (текст или изображение). Важен, потому что пользователь видит, что сайт грузится, а не пустой экран. Хороший FCP — до 1.8 секунд.

</details>

Что унести с урока

CRP — минимальные шаги от HTML до первой отрисовки: DOM → CSSOM → Render Tree → Layout → Paint.
Критические ресурсы (HTML, CSS в <head>, синхронные скрипты) блокируют первую отрисовку.
Inline critical CSS и defer-скрипты — главные приёмы ускорения CRP.
FP, FCP и LCP — ключевые метрики скорости загрузки, измеряемые в браузере.

Модуль «Как браузер загружает страницу» завершён. Мы проследили полный путь от ввода URL до пикселей на экране. В следующем модуле разберём, как веб-приложения общаются друг с другом — Основы REST API: что такое API, принципы REST, JSON и как читать документацию API.

Critical Rendering Path