Большое испытание кнопок социальных сетей - производительность, конфиденциальность, возможности - Xfive

1. Как мы тестировали
2. Тест производительности и оценка
3. Оценка конфиденциальности
4. Особенности и настройка установки
5. Финальный ранг
6. Результаты тестов - хорошо, плохо и безобразно
7. 4 место - Простые кнопки общего доступа
8. 5 место - Вспышка накаливания
9. 6 место - Добавь это
10. 7 место - AddToAny
11. 8 место - Shareaholic
12. 9 место - официальные кнопки
13. 10 место - Поделись этим
14. Результаты тестов - лучшие кнопки в социальных сетях
15. 2 место - Jetpack
16. 1 место - Пользовательские кнопки
17. Заключение

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

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

В основном их два:

1. Создание пользовательских кнопок
2. Используйте одно из существующих решений

Поскольку редизайн нашего нового бренда и веб-сайта не за горами (да, мы знаем, что XHTML больше не крутой), мы хотели бы принять обоснованное решение, когда речь заходит о замене кнопок «старой школы» в этом блоге.

Поэтому мы решили протестировать следующие популярные решения для кнопок социальных сетей на предмет производительности, возможностей, простоты настройки и вопросов конфиденциальности:

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

Как мы тестировали

Чтобы смоделировать сценарий реального мира, мы настроили тестовый сайт WordPress работает на тему Twenty Fifteen на нашем сервере предварительного просмотра. Затем мы создали образец блога без кнопок. Эта запись в блоге послужила отправной точкой, с которой мы могли бы сравнить все другие решения.

Мы установили решения для совместного использования в социальных сетях с использованием соответствующих плагинов WordPress и сделали копию образца блога для каждого решения. Для каждого решения мы установили 5 основных кнопок для каждого сообщения - Facebook, Twitter, LinkedIn, Google+ и Reddit.

Перед запуском теста для какого-либо конкретного решения мы обязательно отключили все остальные плагины, чтобы они не мешали.

Тест производительности и оценка

Мы использовали Webpagetest.org для тестирования производительности. Мы провели 2 теста для каждого поста в блоге: один из Сан-Франциско с подключением DSL, а другой из Франкфурта с подключением 3G . Каждый из тестов проводился 3 раза, и результаты сравнивались с нашим контрольным постом, у которого не было кнопок.

Оценить эффективность кнопок социальных сетей сложно.

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

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

Это также влияет на воспринимаемую производительность. Индекс скорости является хорошим показателем воспринимаемой производительности, однако он не может уловить некоторые проблемы, упомянутые выше.

Чтобы сделать результаты более объективными, мы сравнили все решения с результатами « Нет кнопок» и рассчитали разницу в показателях скорости , времени , количества запросов и размера для событий « Загруженный документ» и « Полная загрузка» . Для каждого из этих критериев (всего 7) мы определили рейтинг решения среди других. Наконец, мы составили сумму всех рангов, чтобы определить итоговый рейтинг производительности.

Проверьте электронную таблицу с все результаты и ссылки на тесты WebPagetest ,

Оценка конфиденциальности

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

Вам не нужны файлы cookie для работы функции обмена

Некоторые кнопки подтвердили это с нулевым набором файлов cookie, в то время как другие явно были скорее платформой отслеживания, чем просто общими кнопками.

Иногда дополнительные куки были установлены, когда пользователь нажимает на определенную кнопку общего доступа, когда социальная платформа вступает в игру. Это также вопрос того, как обмен осуществляется внутри плагина, потому что на самом деле не нужны файлы cookie для запуска функции обмена на вашей странице.

Однако мы не учли эти дополнительные файлы cookie, так как предполагали, что, когда пользователь решит нажать кнопку «Поделиться», он может знать о последствиях для конфиденциальности. Таким образом, основным критерием конфиденциальности остается то, устанавливает ли решение какие-либо файлы cookie, что может быть важно для тех посетителей, которые не заинтересованы во взаимодействии с кнопками социальных сетей на нашем сайте.

Особенности и настройка установки

Затем мы проверили, насколько легко было настроить решение и какие функции оно предлагает. Чтобы сделать это управляемым, мы сосредоточились на некоторых основных функциях, а именно:

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

Для оценки установки мы проверили:

• Если кнопки работают без регистрации - почему вы должны где-то зарегистрироваться, чтобы на вашем сайте был доступ к социальным сетям?
• Если у кнопок есть плагин WP - хороший плагин WP может облегчить администрирование
• Насколько легко их настроить - насколько просты первоначальная настройка и дальнейшие настройки

Для каждого из этих критериев мы присвоили баллы и рассчитали общие баллы.

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

Финальный ранг

Окончательный рейтинг был определен путем расчета баллов для каждого критерия - « Производительность», «Функции», «Конфиденциальность» и « Настройка», а также для каждого из них использовалась формула веса.

• Производительность - 40%
• Особенности - 30%
• Конфиденциальность - 20%
• Настройка - 10%

Результаты тестов - хорошо, плохо и безобразно

Прежде чем мы попадем в тройку победителей, давайте посмотрим на результаты, начиная с 4-го места и заканчивая худшим решением в нашем тесте.

4 место - Простые кнопки общего доступа

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

• Производительность - 6,8
• Особенности - 6
• Конфиденциальность - 10
• Настройка - 10
• Общая оценка - 7,5

Что касается производительности, Simple Share Buttons довольно специфичны в нашем тесте. Он имеет очень мало запросов и добавляет только 45 КБ на полностью загруженную страницу. Тем не менее, он страдал от большой задержки при загрузке первого байта и имел худший результат индекса скорости среди всей группы.

Простые кнопки общего доступа страдают от очень долгого времени до первого байта.

Это связано с тем, как работает Simple Share Buttons - кнопки загружаются не асинхронно с использованием JavaScript, а генерируются на странице в самом WordPress. Там нет никаких дополнительных файлов JavaScript или CSS и CSS встроен в страницу. У этого решения есть свои плюсы и минусы. Одним из недостатков является то, что все вычисления (например, определение количества общих ресурсов) должны быть выполнены до загрузки страницы, что препятствует быстрому рендерингу.

Даже с 9 различными наборами изображений счетчики кнопок выглядят немного старомодно. Подчеркивание ссылки происходит из темы Twenty Fifteen и должно быть удалено с помощью пользовательского CSS. Это показывает, что кнопки не полностью защищены от ваших собственных стилей.

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

Положительным моментом является то, что этот плагин не устанавливает файлы cookie, а интерфейс администратора WP очень прост в использовании.

Несмотря на первоначальную критику, этот плагин может быть одним из лучших решений, особенно если вы платите за дополнительные возможности в версии Plus (10 долларов США за сайт). Плюс версия может решить большинство проблем, которые у нас возникли с плагином - он может скрывать нули и должен загружаться быстрее с подсчетом общего ресурса в кэше (это может улучшить время до первого байта, но мы его не тестировали).

5 место - Вспышка накаливания

Flare не очень хорошо справляется с размещением нижних кнопок, но это может быть специфической проблемой с темой Twenty Fifteen.

• Производительность - 6,5
• Особенности - 6
• Конфиденциальность - 10
• Настройка - 5
• Общая оценка - 6,9

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

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

Flare также является единственным решением, которое буквально не работает на мобильных устройствах - оно не ломается, просто не отображается вообще. Это потому, что мобильная поддержка включена только в Pro версия ($ 89 / год).

Производительность Flare приличная, и он не устанавливает никаких файлов cookie, но ограниченные возможности и громоздкие настройки препятствовали лучшему результату в нашем тесте.

6 место - Добавь это

AddThis показывает только агрегированное количество, а также, кажется, считает неправильно. Этот пост был опубликован только один раз в целях тестирования.

• Производительность - 6,8
• Особенности - 6
• Конфиденциальность - 2,5
• Настройка - 10
• Общая оценка - 6,0

AddThis показала второе место в нашем тесте, однако, как и у других конкурентов, это была не удивительная производительность (хотя это всего лишь 6,8 из 10).

Одна из проблем с AddThis состоит в том, что он не показывает отдельные акции - только агрегированное количество. Кроме того, количество акций увеличивается сразу после нажатия кнопки, а не когда вы на самом деле делитесь контентом, что вызывает некоторые вопросы о том, как подсчитываются акции. В нашем случае публикация в блоге была опубликована только один раз, но счетчик показывает 3 публикации, возможно потому, что мы нажали кнопку Twitter 3 раза.

Как и большинство других решений, AddThis не позволяет использовать обе кнопки Facebook Like & Share в одном наборе.

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

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

С другой стороны, плагин WP прост в использовании и настройке.

7 место - AddToAny

По какой-то причине AddToAny может отображать только стандартные кнопки Google.

• Производительность - 3.3
• Особенности - 7
• Конфиденциальность - 7,5
• Настройка - 10
• Общая оценка - 5,9

Одной из проблем кнопок AddToAny была ее производительность. По-видимому, кнопки не загружаются асинхронно и выполняют 16 запросов и загружаются за 400 КБ до события завершения документа.

Кнопки не могут скрывать нули (в данном случае действительно большие), и по какой-то причине отображаются только стандартные кнопки Google, которые не позволяют им выглядеть согласованно.

Сам по себе AddToAny устанавливает только 1 cookie (2 других - от Google), а WP Admin является стандартным с четкими настройками.

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

8 место - Shareaholic

Шаохолические пуговицы

• Производительность - 3,5
• Особенности - 9
• Конфиденциальность - 0
• Настройка - 5.8
• Общая оценка - 4,7

Shareaholic сделал большинство запросов из всех решений на полностью загруженной странице - 53, и вскоре мы увидим, почему. Очевидно, что при большом количестве запросов ваша производительность всегда будет средней или низкой.

Кнопки выглядят красиво и отображаются последовательно. С WP администратором не сложно ориентироваться, но вы должны создать учетную запись на Shareaholic.

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

Shareaholic может быть легко переименован в Cookieaholic

Некоторые доменные имена, для которых установлены сторонние файлы cookie: w55c.net, openx.net, nexac.com, ih.adscale.de, yahoo.com, bidswitch.net, casalemedia.com. разбивка контента по доменам пугающая и проясняет, какова основная цель этой платформы - отслеживание пользователей и монетизация.

Если вы знаете, что делаете (например, ищете «Платформу для усиления контента»), вы можете попробовать Shareaholic, но в противном случае лучше держаться подальше от него, чтобы на следующий день не проснуться от похмелья.

9 место - официальные кнопки

Добиться последовательного внешнего вида с помощью официальных кнопок было бы сложно.

• Производительность - 1,3
• Особенности - 6
• Конфиденциальность - 8,3
• Настройка - 5
• Общая оценка - 4,5

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

Производительность является вторым худшим в тесте с наибольшим общим размером файла как для завершенного документа, так и для полностью загруженных событий. Это неудивительно, поскольку кнопки предоставляются разными поставщиками и не могут выиграть от объединения ресурсов.

Конфиденциальность, на удивление, не представляет большой проблемы: только 1 файл cookie установлен Google, а 1 - Reddit. Если вы верите в доброжелательность крупных корпораций, вам не о чем беспокоиться (по крайней мере, вы знаете, что за вами будет следить кто-то, кто вас уже отслеживает).

Конечно, для официальных кнопок нет общего WP-плагина, который делает настройку и обновления трудными и негибкими. Никто не хотел бы иметь дело с этим, если есть лучшие варианты для WordPress.

Таким образом, официальные кнопки скорее служат для сравнения в этом тесте.

10 место - Поделись этим

ShareThis кнопки отображаются хорошо, но минималистские без счетчиков

• Производительность - 1
• Особенности - 7
• Конфиденциальность - 4.2
• Настройка - 9
• Общая оценка - 4,2

ShareThis показал худшее в нашем тесте. Он выполнил наибольшее количество запросов (36) и имел 2-й по величине размер файла (469 КБ) в событии завершения документа. Что бы он ни делал (или думает, что должен), это не лучшая отправная точка - это все равно что начать свой триатлон носить один из них ,

ShareThis предлагает несколько вариантов отображения кнопок, но минималистский набор не отображает счетчики. Кнопки со счетчиками в нашем случае отображались некорректно:

Интерфейс администратора WordPress не очень удобен с опциями, разбитыми на 6 шагов, которые вы должны проделывать много раз, если хотите что-то изменить.

Как и AddThis и Shareaholic, ShareThis также является одной из тех «платформ», которая устанавливает множество файлов cookie и большое количество запросов на сторонние домены. Является ли это намеренной или необработанной технической проблемой, вместе с другими проблемами это делает ShareThis худшим решением в нашем тесте.

Результаты тестов - лучшие кнопки в социальных сетях

3 место - Поделиться СумоМе

ФИЛЬМЫ ПОХОЖИЕ НА Flare by Filament Даже в том смысле, что он «неправильно» прикреплен к нижней части блога в теме «Двадцать пятнадцать».

• Производительность - 5,9
• Особенности - 10
• Конфиденциальность - 9,2
• Настройка - 5
• Общая оценка - 7,7

Share by SumoMe похож на родного брата Flare от Filament. Опять же, это набор инструментов, на которые вы должны зарегистрироваться. После того, как вы установите плагин WP, вы можете загрузить свою учетную запись SumoMe. В отличие от Flare, интерфейс администратора отображается в виде оверлея внутри WP, и обновление ваших кнопок намного проще.

SumoMe превосходит Flare и в плане бесплатных функций - по умолчанию он работает на мобильных устройствах и позволяет одновременно отображать Facebook Share и Like в виде двух разных кнопок.

С другой стороны, он не избежал установки хотя бы одного файла cookie (хотя это файл cookie первого лица), и его оценка производительности немного хуже, чем у Flare. Тем не менее, 3-е место показывает, что хороший пользовательский опыт и хорошо сбалансированные функции играют важную роль в рейтинге любого программного обеспечения.

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

2 место - Jetpack

Jetpack предлагает 2 основных стиля кнопок, здесь отображаются значки с текстом (значки без текста - округленные минималистские значки).

• Производительность - 6,2
• Особенности - 10
• Конфиденциальность - 10
• Настройка - 6,7
• Общая оценка - 8,1

Jetpack - еще одно конкретное решение в нашем тесте. Это плагин, который предоставляет различные расширенные функциональные возможности WordPress.com для сайтов WordPress. Всего около 35 разных функций и одним из них является обмен функциональными возможностями кнопок. Одним из недостатков Jetpack является то, что он заставляет вас подключать свой сайт к учетной записи WordPress.com.

Доступные кнопки обмена в настоящее время ограничены Facebook, Twitter, LinkedIn, Reddit, Google+, StumbleUpon, Tumblr, Pinterest и Pocket, но вы можете добавить новый сервис обмена через диалог администратора WP. Акции учитываются правильно.

Имейте в виду, что даже если вы хотите использовать простую функцию обмена, Jetpack может активировать другие функции после установки плагина. Так что просмотрите и отключите те, которые вам не нужны для лучшей производительности. Разработчики Jetpack также могут оптимизировать производительность, например, библиотека JS для совместного использования не полностью минимизирована.

Jetpack (по крайней мере, с одной только функцией обмена) не устанавливает файлы cookie. Его администратор WP прост в использовании и, очевидно, очень похож на самого администратора WP.

Jetpack продемонстрировал хорошее сочетание достойной производительности, функций и конфиденциальности, что позволило ему занять 2-е место в нашем тесте.

1 место - Пользовательские кнопки

Пользовательские кнопки с использованием иконок Genericons из темы Twenty Fifteen.

• Производительность - 9,0
• Особенности - 8
• Конфиденциальность - 10
• Настройка - 5
• Общая оценка - 8,5

И победитель …. не удивительно Пользовательские кнопки обеспечивают лучшую производительность и при небольшом усилии также лучшую гибкость из всех решений. В дополнение к отличной производительности, одним из самых больших преимуществ является то, что вы можете легко настроить кнопки в соответствии с дизайном вашего сайта и адаптировать их к вашему общему UX.

Мы реализовали пользовательские кнопки, используя значки Genericons, доступные в теме Twenty Fifteen и Barebones Share Buttons библиотека, которая также подсчитывает количество акций. По умолчанию счетчики Facebook и Twitter доступны, но не должно быть сложным добавить счетчики и для других провайдеров.

По умолчанию отображаются нули, но, опять же, это то, что может быть обработано простым обновлением библиотеки.

Добавление подсчетов для других поставщиков может незначительно повлиять на производительность с дополнительными запросами. Если ваша главная задача - высочайшая производительность, вы должны использовать такую ​​услугу, как SharedCount и запрос его API за количество акций для каждой услуги одновременно. Бесплатный сервис предлагает 1000 запросов в день (или 10000, если вы позже войдете в учетную запись Facebook).

В таком случае решение действительно будет просто использовать URL социальных сетей в ссылках или кнопках общего ресурса, а также для определения количества акций с помощью API SharedCount.

Заключение

Мы понимаем, что некоторые наши критерии оценки могут быть субъективными. Вот почему мы сделали электронная таблица с результатами доступна здесь , Он включает в себя подробные результаты производительности, ссылки на тесты веб-страниц и наш рейтинг возможностей. Вы можете сделать копию этого и играть с критериями и их весом. Например, если вы увеличите вес конфиденциальности, результаты могут отличаться.

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

Это требует определенных усилий и может оказаться не таким уж изощренным, как некоторые другие решения в тесте, но вы будете полностью контролировать код кнопок и сможете настроить их в соответствии с потребностями своего бренда и UX. Как вы можете видеть, счетчики (одна из вещей, которые отличают кнопки социальных сетей от простых URL-адресов социальных сетей) также можно выполнять с помощью пользовательских кнопок.

Если вам требуются или могут быть использованы дополнительные функции, то вторым выбором могут стать такие решения, как кнопки Jetpack, Share by SumoMe или Simple Share. Используйте наш тест, чтобы помочь вам решить, стоят ли потенциальные компромиссы в производительности и конфиденциальности.

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