Швидкість Високий вплив Складне 1–3 год

Обмеження блокуючого CSS

Великий CSS у заголовку затримує рендеринг.

Що це

CSS за замовчуванням блокуючий, браузер нічого не відобразить, доки не завантажить та не обробить стилі. Великі чи численні файли CSS таким чином відкладають перше зображення сторінки.

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

Завантаження одного великого CSS для всього сайту затримує навіть просту сторінку. Оптимізація напряму покращує LCP та сприйману швидкість.

Як це зробити

1Виокремте «critical CSS» для видимої частини та вставте його inline у <head>.
2Решту CSS завантажуйте асинхронно (трюк із media="print" або rel="preload" + onload).
3Видаліть невикористовувані стилі (PurgeCSS / інструмент Coverage у devtools).
4Розбийте CSS за сторінками/компонентами замість одного моноліту.

Асинхронне завантаження некритичного CSS

Правильно

<link rel="preload" href="/css/styly.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styly.css"></noscript>

Висновок

Critical CSS inline + решта асинхронно, найдієвіший шаблон проти блокуючого CSS. Це складніша правка, але на повільних сайтах вона приносить помітне прискорення першого рендерингу. Полегшать її вам сучасні build-інструменти та фреймворки.

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