Глосарій

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"> — завантажити критичні ресурси раніше