Когда браузер парсит страницу и видит, что нужно загрузить css, он останавливает процесс рендеринга страницы и ждёт загрузки CSS. Для загрузки некритичного CSS такое поведение нежелательно, поэтому появился паттерн "preload/polyfill", в котором CSS загружается с помощью
<link rel="preload" ...> в неблокирующем режиме. Если preload не поддерживается браузером то в работу вступает небольшой полифилл.Тут возникает две проблемы: 1) использование preload откладывает загрузку важных ресурсов и некритичный CSS загружается в первую очередь, 2) когда полифилл инициирует загрузку CSS, парсинг html останавливается полностью, таким образом сайт рендерится с задержкой. Тим пишет, что авторы паттерна "preload/polyfill" больше не рекомендуют его использовать, а предлагают использовать трюк с медиа:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
Но устаревший паттерн продолжают использовать по инерции, создавая проблемы с производительностью.
Тим написал ещё одну очень хорошую статью. Рекомендую почитать.
#perfromance #browser #css
https://timkadlec.com/remembers/2020-02-13-when-css-blocks/