Сентябрь
19
2011

Сторонние скрипты на сайте

Сторонние скрипты на сайте

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

Начнем с предыстории. На предприятии заблокировали vkontakte.ru, мне от этого ни холодно, ни жарко, но некоторые сайты с установленными вконтактовскими рюшечками стали открываться невыносимо долго. Причина для этого простая — сайт не отображается, пока не загрузится скрипт. А Firefox терпиливый, ждет до последнего

GET http://vkontakte.ru/js/api/share.js?10 [HTTP/1.0 504 Gateway Time-out 180297мс]

180 секунд это практически 3 минуты, ждать больше минуты на каждой страницы верх жестокости.

Что делать пользователю

Меня выручил плагин для Firefox — NoScript. Просто запретил все вконтактовские скрипты (vkontakte.ru, userapi.com, vk.com) и страница стала загружаться без томительного ожидания ответов от заблокированных сервисов.

Что делать вебмастеру

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

Размещать вызовы в конце страницы. Многие сайты в инструкции к своим скриптам указывают «разместить в блоке между <head>…</head>», если скрипт написан не криворукими обезьянами, то ему будет фиолетово где загружаться. У меня все скрипты собраны перед самым закрытием страницы </body>. Минусом является поздняя загрузка, например у меня баннеры появляются через пару секунд после текста, но это лучше чем заставлять пользователя втыкать на белый лист.

Размещать скрипты локально. Я ранее писал про плагин WP-Minify, в нем есть поле, которое добавляет в локальный сжатый кеш скрипты со сторонних сайтов. Но тут как повезет, не все будут нормально работать.

Если хочется ускорить загрузку страниц, то сторонние скрипты нужно загружать после события windows.onload. Это называется LazyLoad.  Я его подсмотрел тут. Можно также использовать lazyload для картинок.

Для работы нужно вписать нужный адрес в параметр s.src.

Если нужно загружать несколько скриптов, то для каждого объявляем по переменной.

Загрузка социальных кнопочек после загрузки страницы

У меня все социальные кнопки (Вконтакте, Google+, Facebook, Twitter) и рекламный код RotaBan грузятся после полной загрузки страницы. Как грузится Rotaban можно посмотреть в коде самой страницы, а для социальных сетей я выложу тут. Заметьте, что этот код содержит функции отслеживания нажатий социальных конопок в GA.

Неправильная раскладка: cnjhjyybt crhbgns yf cfqnt

Понравилась статья? Посоветуйте друзьям!

Analytics JavaScript Скорость сайта Соцсети


Понравилась статья? Подпишись на рассылку по E-Mail или в RSS.
  • В контакте лайк очень попурный и как раз не хочет работать если его в nead не вставить...
  • Интересные советы, но лично у меня руки кривые, еле-еле вордпресс осилил. Теперь втыкаю всякие кнопки:)
  • Не работает для контакта :( может конечно я чего не так делаю
  • НЕ грузит вконтакте. в чем причина?
  • Было бы хорошо посмотреть на сайт. Вы appid указали свой?
  • Спасибо, уже разобрался.
  • freelancer
    для твитера работает инкремент счетчика?
  • блин работает спасибо
  • Александр Щербаков
    Спасибо! А для одноклассников подскажите как сделать.
  • Как-то так. var od = document.createElement(\'script\'); od.type = \'text/javascript\'; od.async = true; od.src = \'http://cdn.connect.mail.ru/js/loader.js\';
  • RastasUAKh
    Спасибо, все работает, также удобно использовать это для виджета группы вконтахте. Единственный вопрос по Facebook appId, он нужен или можно без него?
  • Если appid не соответствует сайту, то возможно не будут работать лайки или после нажатия лайка будет необходимо еще одно подтверждение на фейсбуке от пользователя.
  • RastasUAKh
    я попробовал без appId, и лайки отображаются в ленте, т.е. можно обойтись без него?
  • Ник
    а как использовать для группы вконтакте? Нужно только после // Vkontakte initializing function дописать VK.Widgets.Group(\"vk_groups\", {mode: 0, width: \"295\", height: \"180\"}, xxxxxxx); так?
  • RastasUAKh
    ога ну и вставить
  • Sava
    А зачем нужны в коде скрипта тэги P?
  • Это wordpress шалит, натыкал туда лишних тегов по своему усмотрению..
  • ник
    А почему моожет контакт и одноклассники не показывать информацию? С остальными проблем нет
  • RastasUAKh
    может быть там нужен правильный ID?
  • ник
    с этим порядок, вот код (function() { function async_load(){ // Twitter widget code var twitterWidgets = document.createElement(\'script\'); twitterWidgets.type = \'text/javascript\'; twitterWidgets.async = true; twitterWidgets.src = \'http://platform.twitter.com/widgets.js\'; // Facebook Like code var facebook = document.createElement(\'script\'); facebook.type = \'text/javascript\'; facebook.async = true; facebook.src = \'http://connect.facebook.net/ru_RU/all.js\'; // Google +1 code var po = document.createElement(\'script\'); po.type = \'text/javascript\'; po.async = true; po.src = \'https://apis.google.com/js/plusone.js\'; // Odnoklassniki Like code var od = document.createElement(\'script\'); od.type = \'text/javascript\'; od.async = true; od.src = \'http://cdn.connect.mail.ru/js/loader.js\'; // Vkontakte Like code var vkontakte = document.createElement(\'script\'); vkontakte.type = \'text/javascript\'; vkontakte.async = true; vkontakte.src = \'http://userapi.com/js/api/openapi.js\'; // Creating scripts on page var x = document.getElementsByTagName(\'script\')[0]; x.parentNode.insertBefore(twitterWidgets, x); x.parentNode.insertBefore(po, x); x.parentNode.insertBefore(facebook, x); x.parentNode.insertBefore(od, x); x.parentNode.insertBefore(vkontakte, x); twitterWidgets.onload = _ga.trackTwitter; } if (window.attachEvent) window.attachEvent(\'onload\', async_load); else window.addEventListener(\'load\', async_load, false); })(); // Facebook initializing function window.fbAsyncInit = function() { FB.init({appId: \'XXXXX0\', status: true, cookie: true, xfbml: true}); // Call google Analytics Social Tracking _ga.trackFacebook(); }; // Odnoklassniki initializing function window.odAsyncInit = function() { ODKL.init(); // Call Odnoklassniki Analytics Social Tracking _ga.trackOd(); }; // Vkontakte initializing function window.vkAsyncInit = function(){ VK.init({apiId: XXXXX1, onlyWidgets: true}); VK.Widgets.Like(\"vk_like\", {type: \"mini\", height: 20}); VK.Widgets.Group(\"vk_groups\", {mode: 0, width: \"300\", height: \"200\"}, XXXXX2); // Call Google Analytics Social Tracking _ga.trackVkontakte(); }; // Function for Vkontakte Social Tracking _ga.trackVkontakte = function(opt_pageUrl, opt_trackerName, opt_targetUrl) { var trackerName = _ga.buildTrackerName_(opt_trackerName); try { if (VK && VK.Observer && VK.Observer.subscribe) { VK.Observer.subscribe(\'widgets.like.liked\', function() { _gaq.push([trackerName + \'_trackSocial\', \'vkontakte\', \'like\', opt_targetUrl, opt_pageUrl]); }); VK.Observer.subscribe(\'widgets.like.unliked\', function() { _gaq.push([trackerName + \'_trackSocial\', \'vkontakte\', \'unlike\', opt_targetUrl, opt_pageUrl]); }); } } catch (e) {} };
  • ник
    id правильный, но не считает, а выложите полный код включая одноклассники
  • А можно написать аналогичный скрипт для виджетов комментарий фейсбука и контакта?
  • Ща
    Ты задрот
  • Igor Chernomorets
    Здравствуйте! Недавно установил скрипт от rotaban в файл header в самый низ перед /body но несмотря на это сайт стал намного медленней загружаться. Даже в проверке от Гугла скорость снизилась на 3% к ПК и на целых 10% в мобильных. Может быть установить скрипт в файл footer? У вас есть идея по этому поводу? Заранее спасибо