Асинхронное подключение Google Analytics, Google +1, Facebook SDK, Twitter Widgets и Вконтакте API

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

Вот работающий скрипт для подключения Google Analytics, Google +1 Button, Facebook SDK, Twitter Widgets и Вконтакте API.

(function(window, document) {
  window.___gcfg = {                // Настройки языка для Google +1 Button
    lang: 'ru'
  };

  window._gaq = [                   // Настройки Google Analytics
    ['_setAccount', 'UA-XXXXXX-1'],
    ['_trackPageview'],
    ['_trackPageLoadTime']
  ];

  var apis = [
    'https://apis.google.com/js/plusone.js',                                            // Google +1 Button
    '//vk.com/js/api/openapi.js?75',                                                    // Vkontakte API
    '//platform.twitter.com/widgets.js',                                                // Twitter Widgets
    '//connect.facebook.net/ru_RU/all.js#xfbml=1',                                      // Facebook SDK
    ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js' // Google Analytics
  ],

  iterator = apis.length,
  script   = 'script',

  fragment = document.createDocumentFragment(),
  element  = document.createElement(script),

  clone;

  while (iterator--) {
    clone = element.cloneNode(false);
    clone.async = clone.src = apis[iterator];
    fragment.appendChild(clone);
  }

  clone = document.getElementsByTagName(script)[0];
  clone.parentNode.insertBefore(fragment, clone);

})(this, document);

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

Большинство сервисов уже умеют работать с кодом, загруженным асинхронно, хотя не указывают это в документации. Все перечисленные мною сервисы умеют так делать. Например, чтобы на сайте появилась кнопка “мне нравится” от Вконтакте достаточно добавить всю необходимую логику в функцию window.vkAsyncInit, вот так:

window.vkAsyncInit = function() { // Настройки для Вконтакта
  VK.init({                       // инициализация
    apiId:       APPID,           // APPID это индефикатор вконтакта
    onlyWidgets: true
  });

  VK.Widgets.Like("DIVID", {      // Добавление кнопки "мне нравится" для элемента #DIVID
    type: "mini"
  });
};

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

Что ещё почитать?