Как подключить асинхронно CSS и Javascript.

5/52 оценки

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

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

Мы же сегодня все это рассматривать не будем, а поговорим о том как сделать загрузку стилей и скриптов Javascript асинхронными, то есть при посещении сайта пользователь не ждет последовательной загрузки страницы где сначала грузятся все стили и скрипты и только после грузится ваш отрисованный HTML, данный метод я часто применяю к каким то отдельным css и js которые не важны на этапе загрузки страницы сайта.

И так начнем и рассмотрим примеры как для css так и для скриптов Javascript:

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

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

И так начнем, для того что бы использовать описанный ниже метод асинхронной загрузки файлов css, у вас на сайте должен быть подключен jQuery. Загрузить css стили асинхронно можно используя следующий метод:

$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />")

1	$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />")

Загрузка данного кода обязательно должна производится после загрузки jQuery и самой страницы. К примеру используя метод ready, ниже полный пример использования:

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

$(document).ready(function() {

$("head").append("<link rel='stylesheet' type='text/css' href='/stylesheet.css' />");

});

</script>

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

Так же в данном методе есть небольшой недостаток, а именно: Так как Вы сделали загрузку css после загрузки самой разметки html ваш сайт будет коряво смотреться в момент загрузки страницы. Для того чтоб такое не происходило вам нужно или прорисовать несколько основных стилей прям в теле страницы HTML и таким образом Вы сохраните внешний вид сайта в момент загрузки, или же не применять данное условие к основному файлу CSS и оставить его синхронным, а применить данное условие именно к тем стилям которые не играют большого значения в момент загрузки сайта.

Ну вот собственно и все, теперь Вы знаете как сделать асинхронную загрузку css файлов. В сети можно конечно найти и другие методы но я всегда пользуюсь этой инструкцией собственно ее Вам и предлагаю.

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

Так же как и для CSS асинхронная загрузка скриптов Javascript позволяет браузеру не дожидаться загрузки скриптов, загружая основной код HTML после которого только будет загружен сам Javascript. Благодаря данным действиям страницы вашего сайта загружаются намного быстрее. Данное действие опять же нужно применять к каким то отдельный скриптам JS особенно для тех которые тормозят загрузку страницы и на которые ругается проверка Google PageSpeed.

И так что бы сделать загрузку Javascript асинхронной все что вам нужно так это добавить свойство "asyc" в подключаемый файл к примеру так:

<script async src="https://web-ukraine.com/main.js"></script>

1	<script async src="https://web-ukraine.com/main.js"></script>

Обратите внимание что при использовании данного метода у Вас не будет работать обычная последовательная загрузка скрипта:

<script src="/jquery.js" async></script>
<script>$('a').addClass('ajax');</script>

1 2	<script src="/jquery.js" async></script> <script>$('a').addClass('ajax');</script>

Данный вариант работать не будет в связи с тем что jQuery будет загружаться в фоновом режиме а функция "$" еще не определена.

По этому для правильной работы скрипта рекомендуется использовать событие onload.

<script>function init() {
 $('a').addClass('ajax');
}</script>
<script src="/jquery.js" async onload="init()"></script>

$('a').addClass('ajax');

}</script>

Таким образом функция init будет вызвана сразу после загрузки jQuery. Вот собственно и все, таким образом Вы сможете сделать у себя на сайте асинхронную загрузку javascript скриптов.

В общем пробуйте, и у Вас все получится. Удачи Вам в нашем не легком деле.