Атрибут blocking тега <style>
Описание
Атрибут blocking для тега <style> указывает браузеру, что обработка страницы должна быть заблокирована до полной загрузки и применения указанных стилей. Это экспериментальный атрибут, предназначенный для оптимизации рендеринга.
Важно: Это экспериментальная технология, поддержка которой варьируется в разных браузерах.
Пример использования:
<style blocking="render">
/* Критические стили, необходимые для первого рендера */
body { font-family: Arial; }
</style>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
render |
Блокирует рендеринг до загрузки стилей | Для критически важных стилей |
Особенности работы:
- Предотвращает мерцание нестилизованного контента (FOUC)
- Улучшает метрики отображения контента (LCP)
- Должен использоваться только для минимально необходимых стилей
- Не заменяет обычные методы оптимизации загрузки CSS
Рекомендации по использованию:
<!-- Критические стили выше fold -->
<style blocking="render">
header, .hero {
opacity: 1;
transition: opacity 0.3s;
}
</style>
<!-- Остальные стили -->
<link rel="stylesheet" href="styles.css">
Рекомендации:
- Используйте только для критически важных стилей
- Держите объем blocking-стилей минимальным (<2KB)
- Сочетайте с preload для внешних CSS-файлов
- Тестируйте влияние на производительность
Ограничения:
- Экспериментальная технология (проверяйте поддержку)
- Может увеличить время до первого рендера (FCP)
- Не подходит для больших CSS-блоков
Альтернативный подход (Preload):
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="critical.css"></noscript>
Примечание: Для большинства случаев предпочтительнее использовать технику критического CSS с inline-вставкой и асинхронной загрузкой остальных стилей.