Почему большой CSS-файл может блокировать рендер страницы?

Браузер не может начать отрисовку страницы, пока не построит CSSOM, а для этого ему нужен весь CSS.

Определение

Render-blocking resource — это ресурс, без которого браузер не может начать рендеринг страницы.

Как CSS влияет на рендер

При загрузке страницы происходит следующее:

1. Браузер парсит HTML

2. Обнаруживает <link rel="stylesheet">

3. Останавливает рендер

4. Загружает и парсит CSS

5. Строит CSSOM

6. Объединяет DOM и CSSOM в render tree

Почему большой CSS — проблема

• Дольше загружается

• Дольше парсится

• Задерживает First Paint

• Ухудшает Core Web Vitals

Когда это особенно критично

• Медленное соединение

• Мобильные устройства

• Большие SPA

Вывод

Большой CSS-файл блокирует рендер, потому что без CSS браузер не знает, как отображать элементы. Поэтому важно оптимизировать и разбивать стили.