company_banner

Как мы оптимизировали социальную кнопку

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

    Под катом — список проблем, которые мы выявили за время работы над нашей кнопкой Класс, а также способы их разрешения, которые мы проверили на собственном опыте.


    Зачем?

    ComScore в своем исследовании The Power of Like 2 рассказывает, что только с ноября 2011 по март 2012 года доля «социальной» (например, снабженной призывами вступать в группу в соцсети) интернет-рекламы в США возросла с 8,2% до 15,2%. Там же упоминается значительный рост охвата за счет того, что сообщения брендов, которые понравились юзеру, видят в ленте событий его друзья.

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

    Одноклассники выпустили в свет свою первую кнопку Класс в 2010 году. С тех пор она прошла через несколько этапов изменений.

    В чем дело, Док?

    Итак, какие проблемы мы выделили для себя?

    1. Существование в дикой природе нескольких неуправляемых версий кнопки. Все предыдущие реализации кнопок не позволяли нам автоматически изменять дизайн и исправлять критические ошибки у тех пользователей, которые уже закэшировали код кнопки у себя в браузере.
    2. Синхронная, блокирующая загрузка кнопки. При наличии проблем на стороне сервиса сайты, установившие кнопку, используя предоставленный код установки, могли столкнуться с крайне долгой загрузкой их страниц.
    3. Объем кода. Большие, тяжелые кнопки грузятся долго, в связи с чем многие региональные сайты копировали код кнопки к себе с целью оптимизации загрузки. Это только усугубляло проблему, описанную в первом пункте.
    4. Низкий уровень сбора статистики. Мы активно используем системы статистики (об этом мы уже рассказывали тут и здесь) и, в частности, собираем статистические данные о том, как люди используют наш сайт. Отсутствие хорошей статистики в таком важном компоненте как социальная кнопка лишало нас возможности качественно улучшать ее эффективность.
    5. Тесная связь кода на сервере с основным кодом сайта затрудняла независимое обновление кнопки.


    Что делать?

    Осознав наличие всех этих проблем, мы решили изменить ситуацию, создав новую кнопку. Хотя внешне она не слишком отличается от предыдущих, зато работает на порядок лучше. Что же мы сделали?

    1. Разработали удобный конструктор, позволяющий создавать кнопку с таким внешним видом, который лучше всего впишется в дизайн сайта.
    2. Сделали код подключения кнопки асинхронным — он не блокирует отрисовку сайта, на котором установлена новая кнопка. Что бы ни случилось с нашими серверами, ваш сайт будет работать так же хорошо, как и раньше.
    3. Оптимизировали код кнопки — он стал меньше и гораздо быстрее. Время загрузки нашей кнопки в несколько раз меньше, чем у других социальных кнопок.
    4. Внедрили возможность легкого обновления. При возникновении проблем мы можем обновить кнопку у всех пользователей независимо от того, закэшировали они наш код до этого или нет.
    5. Добавили всю необходимую нам статистику, чтобы продолжать эффективно работать над улучшением кнопки.
    6. Создали для кнопки отдельную инфраструктуру, которая в дальнейшем стала платформой и для других виджетов, таких как виджет групп. Список доступных виджетов можно посмотреть тут.


    Чтобы не быть голословными, хотим представить вашему вниманию небольшой анализ работы социальных кнопок, отображенный в инфографике на рис. 1



    Время рендеринга социальных кнопок получено при помощи синтетических тестов. Было создано несколько пустых HTML-страниц, для каждой кнопки своя, многократно измерено время onload этих страниц и вычислено среднее время для каждой из них. Серверное время рендеринга получено из публичных источников, поэтому там есть только VK, т.к. для других соцсетей подобной информации в интернете найдено не было.

    В целом наша команда очень довольна результатом, и мы с гордостью можем сказать, что наша кнопка «Класс» — самая быстрая среди всех существующих аналогов. В комментарии принимаем вопросы про социальные кнопки, а также будем рады, если кто-то поделится своим опытом оптимизации.
    Одноклассники
    269,00
    Делимся экспертизой
    Поделиться публикацией

    Комментарии 16

      +23
      Как всегда на самом интересном месте статья заканчивается…
      Расскажите уже про код, пожалуйста. Что в итоге и как так получилось?

      А то статья больше похоже на «Все ставьте наши кнопки-они самые быстрые»
        +3
        Так код то весь публично доступный, здесь есть асинхронное подключение скрипта на сайте: link
        А тут код позволяющий нам обновлять кнопку независимо от того, что сделали разработчики подключившие ее к себе на страницу link
          +2
          Да, вы правы. Можно было топик как ссылку оформить и всё :)
            0
            Главное было понять какие есть проблемы у кнопки, а не то как эти проблемы решить. Про клиентскую оптимизацию даже на хабре очень много информации.
              0
              А можно тогда в двух словах, как удалось победить мультиверсионность кнопок и их ручное кэширование на серверах разработчиками?
              Т.е. всем придется заново сгенерить себе кнопку и подключить новый скрипт?
                +2
                Мы отдаем только код для встраивания iframe, внутри которого отрисовывается кнопка сгенеренная нашими серверами. Т.е. если нам надо поменять ресурсы, то в этот iframe просто будет прилетать другой хтмл с другими линками на ресурсы.
            +2
            Не весь код все таки доступен ;-) Серверное хранилище классов полностью свое, рассказ о нем тут: www.slideshare.net/m0nstermind/cassandra-klassic-cassandra
          +1
          Расскажите, как оптимизировали: как стал асинхронным, как принудительно обновляете, и еще много «как»?
            +3
            Оптимизировали — убрали все лишнее, всякие JQuery и т.д. Оставили только код необходимый самой кнопке, а не весь апи, как у некоторых соц. сетей.
            Способов подключить скрипт асинхронно много, самый трендовый создать в хеде через document.createElement('script'); новый скрипт
            Принудительное обновление: Даешь наружу только код, который формирует iframe, все остальное делает уже ваш собственный код вставляемый в этот iframe.
            +2
            Вот это очень кстати, всегда бесили тяжеловесные кнопки с огромными кусками html кода iframe и куча js.
              +4
              CSS могли бы и инлайном сделать в html документе айфрейма. Грузилось бы быстрее :)
                +2
                Да, должно стать еще лучше, и это есть в планах на ближайшее время :-)
                0
                У меня пару вопросов:
                Допустим мне на одну страницу нужно поставить несколько кнопок Класс.

                1. Вставляя код из вашего виджета я получу несколько <div id="ok_shareWidget"></div> и столько же загрузки скриптов (даже если из кэша).
                Вы считаете правильным использование нескольких одинаковых id? Как ваши скрипты рендерят кнопку в таком случае (или после рендера вы просто удаляете ID, я не читал код)?

                2. Параметры виджета зашиты в скрипте, а не в тэге виджета <div id="ok_shareWidget"></div>. Допустим скрипты кнопок загрузились не в той последовательности, как их вызывали. Как вы обеспечиваете попадание нужных параметров в нужный тэг виджета? Вы гарантируете, что кнопки сгенерируются с нужными ссылками?

                3. Зачем вы загружаете один и тот же скрипт http://connect.ok.ru/connect.js несколько раз в таком случае?

                Советую прочитать статью The art and craft of the async snippet от разработчиков Facebook.
                  0
                  Обратите внимание на страницу «Оптимизация» в том же разделе «Социальные виджеты»:

                  1) Бесспорно для корректной работы нескольких кнопок нужны разные ID для контайнеров виджетов. Код который генерит конструктор предназначен для начинающих веб мастеров как пример внедрения кнопки.

                  2) Именно тег контайнера служит указанием куда поместить конкретный виджет.

                  3) Применив знания из раздела «Оптимизация», у вас будет подгружен только 1 скрипт.

                  Статью Стояна я читал, но вот результат их оптимизаций все еще далек от того, что удалось добиться нам.
                    0
                    У Facebook за отсуствие повторных загрузок скрипта и вызовов рендера отвечает всего одна строка кода if (d.getElementById(id)) return;, где id=«facebook-jssdk» первого ассинхронно подгруженного скрипта. В вашем же случае нет никаких оптимизаций, код скрипта не только подгружается N раз, но и столько же раз выполняется (если виджеты вставляются копипэйстом из конструктора полностью).

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

                    Говоря о результате, что он еще далек, задумайтесь: может он далеко впереди?

                    P.S. Смотрел код виджета. Давно я не видел определения переменных в цикле for(var a=0;a<d.length;a++){var c=d[a].split(":");… и return «error»; в функции, которая рендерит виджет. Может просто return true/false и throw new Error?
                      0
                      Вы зацепились за идею доказать мне что кнопка ФБ лучше, но это не так. Если пользователь правильно все прочитал, а не просто взял код и бездумно вставил его себе на сайт 10 раз, он получит кнопку которая в 5 раз быстрее чем кнопка ФБ.

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

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