Асинхронная загрузка скриптов социальных сетей одним запросом
Invite pending
Достаточно длительное время пришлось потратить на изучение оптимизации загрузки всех необходимых скриптов таких популярных сетей, как: Facebook, ВКонтакте, Google+, Mail.ru, Одноклассники, Twitter, Surfingbird и Pinterest, и даже скрипт статистики от Google Analytics, на свои сайты. Да так, чтобы, получая весь необходимый функционал и возможности этих виджетов, не иметь достаточно серьезных проблем со скоростью загрузки страниц, либо не иметь задержек в прорисовке страниц сайта вовсе.
Сами по себе практически все предоставляемые социальными сетями скрипты виджетов уже являются асинхронными и якобы не должны негативно влиять на скорость отдачи контента посетителям сайта, но это не совсем так. Некоторые из скриптов, если не все, подгружаются одновременно с загрузкой страницы, тем самым напрямую влияя на доступность содержимого страницы.
После долгих поисков и анализа всех возможных способов размещения скриптов, предоставляющих гостям вашего сайта возможность поделиться ссылками у себя на странице в аккаунте, был составлен наиболее оптимизированный javascript-запрос. Этот единый скрипт позволит вам включить в себя все ранее перечисленные скрипты социальных сетей, загружать такой запрос к скриптам асинхронно и, более того, не в течение загрузки контента ваших страниц, а сразу после этого, что является одним из важнейших методов оптимизации работы сайтов с использованием множества скриптов.
Итак, сам скрипт (коды самих кнопок можно установить без проблем, главное сам запрос):
Данный скрипт следует вставить в самый конец кода вашего сайта, сразу перед закрывающим .
Выгоды очевидны:
1. Скрипты кнопок социальных сетей и статистики Google Analytics не влияют на скорость загрузки и прорисовки страниц вашего сайта;
2. Скрипты загружаются сразу после загрузки сайта;
3. Если сама социальная сеть недоступна, как и ее скрипты, то ваш сайт при этом не страдает и продолжает работу;
4. Что немаловажно: все скрипты и их переменные запакованы в один запрос.
Сами по себе практически все предоставляемые социальными сетями скрипты виджетов уже являются асинхронными и якобы не должны негативно влиять на скорость отдачи контента посетителям сайта, но это не совсем так. Некоторые из скриптов, если не все, подгружаются одновременно с загрузкой страницы, тем самым напрямую влияя на доступность содержимого страницы.
После долгих поисков и анализа всех возможных способов размещения скриптов, предоставляющих гостям вашего сайта возможность поделиться ссылками у себя на странице в аккаунте, был составлен наиболее оптимизированный javascript-запрос. Этот единый скрипт позволит вам включить в себя все ранее перечисленные скрипты социальных сетей, загружать такой запрос к скриптам асинхронно и, более того, не в течение загрузки контента ваших страниц, а сразу после этого, что является одним из важнейших методов оптимизации работы сайтов с использованием множества скриптов.
Итак, сам скрипт (коды самих кнопок можно установить без проблем, главное сам запрос):
<script>
// Переменные для Google Analytics
var _gaq = [['_setAccount', 'UA-XXXXXXX-X'], ['_trackPageview']];
// Переменная для указания языка для отображения виджетов Google+
window.___gcfg = {lang: 'ru'};
// Инициализация ВКонтакте
window.vkAsyncInit = function () {
VK.init({apiId: YOUR_ID, onlyWidgets: true});
// Далее можно перечислять нужные виджеты ВКонтакте
VK.Widgets.Group('vk_groups', {mode: 0, wide: 1, width: '310', height: '320'}, DIGITS);
VK.Widgets.Like('vk_like', {type: 'button', height: 20});
VK.Widgets.Comments('vk_comments', {limit: 20, width: '420', attach: '*'}); };
// Инициализация Facebook
window.fbAsyncInit = function() {
FB.init({ appId : 'YOUR_ID', status : true, cookie : true, xfbml : true, oauth: true }); };
// Функция асинхронной загрузки
(function(a, c, f) { function g() { var d, a = c.getElementsByTagName(f)[0], b = function(b, e) { c.getElementById(e) || (d = c.createElement(f), d.src = b, d.async = !0, e && (d.id = e), a.parentNode.insertBefore(d, a)) };
b("//connect.facebook.net/ru_RU/all.js", "facebook-jssdk");
b("https://platform.twitter.com/widgets.js", "twitter-wjs");
b("https://apis.google.com/js/plusone.js");
b("//vk.com/js/api/openapi.js");
b("//cdn.connect.mail.ru/js/loader.js");
b("//surfingbird.ru/share/share.min.js");
b("//assets.pinterest.com/js/pinit.js");
b(("https:" == c.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js")
}
a.addEventListener ? a.addEventListener("load", g, !1) : a.attachEvent && a.attachEvent("onload", g)
})(window, document, "script");
</script>
Данный скрипт следует вставить в самый конец кода вашего сайта, сразу перед закрывающим .
Выгоды очевидны:
1. Скрипты кнопок социальных сетей и статистики Google Analytics не влияют на скорость загрузки и прорисовки страниц вашего сайта;
2. Скрипты загружаются сразу после загрузки сайта;
3. Если сама социальная сеть недоступна, как и ее скрипты, то ваш сайт при этом не страдает и продолжает работу;
4. Что немаловажно: все скрипты и их переменные запакованы в один запрос.