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

Начнем с предыстории. На предприятии заблокировали 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.