Недавно я работал над небольшим RWD-сайтом, который должен был заменить мегабайтное чудовище. Оригинальный сайт достигал почти 3,5 Мб в размерах, зависал в некоторых браузерах и был непригоден для мобильных устройств. Я выжал каждый байт из нового сайта …
- минимальный, чистый HTML5 был принят
- единственная добавленная прокладка была для HTML5 на oldIE
- тенденция к чистому, плоскому, квадратному дизайну сократила количество CSS-кода и графики
- CSS3 переходы и анимация были использованы в пользу альтернатив JavaScript
- CSS3-эффекты и небольшой набор веб-шрифтов заменили многие изображения
- JavaScript не был необходим, но небольшое прогрессивное улучшение было реализовано без использования большой библиотеки.
Результат: общий размер домашней страницы менее 300 КБ, а всех остальных страниц — менее 90 КБ, включая все изображения, без сжатия или минимизации кода. Сайт быстро загружается на всех устройствах независимо от подключения.
Клиенту это нравилось… но не хватало одной вещи: кнопки обмена в социальных сетях . Я получил несколько монологов от менеджеров по медиа-маркетингу о важности этих ключевых элементов в современной сети.
Социальная афера
Гуру социальных сетей не обращают внимания на то, что очень немногие страницы становятся вирусными. На каждое интернет-явление существуют миллиарды людей и компаний, которые никогда не достигали культового статуса. Добавление социальных кнопок на все страницы кажется хорошей идеей, но никто не собирается «нравиться» этическим утверждениям вашей компании или «делиться» фотографиями генерального директора.
«Ааа» , утверждают медиа-мастера, «но какой вред в том, чтобы облегчить обмен контентом?» . Я дам вам несколько причин …
Кнопки перебора полосы пропускания
Ищите «Facebook как кнопка», и вы скоро найдете их полезными Получить инструмент кода . Заполните детали, скопируйте десять строк сценария, вставьте его на свою страницу, и работа сделана.
Хотя он может выглядеть как несколько незначительных строк, он загружает различные ресурсы в фоновом режиме. Эта крошечная кнопка Facebook «Нравится» требует избыточного 270 КБ сжатого кода и нескольких HTTP-запросов. Почему? И давайте не будем забывать о других популярных социальных сетях …
| Кнопка «Мне нравится» на Facebook: | 270KB |
| Кнопка Google+ Share: | 135Kb |
| Кнопка Twitter Поделиться: | 95Kb |
| Кнопка Поделиться LinkedIn: | 80Kb |
Хотите все четыре? Это будет 580 Кб, пожалуйста — или более 10 секунд при хорошей мобильной связи. Эти крошечные кнопки были почти в семь раз больше страниц, на которых я их требовал.
Следует признать, что некоторые из сценариев будут кэшироваться в браузере, потому что пользователь посетил другой сайт с помощью аналогичных кнопок. Но это не означает нулевую стоимость; сценарии все еще должны быть проанализированы и выполнены браузером, прежде чем он сможет загружать или отображать другой контент. Facebook даже предлагает добавить свой код сразу после открывающего тега body
Кто будет «лайкать» страницу, которая стала менее отзывчивой?
Время тестирования
Несколько социальных кнопок не работают, если они не добавлены на общедоступную веб-страницу. Другими словами, они не появятся, когда вы тестируете сайт на локальном компьютере или в интрасети. Чтобы кнопки не нарушали ваш макет, вы должны загрузить страницы на работающий сервер — возможно, на ваш настоящий веб-сайт. Вы запускаете другой код перед тестированием?
Социальное обеспечение
Разрешите ли вы любому разработчику зайти на ваш сайт и делать то, что ему нравится? Нет? Кнопки социальных сетей вставляют JavaScript на вашу страницу, и этот код имеет те же права, что и у вас. Он может делать все что угодно: заменять контент, портить изображения, захватывать ссылки, показывать рекламу, перенаправлять в другие места и т. Д.
Хотя ни одна из социальных сетей не будет заниматься такой деятельностью, вы:
- понять, что весь этот раздутый код делает во всех социальных сетях?
- Верите, что во всех социальных сетях есть протоколы для предотвращения косвенных или преднамеренных атак со стороны внутренних сотрудников и внешних взломщиков?
- тестировать весь код на всех устройствах, когда он меняется?
- знаете, что весь код будет работать во всех браузерах в любое время? Одна ошибка, вызванная одной из этих кнопок, может предотвратить последующее выполнение JavaScript и сломать ваши страницы.
Вы можете иметь социальный торт и съесть его!
Социальные сети выживают только в том случае, если их используют. Они предоставляют простые в использовании кнопки обмена, чтобы стать более ценным ресурсом и побудить людей присоединиться. Ваш сайт может пользоваться паразитическими преимуществами, но не забывайте, что это сети, которые больше всего выигрывают.
К счастью, можно реализовать кнопки общего доступа без смехотворной пропускной способности или издержек безопасности. Методы не всегда хорошо обнародованы, но я покажу, как это сделать, в моей следующей статье SitePoint …