CSS является блокирующим ресурсом. Это означает, что браузер должен скачать и распарсить CSS прежде чем показать страницу. Если размер CSS большой, то он может очень сильно влиять на воспринимаемую скорость загрузки сайта. В блоге webdev есть статья с объяснением того, как решить эту проблему — "Extract critical CSS".

Критический CSS — это тот CSS, который необходим для отображения части страницы, которая видна до прокрутки страницы (above-the-fold content). Для того чтобы страница отобразилась как можно раньше, критический CSS инлайнят в тег <head>. Есть несколько библиотек, которые можно для этого использовать — Critical, CriticalCSS и Penthouse. В конце статьи есть ссылка на туториал "Extract and inline critical CSS with Critical", где подробно разбирается работа с Critical.

Если у вас есть сайт, при загрузке которого некоторое время отображается простой белый экран, советую заглянуть в статью. Вполне возможно, что проблема кроется в большом объёме CSS.

#performance #css

https://web.dev/extract-critical-css