kab1

Асинхронная загрузка скриптов социальных сетей одним запросом

3 posts in this topic

Достаточно длительное время пришлось потратить на изучение оптимизации загрузки всех необходимых скриптов таких популярных сетей, как: Facebook, ВКонтакте, Google+, Mail.ru, Одноклассники, Twitter, Surfingbird и Pinterest, и даже скрипт статистики от Google Analytics, на свои сайты. Да так, чтобы, получая весь необходимый функционал и возможности этих виджетов, не иметь достаточно серьезных проблем со скоростью загрузки страниц, либо не иметь задержек в прорисовке страниц сайта вовсе.

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

После долгих поисков и анализа всех возможных способов размещения скриптов, предоставляющих гостям вашего сайта возможность поделиться ссылками у себя на странице в аккаунте, был составлен наиболее оптимизированный 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>

Данный скрипт следует вставить в самый конец кода вашего сайта, сразу перед закрывающим

</body>

Выгоды очевидны:
1. Скрипты кнопок социальных сетей и статистики Google Analytics не влияют на скорость загрузки и прорисовки страниц вашего сайта;
2. Скрипты загружаются сразу после загрузки сайта;
3. Если сама социальная сеть недоступна, как и ее скрипты, то ваш сайт при этом не страдает и продолжает работу;
4. Что немаловажно: все скрипты и их переменные запакованы в один запрос.

Воланд likes this

Share this post


Link to post
Share on other sites

протестим, хотя конечно было бы неплохо полное описание какие виджеты, кнопочки можно установить + коды

Share this post


Link to post
Share on other sites

протестим, хотя конечно было бы неплохо полное описание какие виджеты, кнопочки можно установить + коды

Видно же из кода, что все основные кнопки будут...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.