Асинхронная загрузка CSS
В Интернете есть примеры асинхронной загрузки CSS через setTimeout или манипуляции с media, но есть более красивое и современное решение — через rel=preload. Выглядит оно так:
Однако следует помнить, что если вы асинхронно загружаете основной CSS без выноса его критической части в тег style непосредственно в HTML, то получается довольно неприятный эффект — сначала страница отображается без стилей вообще, потом тут же перерисовывается заново. Поэтому такую асинхронную загрузку лучше применять только к вспомогательным CSS.
<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.
<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.