Швидкість Високий вплив Середнє 30–60 хв

Блокуючі ресурси (render-blocking)

CSS та JS у заголовку, що гальмують перший рендеринг.

Що це

Render-blocking ресурси, це файли (зазвичай CSS та синхронний JS у <head>), які браузер повинен завантажити й обробити раніше, ніж відобразить контент. До того часу користувач бачить порожнечу.

Чому це важливо

Вони, найчастіша причина повільного першого рендерингу та поганого LCP. Чим їх більше й чим вони більші, тим довше триває, поки з'явиться контент.

Як це зробити

1Скрипти відкладіть через defer/async.
2Визначте «critical CSS» (стилі для видимої частини) та вставте їх inline, решту завантажуйте асинхронно.
3Об'єднайте та мініфікуйте файли CSS/JS, видаліть невикористовувані стилі.
4Зовнішні шрифти завантажуйте з font-display: swap і попередньо завантажуйте їх.

Висновок

Мета, доставити видимий контент якомога раніше, а все інше відкласти. Почніть із відкладання скриптів (швидка перемога) та оптимізації CSS (critical CSS). Ця сфера має прямий вплив на LCP, метрику, яку Google відстежує.

Повʼязані теми