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


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

    Большинство работодателей закрывают все социальные сети скопом, начиная, естественно, с контакта. Несмотря на это — у крупных и очень крупных проектов в начале страницы( уже не очень хорошо) можно встретить простую строчку:
    <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 программистов на проекты с интересными технологиями и нагрузкой (в офис в питере). За подробнастями пишите в личку :)
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 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
                                                                            Я выше давал ссылку на свое решение
                                                                            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) {}
                                                                            };

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