Что такое критический путь рендеринга и из каких этапов он состоит?

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

Этапы

1. Парсинг HTML → строится DOM.
2. Парсинг CSS → строится CSSOM. CSS блокирует отрисовку: без стилей браузер не знает, как выглядит страница.
3. Render Tree — объединение DOM и CSSOM; в него попадают только видимые элементы (display: none исключается).
4. Layout (reflow) — расчёт размеров и позиций каждого элемента.
5. Paint — заполнение пикселей: цвета, текст, тени, изображения.
6. Compositing — слои складываются в итоговое изображение (часто на GPU).

Что блокирует путь

• CSS блокирует рендеринг, пока не загружен.
• Синхронный <script> блокирует парсинг HTML и ждёт загрузки стилей, подключённых перед ним: браузер не знает заранее, обратится ли скрипт к стилям.
• async и defer не блокируют парсинг.

Как сократить

• Убрать лишний CSS, вынести критический CSS в <head>, остальной подгрузить позже.
• Подключать скрипты с defer или async.
• Уменьшить размер ресурсов (сжатие, минификация), использовать кеш и CDN.
• Избегать цепочек зависимых запросов (@import).

Метрики

Результат измеряют через FCP и LCP (плюс TBT) в Lighthouse и DevTools → Performance; TTI из Lighthouse убрали в 10-й версии.

Коротко для собеседования

HTML → DOM, CSS → CSSOM, вместе они дают Render Tree, затем Layout, Paint и Compositing. Критический путь ускоряют за счёт малого блокирующего CSS и defer для скриптов.