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

Размещен в Оптимизация (SEO) 19.03.2012 19:00
Теги: , ,

Асинхронная загрузка
Здравствуй дорогой друг, поговорим об одном из многочисленных факторов ранжирования страниц (важным аспектом в оптимизации и поисковом продвижении сайта) — скорости загрузки страницы. В данном посте будет рассмотрен способ ускорения загрузки страницы при помощи асинхронной загрузки 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 так же можно загружать и картинки, если у Вас большое количество изображений на странице, то это существенно сократит скорость загрузки страницы, но это уже совсем другая история ;).

Оставить комментарий:

  1. Anonim

    опубликован 04.05.2012 в 11:06

    А куда конкретно вставлять код? Ведь коды кнопок делятся на 2 части: одна часть вставляется в , а другая в то место, где стоит кнопка.

  2. Bryk

    опубликован 05.05.2012 в 11:01

    Например, возьмем код кнопки vk.com:

    <!— Put this script tag to the of your page —> VK.init({apiId: 2858978, onlyWidgets: true});VK.Widgets.Like(«vk_like», {type: «full»});

    Можете открыть http://nickcode.ru/wp-content/themes/bryk/soc.js и посмотреть как записан там этот код.

    В шаблоне кнопка выводится с помощью:

  3. Anonim

    опубликован 05.05.2012 в 15:20

    Я хотел написать , что первая часть кода вставляется между тегами head или body, а друга в то место, где конкретно стоит кнопка. И я так понимаю, что ваш код нужно прописать там, где стоит вторая часть кода кнопки.

  4. Onerror

    опубликован 28.05.2012 в 05:49

    Проблема не имеет отношения к поисковой оптимизации.

    ПС не грузят javascript :-)

  5. Nurlan

    опубликован 28.09.2013 в 21:07

    Если это скрипт, нельзя ли сразу обернуть этот код соответствующим образом. А если это надо вставить как , то также написать конкретно. Не все знают, как и куда это добро вставлять. Может Вы это писали для, так называемых, «гуру».

  6. Lesha

    опубликован 13.07.2014 в 17:49

    Код перезагружает страничку после подгрузки(