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

Здравствуй дорогой друг, поговорим об одном из многочисленных факторов ранжирования страниц (важным аспектом в оптимизации и поисковом продвижении сайта) — скорости загрузки страницы. В данном посте будет рассмотрен способ ускорения загрузки страницы при помощи асинхронной загрузки JS скриптов.

Суть проблемы

Время идет и современные web страницы содержат в себе очень большое количество различного рода javascript, начиная от библиотек, заканчивая социальными кнопками facebook, google и пр. Часто вебмастера (не говоря уже о различных веб студиях) не задумываются о влиянии JS скриптов на скорость загрузки сайта.

Самое плохое наступает тогда, когда скрипт по какой-то причине не грузится. Если не ошибаюсь, в прошлом 2011 году был момент, когда Яндекс перестал пинговаться, под удар попали все сайты, которые содержали коды вызова контекстной рекламы и прочих сервисов Яндекса.

Давайте перейдем к более жизненному примеру. На Вашем рабочем месте стоит компьютер, с которого Вы частенько ходите по социальным сетям vkontakte, facebook и пр. Руководству это не нравится, ведь вы заняты не работой а совсем другими делами. Начальник дает указание администратору закрыть доступ к социальным сетям. А теперь подумаем что будет, когда наш честный работник зайдет, например, на новостной сайт, на котором, практически со 100% вероятностью, стоит кнопочка vkontakte. Встречая вызов javascript браузер начинает грузить содержимое в несколько потоков, это продолжается идет до тех пор, пока загрузка не окончена. Так как вызываемый скрипт vkontakte у нас не грузится браузер не может отрендерить страницу и «виснет» на минуту — две (пока запрос не отвалится по таймауту). Согласитесь, мало кто сможет ждать 100 секунд пока загрузится одна страница.

Как раз для решения этой проблемы применяют асинхронную загрузку.

Асинхронная загрузка javascript методами HTML5

Стандарт HTML5 хорошо и легко справляется с асинхронной загрузкой. Необходимо просто добавить к вызову скрипта async или defer.

В чем разница между async и defer? Разница в моменте времени, когда скрипт начинает выполняться. Простым языком, async выполнится при первой же возможности, а defer не нарушит порядок своего выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки страницы.

<script async src="http://www.site.ru/script.js" type="text/javascript"></script>
<script defer src="http://www.site.ru/script.js" type="text/javascript"></script>

Однако, в данный момент не все браузеры поддерживают html5, поэтому мы рассмотрим другой распространенный способ.

Lazy Loading Asyncronous Javascript

Да, вот так вот умно называется очень удобный способ для асинхронная загрузки javascript. Этот способ я использую на этом блоге (http://nickcode.ru/wp-content/themes/bryk/soc.js). Так же, этот способ предлагают Вам использовать google, facebook, twitter при получении социальных кнопок.

Перейдем сразу к делу:
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();

Где http://platform.twitter.com/widgets.js — это загружаемый JS скрипт. Как видите, не так уж и сложно это. Как пример, Асинхронная загрузка 4-х javascript: google, twitter, vkontakte, facebook:


function() {
function async_load(){
// Код для Twitter
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
// Код для Facebook
var facebook = document.createElement('script');
facebook.type = 'text/javascript';
facebook.async = true;
facebook.src = 'http://connect.facebook.net/ru_RU/all.js#xfbml=1';
// Код для Google +1
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
// Код для Vkontakte
var vkontakte = document.createElement('script');
vkontakte.type = 'text/javascript';
vkontakte.async = true;
vkontakte.src = 'http://userapi.com/js/api/openapi.js';
// Creating scripts on page
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(twitterWidgets, x);
x.parentNode.insertBefore(po, x);
x.parentNode.insertBefore(facebook, x);
x.parentNode.insertBefore(vkontakte, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();
// Инициализация vkontakte
window.vkAsyncInit = function(){
VK.init({apiId: 2858978, onlyWidgets: true});
VK.Widgets.Like("vk_like", {type: "button", height: 20});
};


Не обязательно разбирать каждую строчку, чтобы адаптировать скрипт под себя, можно просто менять количество скриптов и соответствующих блоков кода для них.

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