Глоссарий

Critical Rendering Path

Critical Rendering Path (CRP) — последовательность шагов, которые браузер выполняет от получения HTML до первой отрисовки пикселей на экране. Оптимизация CRP напрямую влияет на LCP и Time to First Paint.

Шаги

Загрузка HTML → построение DOM
Загрузка CSS → построение CSSOM
DOM + CSSOM → Render Tree
Layout (reflow) — вычисление размеров и позиций
Paint — рисование пикселей

Render-blocking ресурсы

CSS и синхронный JS блокируют построение Render Tree. До завершения их загрузки браузер ничего не рисует.

Оптимизации

Critical CSS inline в <head> — стили above-the-fold загружаются без запроса
<link rel="stylesheet" media="print"> — некритичный CSS не блокирует рендер
<script defer> или async — JS не блокирует парсинг HTML
<link rel="preload"> — загрузить критичные ресурсы раньше