Вопрос проверяет, понимаешь ли ты, какие шаги и ресурсы нужны браузеру до первого “полезного” отображения страницы и что именно это может блокировать.
Критический путь рендеринга — это последовательность шагов и ресурсов, которые нужны браузеру, чтобы показать страницу пользователю. Обычно он включает построение DOM, CSSOM, создание Render Tree, layout и paint. Если на пути есть блокирующие ресурсы (часто CSS и синхронный JS), браузер откладывает первую отрисовку. Оптимизация критического пути — это уменьшение объёма и количества блокирующих ресурсов и перенос некритичных загрузок.
Критический путь рендеринга (Critical Rendering Path) описывает “минимально необходимую цепочку”, без которой браузер не сможет отрисовать первый экран.
Определение: Критический путь рендеринга — набор операций и зависимостей (ресурсы + шаги), которые должны завершиться, чтобы браузер смог выполнить первую отрисовку.
Перед первой отрисовкой браузеру обычно нужно:
Построить DOM из HTML.
Загрузить и распарсить CSS → построить CSSOM.
Собрать Render Tree из DOM + CSSOM.
Выполнить layout (геометрия).
Выполнить paint (рисование), иногда composite.
CSS как render-blocking
Пока стили не готовы, браузер не хочет рисовать страницу “голой”.
Синхронный JS в неподходящем месте
<script> без defer/async может остановить парсинг HTML.
Скрипт может запросить стили/размеры (getComputedStyle, offsetHeight) и вынудить браузер синхронно “догонять” расчёты.
Уменьшают и дробят CSS:
критические стили для первого экрана — быстрее,
остальное — позже.
Скрипты делают неблокирующими:
defer для большинства скриптов,
async для независимых.
Откладывают некритичные ресурсы:
изображения ниже первого экрана (loading="lazy"),
аналитика/виджеты — после первого рендера.
defer как типичная оптимизация<script src="/app.js" defer></script>
defer позволяет браузеру продолжать строить DOM, а скрипт выполнится позже, когда HTML уже распарсен.
Вывод: критический путь рендеринга — это то, что влияет на скорость появления первого полезного контента. Его оптимизация почти всегда сводится к уменьшению блокирующих CSS/JS и переносу второстепенных вещей “после первого экрана”.