Оптимизация загрузки CSS
Тим Кадлек в статье "When CSS Blocks" рассказал, как один паттерн оптимизации загрузки CSS нарушает оптимальный порядок загрузки ресурсов и блокирует парсинг HTML.
Когда браузер парсит страницу и видит, что нужно загрузить 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'">Но устаревший паттерн продолжают использовать по инерции, создавая проблемы с производительностью.
Тим написал ещё одну очень хорошую статью. Рекомендую почитать.