Достаточно длительное время пришлось потратить на изучение оптимизации загрузки всех необходимых скриптов таких популярных сетей, как: 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. Что немаловажно: все скрипты и их переменные запакованы в один запрос.
Асинхронная загрузка скриптов социальных сетей одним запросом
(Ответов: 0, Просмотров: 2748)
- 20.10.2013 17:35
Тэги топика:
Похожие темы
Темы | Раздел | Ответов | Последний пост |
---|---|---|---|
Загрузка блока социальных кнопок после наведения курсора. | Web программирование | 8 | 24.07.2013 01:46 |
Асинхронная загрузка в Google Adsense! | PPC и контекстная реклама | 4 | 12.07.2013 11:50 |
Мониторинг социальных сетей | Социальные сети | 4 | 16.12.2011 14:08 |
Скрипты социальных сетей | Софт, скрипты, сервисы | 7 | 19.04.2010 12:45 |