Блокируют ли подключённые через link стили рендеринг страницы?

Почему CSS блокирует рендеринг

Когда браузер обрабатывает HTML и встречает тег <link rel="stylesheet">, он приостанавливает построение DOM и отрисовку страницы до полной загрузки и парсинга этого CSS. Это называется блокировкой рендеринга. Причина в том, что CSS определяет внешний вид элементов, и если бы браузер показал контент до загрузки стилей, пользователь увидел бы «голую» страницу, а затем резкое изменение — так называемый FOUC (Flash of Unstyled Content). Чтобы этого избежать, браузер ждёт готовности CSS перед первой отрисовкой.

Как это влияет на производительность

Каждый внешний CSS-файл добавляет задержку перед первым отображением страницы. Чем больше файлов и чем они тяжелее, тем дольше пользователь видит пустой экран. Поэтому важно минимизировать количество CSS-запросов, объединять файлы и использовать сжатие. Также можно выделить критический CSS (стили для первого экрана) и встроить его прямо в HTML, а остальные стили загружать асинхронно.

Способы обойти блокировку

• Использовать media атрибут: например, <link rel="stylesheet" href="print.css" media="print"> не блокирует рендеринг на экране, так как стили применяются только для печати.
• Загружать CSS через JavaScript после загрузки страницы, например, динамически создавая link элемент.
• Использовать атрибут rel="preload" с последующей заменой на rel="stylesheet" — это позволяет начать загрузку раньше, но не блокирует рендеринг.

Пример неблокирующей загрузки

<!-- Критические стили инлайн -->
<style>
  body { font-family: sans-serif; }
  .header { background: #333; }
</style>

<!-- Неблокирующая загрузка остальных стилей -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

В этом примере браузер сначала отрисует страницу с инлайн-стилями, а затем подгрузит остальные стили, не задерживая первый рендер.

Вывод

Понимание блокировки рендеринга критично для оптимизации скорости загрузки. Используйте инлайн для критических стилей, а внешние файлы подключайте с умом — через media-атрибуты или асинхронные техники, чтобы улучшить пользовательский опыт и показатели Core Web Vitals.