Jump to content

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


Recommended Posts

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

Link to post
Share on other sites

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...