Позаботьтесь о быстрой загрузке ваших Лендов

Мой перевод статьи от ClickDealer Team, ребят из замечательной партнерской сети ClickDealer
Ссылка на оригинал http://blog.clickdealer.com/making-your-landing-pages-load-fast/

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

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

Небольшие библиотеки.

Скорее всего у вас ленд включает в себя несколько библиотек. Обычно это Bootstrap или Foundation для ваших стилей и jQuery для скриптов. Конечно же они облегчают реализацию задач, но это может обходиться довольно дорого. Дело в том, что они содержат очень большое количество функций, но лишь немногие из них используются регулярно. Взгляните на них внимательно и удалите всё, что вам не нужно или попробуйте найти библиотеки, которые содержат только те инструменты, которые вам действительно необходимы.

Оптимизируйте HTML/CSS framework.

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

Попробуйте найти альтернативу библиотеке Javascript

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

Попробуйте найти альтернативу для библиотек HTML/CSS

Конечно распространенные фреймворки Bootstrap и Foundation очень хороши, но всё же они слишком громоздкие. В большинстве случаев вам необходима только основа, а остальное вы обычно дописываете сами. В таком случае вам лучше взглянуть в сторону библиотек SimpleGrid, Pure or Kube.

Оптимизируйте ваши скрипты и стили.

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

Для оптимизации есть много инструментов, но есть и внешние ресурсы, которые вам помогут с этим.

Вот несколько из них:
Online JavaScript/CSS Compressor
Online Javascript Compression Tool
Minify your CSS

Сжимайте ваши изображения

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

Вот несколько сайтов, которые помогут значительно уменьшить размер изображений:

TinyPNG
TinyJPG
Compressor

Удалите ненужный код

Зачастую страницы содержат очень много кода, который в действительности не используется. Элементы HTML, CSS or JavaScript, которые не используется следует обязательно удалить чтобы сделать страницу настолько легче, насколько это возможно.

Опять же есть несколько инструментов, которые вам позволят обнаружить и удалить не используемый код:

Unused CSS
Dust-Me Firefox Extension

Используйте CDN

Сеть доставки (и дистрибуции) контента

CDN – замечательный инструмент для оптимизации ваших страниц. Кроме того jQuery, Bootstrap и другие библиотеки прекрасно с ней работают.

Также почему так важно использование CDN можно почитать по этой ссылке (англ.)

автор данной статьи:


Дополнительные материалы для изучения от Mia (автора этого блога):

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

Конечно же не все из нас программисты, даже мало кто хорошо владеет HTML и CSS. Поэтому часто мы не делаем ленды сами, а просто рипаем их у конкурентов и видоизменяем/правим/либо оставляем как есть.

Для этого я лично использую дополнение для браузера Firefox Scrapbook.
Есть еще несколько распространенных утилит для таких целей, могу отметить Teleport Pro, HTTrack Website Copier для Windows либо SiteSucker для мака. Как раз для такого случая очень подойдёт эта статья, тк ленды часто содержат ненужные или вообще вредоносные скрипты, которые следует аккуратно выпилить, не повлияв на работу ленда.

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

Как это делается.
1. Загружаете картинку через какой-нибудь веб-сервис типа dailycoding
2. Получаете набор символов вида

3. Этим набором символов просто заменяете картинку, которую мы загрузили в нашем css-коде. Вот таким образом:

background-image: url(“data:image/ТИП;base64,КОД”);

(где ТИП – тип нашей картинки PNG, JPG и тп, а код – собственно то, что мы получили выше)

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

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

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

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

  • Rents

    Mia, в одном из твоих недавних переводов (http://goo.gl/xrAuDf) крутые аффы с STM в качестве инструмента для создания лендов упоминают Adobe Muse. Его также советуют в некоторых других источниках (например, я встречал в методичке у Taiwo). На твой взгляд, имеет ли смысл использовать Muse или лучше подтянуть знание css/javascript и стараться всегда все запихивать в одну страницу? И можно ли компенсировать использование Muse просто достаточно мощным сервером + CDN?

    • Я лично знаю HTML+CSS+javascript на элементарном уровне, что позволяет мне редактировать ленды самостоятельно с помощью Notepad++ или же Coda и быть уверенной в том, что они хорошо работают. Если мы сейчас говорим про мобайл траф, то лучше не использовать тяжелых лендов, а также редакторов, они просто не понадобятся. Для редактирования мобильного ленда будет с головой хватать блокнотов выше.
      Если есть желание изучить еще и Adobe Muse или другие редакторы, можно конечно, почему нет, тут скорее речь не про необходимость, а кому как нравится.
      Ребята рекомендуют Adobe Muse как доступный вариант для вебдизайна, но лично я не вижу в ней такой уж необходимости.

      Кстати на эту тему лучше прочитать статью http://ru-affiliate.info/making_landingpage/
      Там приведён простой пример рабочего ленда по мобайл, кода в целом не так уж много, для изучения и понимания основ вполне сгодится.

      В общем и целом есть два пути:
      1. Используем для лендов наёмный труд (фрилансеры, кодеры, дизайнеры)
      2. Делаем сами. Изучаем основы HTML+CSS+javascript, а в данном случае какой именно используем инструмент – дело третье, это же не волшебная палочка, код всё равно придётся понимать в конечном итоге. Кроме того может взять чужой рабочий ленд и подправить.

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

      • Rents

        Понял, спасибо!