27
Март

Асинхронная загрузка CSS и JS скриптов на сайте

Категория: Про Сайты
Теги:

Асинхронная загрузка CSS и JavaScript файлов

Асинхронная загрузка CSS и JS скриптов на сайте

При помощи асинхронной загрузки файлов CSS и JS ваш сайт сможет быстрее загружать страницы и это хорошо скажется на мобильном трафике.

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

При помощи кода, указанного ниже, мы добавляем в тег HEAD стили после полной загрузки страницы.


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

APPEND() - добавляет в конец выбранных элементов контент.

Советую

Не забудьте также засунуть все стили в тег <style></style>, необходимые для отрисовки верхней части страницы. Код будет выглядеть так:

<html>
<head>
<b><style>
h1 { font-size:22px; color:<span class="comment"> #ccc; text-align:center;}
</span></style></b>
</head>
<body>
<h1>Заголовок</h1>
<hr/>
{ТЕЛО САЙТА}
<script>
    $(document).ready(function() {
        $("head").append("<link rel='stylesheet' type='text/css' href='/styles.css' />");
    });
</script>
</body>
</html>

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

При помощи асинхронной загрузки JavaScript браузер сперва начнет загрузку основного HTML кода и других ресурсов, а потом уже приступит к загрузке скриптов. А это значит увеличится скорость загрузки и работы сайта для посетителей.

Чтобы включить асинхронную загрузку скрипта, просто добавьте свойство "async":

<script src="/script.js" async></script>

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

Читайте также:

Мой паблик в Вконтакте :)

Комментарии к записи Асинхронная загрузка CSS и JS скрипто...