Асинхронная загрузка CSS
В Интернете есть примеры асинхронной загрузки CSS через setTimeout или манипуляции с media, но есть более красивое и современное решение — через rel=preload. Выглядит оно так:
<link type="text/css" href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'" />
<noscript>
<link type="text/css" href="style.css" rel="stylesheet" />
</noscript>
Однако следует помнить, что если вы асинхронно загружаете основной CSS без выноса его критической части в тег style непосредственно в HTML, то получается довольно неприятный эффект — сначала страница отображается без стилей вообще, потом тут же перерисовывается заново. Поэтому такую асинхронную загрузку лучше применять только к вспомогательным CSS.
Как выяснилось, в Firefox версий 57 и старше preload по умолчанию отключен, поэтому событие onload не срабатывает. Так что нужно учитывать это и догружать, например, с помощью такого скрипта:
<script> if (navigator.userAgent.indexOf("Firefox")>=0) { var elms = document.querySelectorAll('link[rel=preload][as=style]'); for (i=0; i<elms.length; i++) { elms[i].rel="stylesheet"; } } </script>Размещать его следует после тегов link.