Пользователь
0,0
рейтинг
13 марта 2012 в 18:26

Теряем посетителей — много и каждый день


По какой-то причине огромное количество проектов с радостью теряет самых хлебных посетителей — белых воротничков в рабочее время.

Большинство работодателей закрывают все социальные сети скопом, начиная, естественно, с контакта. Несмотря на это — у крупных и очень крупных проектов в начале страницы( уже не очень хорошо) можно встретить простую строчку:
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?3"></script>

или
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?20"></script>

В итоге пользователи с закрытым контактом не могут открыть сайт, перейти по ссылке и в конце концов — принести проекту прибыль.

Примеры c посещаемостью больше 50к в день:
vesti.ru
kp.ru
smotri.ru
oktogo.ru
lifehacker.ru
povarenok.ru

Будьте аккуратны, используйте асинхронный код, доступный для всех соц. сетей, в крайнем случае — его можно смастерить самому.



UPD: в комментариях просят пояснить — почему один скрипт помешает всему.

Встречая script или link браузер тут же начинает грузить содержимое(в несколько потоков). До тех пор пока загрузка не окончена — браузер не может отрендерить страницу и «виснет» пока от запрос не отвалится по таймауту(минута-две).

Согласен, что если нормальные админы настраивают файрвол так, что этой проблемы не будет, но как показывает практика многие об этом не задумываются.

UPD2: Самый массовая «блокировка рунета» случилась в прошлом году, когда пару часов лежал Яндекс и вместе с ним — все сайты с синхронным кодом Директа, Метрики и других виджетов яндекса.

PS Мы ищем фронтэнд (javascript) и python/django программистов на проекты с интересными технологиями и нагрузкой (в офис в питере). За подробнастями пишите в личку :)
Barman @Barman
карма
55,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

Комментарии (64)

  • +7
    Для гугло плюса вынес в ready, без этого он продолжал тормозить общую загрузку

    $(document).ready(function(){
    (function() {
    window.___gcfg = {lang: 'ru'};
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    });
    • 0
      А есть ли функция в jquery, которая асинхроннно грузит скрипт? Или хотя бы делает getElementsByTagName / insertBefore?
      • 0
        вроде именно так работает функция $.getScript() в кроссдоменном варианте
        head.insertBefore( script, head.firstChild );

  • –3
    Barman, я правильно понял, что асинхронный код по каким то причинам не будет блокироваться?
    • +13
      Он будет блокироваться, но не будет мешать загрузки сайта.
  • 0
    Я что-то не совсем понял, почему отказ в загрузке одного из скриптов должен приводить к отказу в загрузке сайта? Вы сами пробовали ставить блокировку средствами того же Adblock plus, например?
    • +1
      Зависит от способа блокировки. Если будет тупо резаться и запрос к vkontakte.ru/js/api/share.js будет висеть, то пока не отвалится по таймауту, страница не покажется.
      • 0
        Понял, что вы имеете в виду. Да, вы правы, это зависит от способа блокировки. Но, даже в случае отсутствия режектов, это не отказ загрузки сайта, а сильное замедление этой самой загрузки.
      • 0
        А можно как-то настроить этот таймаут? На их стороне или у себя?
        • 0
          Таймаут браузер устанавливает, но я ни для одного не знаю, чтобы легко это изменить.
          А вообще это неправильный способ блокировки. Раз уж блокируют, пусть на подобные запросы 403 сразу отдаётся.
    • +1
      Такое возникает у горе-админов, которые банят все пакеты, в которых встречаются строчки с упоминанием домена. Вот куча примеров (1, 2 в общем, их таких много)
      • +4
        Не могу себе представить полезный пример урла вида *vkontakte.ru*, как в первом примере.
  • +10
    Поясните мне пожалуйста о чем говорится в этой статье?
    У меня в голове все спуталось.
    • +7
      Кнопки социальных сетей вставлены в большое количество ресурсов. Когда социальные сети с работы прикрыты, браузер тупит при открытии страницы, так как не хочет двигаться дальше пока не прочитает код кнопки.
      • +1
        Кстати в Беларуси во время «молчаливых акций», пару раз прикрывали вконтакте. У нас была проблема недоступности некоторых ресурсов по всей стране.
    • –11
      Автор как то не так выразился.
      По его словам, если работодатель закрыл доступ к сайте vk.com,vkontakte.ru и т.д. то пользователь если заходит с рабочего сайта на сайт из списка «Примеры c посещаемостью больше 50к в день:» то такой сайт не будет грузиться, т.к. на этих сайтах установлены кнопки поделится и т.д. Смысл такой, автор считает что если не загружается скрипт с заблокированного домена, то сайт не работает.(Это как я понял прочитав статью)
      Но это имхо бред :) ну не подгружается код с сервера контакта, и что с этого, все остальные то скрипты работают на ура и без этого скрипта, он как никак отвечает всего то за кнопку поделиться или мне нравится.

      Если я не прав, поправьте, но 3 раза перечитав пост я его так понял :(
      • +3
        Смотря как настроена прокся. Может просто останавливать загрузку при упоминании ресурса из блэклиста.
        • 0
          Даже параноидально настроенная прокся (покосился на свою) такого делать не будет.
          • +3
            Я не про параноидальную, а про криво настроенную :)
      • +1
        именно так — если контакт закрыт запретом пакетов на vkontakte.ru или yandex.ru — страница не начнет рендерица, пока запрос к контакту не отвалится по тайм ауту
      • 0
        Потихоньку складывается ситуация. Посмотрел статистику переходов из социалок, всего до 10 человек при 10к уникальных. Скрыл их, посмотрю на динамику по статистике. Оставил только share от яндекса и +1 гугла.
      • 0
        Тут главная опасность вот в чем.
        Если криво режется какой-то источник (вконтакте, например) то сайт загрузиться — загрузится.
        Но, броузер будет ждать, пока загрузится подключаемый скрипт и все это время не произойдет событие onload.
        А в таком случае скрипты, которые ждут этого события (для jquery — $(document).ready(), равносильно $(function(){}) ) просто не отработают (точнее отработают, когда закроется соединение по таймауту).

      • +1
        У меня когда google analytics упал, не грузилось вообще половина интернета, загрузка сайтов надолго зависала пытаясь получить google-analytics.com/ga.js. Сейчас эту ситуацию исправили, и скрипт загружается асинхронно.
      • 0
        У меня такое было на работе. Сайт не рендерился 2 минуты, пока не сработает таймаут у фаерфокса. Лечил кастом noscript на социальные кнопки.
    • 0
      Сайт 1 (в контакте), сайт 2 (скажем хабрхабр). Предположим что хабрхабр использует кросс-рекламу с 'в контакте' (это все именно про кросс-рекламу).

      Если для этой рекламы, хабрхабр использует ссылку на ресурс из сайта 'в контакте', и если этот ресурс загружается как синхронная часть страницы (то есть просто ссылка на этот ресурс, например ссылка на js file из кода страницы хабрхабр), то в зависимости от настройки firewall и того, как браузер работает, страница может не вырисовываться, а ожидать возврата запроса к этому ресурсу на 'в контакте'.

      Если же этот ресурс загружать асинхронно (ну например в отдельной frame или используя XMLHttpRequest), то тогда хотя этот ресурс и будет тормозиться и не вернется из-за блокировки firewall, но остальная страница загрузиться и браузер ее отобразит без задержки.
      • 0
        Это я понял, просто подача текста была таковой что у меня все смешалось. Мне кажется что если в начале статьи сказать что проблемы с не асинхронной загрузкой то вопросов было меньше, а так получилось что упоминание про асинхронность только в последнем предложении.
  • –30
    ниасилил =/
  • –4
    А что мешает в iframe загонять социалки? Пускай себе фреймы не грузятся, где заблокировано, не в ущерб остальному контенту.
    • +10
      А пояснить за что минуса?
      Не все сразу гениями рождаются :)
      • 0
        Представьте себе на странице список постов. У каждого есть кнопка like. Под каждую кнопку делать отдельный iframe?
        • +2
          В таком аспекте согласен.
          Не бейте тряпками, я только учусь :)
        • +8
          Удивлю вас, но действительно в результате работы скриптов лайков вставляются айфреймы.
  • +2
    скрипты комментариев, кнопочек и прочего должны надохиться не во фрейме. Правильное решение — асинхронный вызов, как и указано в статье.
    • +5
      Правильное решение — загрузка скриптов всех этих социальных сетей только по требованию.
      Т.е. открываешь сайт, там есть кнопочки facebook, twitter и т.п., но никакого кода с этих сайтов не загружено, загружены только картинки, причём локально. Загрузка, собственно, кода должна происходить по нажатию на соответствующую кнопку — так пользователь будет ограждён от трекинга пока он этого не захочет (мы же уважаем частную сферу пользователя), и от тормозов при загрузке.
      • 0
        От тормозов при загрузке можно избавится, если загружать код кнопок после рендеринга страницы.

        А если заботится о приватности, то кнопки можно совсем не ставить.
        • 0
          >От тормозов при загрузке можно избавится, если загружать код кнопок после рендеринга страницы.
          Об этом, собственно, написано в статье.

          >А если заботится о приватности, то кнопки можно совсем не ставить.
          Если кнопки совсем не ставить, то доставим неудобства пользователям, которым эти кнопки нужны.
          • 0
            В статье написано о том, как грузить скрипт параллельно со страницей. А я говорю о том, что начинать загрузку по событию windows.load.

            IMHO если пользователь видит кнопку с большим числом на счетчике, то подсознательно считает статью более интересной.
            • 0
              1. Понял, согласен. Грузить после всего рендеринга, включая программный.

              2. Не учёл, так как не пользовался этими кнопками ни разу. Как вариант, можно инициализировать счётчик на сервере. Заодно и большое число пририсовать, если опрашивать соц.сети лень :)
      • 0
        Ну, при загрузке по нажатию, пользователю нужно нажимать 2 раза. Если пользователи очень беспокоятся о приватности, зачем им автологин в соц сетях?
        • 0
          Как отличить пользователей, которые беспокоятся о приватности, от пользователей, которые хотят использовать фэйсбук?
  • +3
    Я как-то упустил это из виду много раз. И теперь мне стыдно, довольно много проектов работают с такой миной.
  • 0
    По просьбе руководства приходится закрывать.
    Открываем только тем, кому согласует их руководство и безопасники.
    С одной стороны хорошо, люди хоть работать будут… А с другой — свобода действий.
    • 0
      закрывать можно по разному — хоть на локалхост их заводить или google.com
  • 0
    Для ленивых асинхронный код в комплекте с lazyload
    tigor.org.ua/external-java-scripts-on-site/

    Примеры скрипта для twitter, Google+, vkontakte, facebook
  • 0
    Подождите, в статье какая то ошибка!

    У меня на работе не открывается ни одна страница в названии которой присутствуют слова вконтакте и одноклассники, но сайты из статьи открываются нормально.
    При этом веб консоль показывает, что прокся действительно порезала все попытки загрузки вконтактовских скриптов.

    Могу дать скрин, если кому интересно…
    • +1
      У вас просто админ пряморукий и режет правильно. То есть отвечает браузерам, что сюда нельзя. У многих же просто «черная дыра».
  • +2
    Надеюсь userapi.com никто не блочит?
    • 0
      Надейтесь
    • +1
      закрывают, под одну гребенку с vk vkontakte odnoklassniki и так далее
  • 0
    Зафиксил, спасибо.
  • 0
    Еще пара упоминаний фконтакте и я завтра с работы эту статью не перечитаю…
  • 0
    Настроить privoxy на вырезание всех скриптов размещённых на левых доменах и никаких проблем. Вместе со всякими лайками, плюсами и прочей хренью из полезного отваливается только recaptcha.

    Да, я в курсе что статья не об этом.
  • 0
    Хрен прорветесь!
    Вконтактики, они, видите-ли, почитывают на работе.
    • 0
      Не тешьте себя иллюзиями — конечно прорвемся )
  • 0
    такая проблема есть, сайты со вставками контакта вообще не грузятся, ни через минуту, ни через час. приходится прописывать вконтакт в хосты на локалхост
  • –1
    Интересно, когда г+ блочить начнут.
  • 0
    Сел сделать асинхронную загрузку в результате получилась готовая библиотечка — github.com/H1D/vk-async Пока только вконтакт, если интерес не пропадёт, то добавлю остальные сети и уйду от зависимости jQuery
    • 0
      Потестил, прикольно. jQuery нафиг )
      • 0
        спасибо, найдётся время уйду от него
  • 0
    Use Ghostery, Luke.
  • 0
    В статье не хватает конкретных примеров кода для всех основных социалочек. Очень надеюсь на обновление поста.
    • 0
      с примерами их корректной «доработки»
    • 0
      Вот на оф. сайте пример для vk vk.com/page-1_20335947
    • 0
      Я выше давал ссылку на свое решение
      tigor.org.ua/external-java-scripts-on-site/#social

      Или вам будет удобней 74 строки кода без разметки и подсветки использовать? Пожалуйста

      (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/en_US/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';
      // 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(vkontakte, x);
      twitterWidgets.onload = _ga.trackTwitter;
      }
      if (window.attachEvent)
      window.attachEvent('onload', async_load);
      else
      window.addEventListener('load', async_load, false);
      })();
      window.fbAsyncInit = function() {
      FB.init({appId: '254160764598987', status: true, cookie: true,
      xfbml: true});
      _ga.trackFacebook();
      };
      window.vkAsyncInit = function(){
      VK.init({apiId: 1959482, onlyWidgets: true});
      VK.Widgets.Like(«vk_like», {type: «vertical»});
      _ga.trackVkontakte();
      };
      _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) {}
      };

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.