Как CSS может блокировать рендер страницы?

CSS блокирует отрисовку: браузер не показывает страницу, пока не загрузит и не разберёт стили, подключённые в <head>.

Почему так

Без стилей пользователь увидел бы «голый» HTML, а потом страница резко поменялась бы (FOUC). Поэтому браузеру нужен CSSOM, чтобы построить render tree.

Что ещё задерживает рендер

• Цепочки `@import` — следующий файл загружается только после предыдущего.
• Медленный сервер или CDN для стилей.
• Большие файлы со стилями всех страниц сразу.
• Синхронные скрипты после CSS ждут его загрузки, потому что могут читать стили.

Как уменьшить блокировку

• критический CSS прямо в <style>, остальное — асинхронно;
• атрибут media, чтобы не блокировали стили другой среды:

<link rel="stylesheet" href="print.css" media="print" />

• разбиение и сжатие CSS, preload для важных файлов;
• без @import в продакшене.

Коротко для собеседования

CSS в <head> — render-blocking: пока он не загружен, страница не рисуется; ускоряют критическим CSS, media и разбиением.

Подробнее: web.dev — Render-blocking CSS