Асинхронная загрузка CSS

admin

11.02.2021 16:37

Асинхронная загрузка CSS позволит быстрее показать Вашу страницу посетителю. Это критично для мобильных устройств, когда канал может быть медленным.

Загрузка с jQuery

Если Вы используете jQuery, Вы можете загрузить css асинхронно таким образом:
$("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />");

Этот код необходимо выполнить после загрузки документа и jQuery соответственно, например в методе ready:

$(document).ready(function() {
    $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />");
})

В этом случае весь HTML будет загружен без блокирования (ожидания загрузки CSS). Поскольку CSS загрузится после HTML, посетитель будет видеть сайт без стилей до момента их загрузки. Для того, чтобы сохранить внешний вид сайта, следует добавить тег style со всеми стилями, которые нужны, чтобы отрисовать верхнюю часть страницы. Весь код будет выглядеть так:

<html>
<head>
<style>
h1 { color: #444 }
</style>
</head>
<body>
<h1>Заголовок</h1>
<hr/>
...
<script src="/jquery.js"></script>
<script>
    $(document).ready(function() {
        $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />");
    });
</script>
</body>
</html>

В теге style необходимо задать минимальное количество стилей, необходимое для сохранения внешнего вида.

Вы также захотите использовать асинхронную загрузку Javascript.