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

Что проверяют

Понимаете ли вы, что именно задерживает первую отрисовку страницы, и можете ли назвать конкретные приёмы, а не общее «минифицировать всё». Следом обычно спрашивают разницу между async и defer или просят разобрать запись в панели Performance.

Как отвечать

Критический путь рендеринга это цепочка шагов от получения HTML до первых пикселей:

• DOM: браузер разбирает HTML потоково, по мере прихода байтов;
• CSSOM: строится из всех стилей. CSS блокирует рендеринг: пока не загружены стили из <head>, браузер не рисует ничего;
• JavaScript: обычный <script> без атрибутов блокирует парсер, а раз скрипт может читать стили, он ждёт ещё и CSSOM;
• render tree, layout, paint, composite: сборка видимых узлов, расчёт геометрии, отрисовка слоёв и их сведение.

Критические ресурсы это HTML, CSS из <head> и синхронные скрипты. Картинки сюда не входят, первый кадр их не ждёт, хотя на LCP они влияют напрямую.

Что с этим делают:

• defer и async: defer грузит параллельно и выполняет после разбора HTML в порядке подключения, async выполняет сразу по загрузке без порядка, это для независимых скриптов вроде аналитики. type="module" ведёт себя как defer;
• критический CSS inline: стили первого экрана прямо в <head>, остальное без блокировки. Стили с неподходящим media рендер не держат;
• короткие цепочки: без @import в CSS, с preload для шрифтов, fetchpriority="high" для LCP-картинки и font-display: swap;
• сервер: SSR или статическая генерация, чтобы контент был в первом HTML, а не появлялся после бандла.

Мерить стоит FCP и LCP; хорошим считается LCP до 2,5 секунды, и вместе с INP и CLS он входит в Core Web Vitals. Инструменты: панель Performance в Chrome DevTools, Lighthouse, WebPageTest.

Где спотыкаются

Считают, что async всегда лучше defer. Для скриптов, зависящих друг от друга или от DOM, async даёт гонку.

Переносят весь CSS в конец <body> ради скорости и получают вспышку нестилизованного контента и скачки вёрстки.

Сводят всё к размеру бандла. Лишний круг запросов из-за цепочки @import или шрифта, найденного только после CSSOM, стоит дороже пары сэкономленных килобайт.