КАК УВЕЛИЧИТЬ КОНВЕРСИЮ, УСКОРИВ ЗАГРУЗКУ САЙТА

Подробности

Просмотров: 6691

Влияет ли скорость загрузки сайта на его ранжирование в поиске — вопрос спорный. Марк Ишэм (Mark Isham) из компании Zoompf считает, что этот фактор так или иначе является поведенческим и в любом случае влияет на ранжирование, пусть и опосредованно, с отложенным эффектом. Предлагаем вашему вниманию перевод свежей статьи Марка, написанной для Moz.com.

В августе этого года команда Zoompf опубликовала подготовленное вместе с Moz исследование «Как скорость загрузки сайта влияет на его позиции в поиске». Удивительным результатом исследования стало отсутствие чёткой корреляции между скоростью загрузки страницы и ранжированием в поиске. Это сбило нас с толку, поскольку мы ожидали увидеть хотя бы какую-то корреляцию, особенно учитывая сделанное в 2010 году заявление Google о том, что скорость сайта частично влияет на ранжирование в поиске. При этом мы увидели корреляцию между временем до первого байта и ранжированием, о чём подробно написали во втором постинге.

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

Но насколько высок этот приоритет?

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

А вот что удивительно, так это степень влияние низкой производительности сайта на конверсии. Давайте сначала на это и посмотрим.

Исследование

В 2006 году компания Amazon представила одно из первых исследований, отмечающих прямую причинно-следственную связь между скоростью загрузки страницы и прибылью в ecommerce. Резюме результатов исследования представлено в презентации Грега Линдена "Make Data Useful". При помощи A/B-тестирования Грег показал, что каждая задержка загрузки страницы на 100мс приводит к 1% потере продаж на Amazon.

Есть и более свежее исследование "Velocity 2013", представленное компанией Intuit. Исследование является результатом работы специалистов компании по снижению скорости загрузки страниц с 15 до 2 секунд. Работая над этим проектом, они увидели существенное увеличение конверсии каждый раз, когда снижали время загрузки на секунду. Цифры получились следующими:

• +3% конверсий на каждую секунду при снижении с 15 до 7 секунд;
• +2% конверсий на каждую секунду при снижении с 7 до 5 секунд;
• +1% конверсий на каждую секунду при снижении с 4 до 2 секунд.

Таким образом по мере ускорения сайта прирост конверсии уменьшается.

В другом недавнем отчёте Кайл Раш (Kyle Rush), занимавшийся сайтом кампании "2011 Obama for America", при помощи A/B-тестирования показал, что ускорение загрузки сайта на 3 секунды (с 5 до 2) увеличило пожертвования на 14%, дав прирост в более чем 34 млн долларов.

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

Как быстро должен грузиться сайт?

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

Существует более прагматичный подход: оптимизируйте скорость загрузки до тех пор, пока это экономически оправдано. Как уже говорилось выше, чем больше трафик, тем больше отдача от каждой миллисекунды. Если у вас сайт вроде Amazon.com, разница в 200мс будет «стоить» миллионы долларов. Если вы только готовитесь запустить новый сайт, снижение скорости загрузки до 4—6 секунд может быть достаточным. Исходите из текущего трафика, положения дел у конкурентов, бюджета и собственных стратегических приоритетов.

Для начала составьте объективное представление о положении дел со скоростью загрузки. Такие инструменты как WebPageTest.org помогут вам протестировать скорость загрузки страниц из разных географических точек.

С чего начать?

Повышение производительности сайта может казаться утомительной работой, поэтому важно начать с задач, лежащих на поверхности. Как сказал Стив Саундерс (Steve Souders), главный инженер по производительности в Google, 80-90% времени отклика для конечного пользователя приходится на фронт-энд, с него и начните.

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

Иллюстрацию этого правила можно увидеть на каскадном графике загрузки страницы, который рисуют инструменты вроде WebPageTest.

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

Шаг 1: уменьшите размер страницы

Раздутый контент грузится очень долго. Даже простое сжатие данных может уменьшить размер текстовых ресурсов (HTML, CSS и JavaScript) вдвое и больше. На сайте WhatsMyIP.org есть отличный бесплатный инструмент, показывающий, включено ли сжатие на вашем сайте. При тестировании проверяйте не только главную страницу, но и ссылки на файлы JavaScript и CSS. Мы нередко встречаем случаи, когда сжатие включено для HTML, но отключено для JavaScript и CSS.

А вот компрессировать изображения не стоит. Эффективность сжатия таких данных низкая, а нагрузка на сервер растёт, замедляя обработку запросов. Подробнее о том, какие данные надо компрессировать, вы можете узнать из вот этого руководства.

Если вы считаете, что сжатие на вашем сервере не включено, попросите администратора или провайдера хостинга включить его. Зачастую это решается очень просто, см. справку по модулю mod_deflate для Apache, документацию по настройке IIS 7, или вот статью о том, как включить сжатие на сайтах на основе WordPress.

Кроме того, изображения могут занимать более 80% от общего веса страницы при её скачивании, поэтому их тоже нужно оптимизировать. Следующие рекомендации помогут вам сократить их размер на 50% и более:

• Не используйте PNG для фотографий. Изображения в формате JPEG сжимают фотографии до существенно меньшего размера, сохраняя хорошее качество. Например, в день запуска Windows 8 на главной странице Microsoft использовалось изображение весом в 1 мегабайт в формате PNG, хотя неотличимый на глаз аналог в JPEG весил бы всего 140 килобайт! Представьте себе, сколько трафика было «накручено» напрасно одним лишь этим изображением.
• Не увлекайтесь применением PNG ради полупрозрачности. Полупрозрачность — отличный эффект (не поддерживаемый JPEG), но если он вам особенно не нужен, то и PNG нужен не больше. Используйте PNG для логотипов и изображений с резким контрастом (например, изображений с текстом).
• Корректно указывайте значение качества в JPEG. При значении качества в 50-75% конечный вес изображения намного меньше, а на изображение всё ещё можно смотреть не морщась. Разумеется, каждый случай надо рассматривать отдельно. Но в большинстве случаев изображение должно весить меньше 100 килобайт.
• Удаляйте метаданные из файлов изображений. Графические редакторы сохраняют в изображениях много мусора: миниатюры, комментарии, неиспользуемые цвета из палитры и т.д. Они полезны для дизайнера, но конечным пользователям совершенно не нужны. Поэтому пусть дизайнер хранит у себя оригинал со всеми нужными данными, а для публикации на сайте отдаёт более чистую копию, пропущенную через оптимизатор вроде Yahoo Smush.It или программы pngcrush и jpegtran.

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

Исходный код JavaScript

 /* ALERT PLUGIN DEFINITION
  * ======================= */
  var old = $.fn.alert
  $.fn.alert = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('alert')
      if (!data) $this.data('alert', (data = new Alert(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }
  $.fn.alert.Constructor = Alert

А вот его сокращённая версия, полученная с помощью YUI Compressor:

var old=$.fn.alert;$.fn.alert=function(a){return this.each(function()
{var c=$(this),b=c.data("alert");if(!b)
{c.data("alert",(b=new Alert(this)))}if(typeof a=="string")
{b[a].call(c)}})};

Страницы с подобным минимизированным кодом показываются точно так же, но грузятся на 10-20% быстрее, а то и больше. Кроме того, сам код становится менее разборчивым для желающих бесплатно воспользоваться плодами вашего труда. Плагины для минимизации JavaScript и CSS существуют практически для всех популярных CMS. При необходимости вы также можете воспользоваться JSCompress, JSMin или Yahoo YUI (он работает и с CSS). У YUI есть и онлайновая версия.

Шаг 2: уменьшите количество запросов от браузера

Чем больше ресурсов ваш браузер запрашивает у сервера, тем больше запросов надо обработать серверу, и тем дольше грузятся страницы. Удачной стратегией снижения скорости загрузки страницы является уменьшение количества запросов. Это означает меньше изображений, меньше файлов JavaScript, меньше используемых инструментов веб-аналитики и т.д. Главная страница выглядит по-спартански не просто так: она загружает очень немного ресурсов и потому грузится очень и очень быстро.

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

• Разрешите кэширование браузером. Если ресурсы страницы меняются не очень часто, нет причин, по которым нужно каждый раз заново их загружать с сервера. Пусть администратор включит кэширование для изображений, JS и CSS. Если вы не знаете, включено ли на вашем сервере кэширование, протестируйте страницу сайта на redbot.org посмотрите на заголовок Expires или Cache-Control: max-age на странице с результатом.

Cache-Control — более новый способ кэширования, а Expires используется сейчас преимущественно для поддержки старых версий браузеров.

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

• Объединяйте связанные файлы CSS и JS. Поддерживать отдельные файлы CSS и JS для разработчика проще, но конечному пользователю важно, чтобы сайт грузился быстрее, а значит и файлов с сервера должно скачиваться меньше. Если вы редко меняете эти файлы, вам может помочь их единоразовое объединение. Если же файлы меняются часто, при выкладывании обновлённой версии на рабочий сервер можно объединять связанные файлы автоматически. У каждого из этих подходов есть свои плюсы и минусы, рекомендуем почитать вот этот тред на StackOverflow.
• Объединяйте маленькие изображения в спрайты CSS. Если на вашем сайте используется много маленьких изображений (кнопок, иконок и т.д.), вы можете существенно увеличить скорость загрузки, объединив их в один файл, называемый спрайтом. В этом случае браузер скачает всего один файл (сделав один запрос), а затем «вырежет» из него нужные фрагменты. Подробнее об этом приёме вы можете узнать из статьи "CSS Image Sprites" на, а бесплатный инструмент создания CSS-спрайтов есть на SpriteMe.

Шаг 3: уменьшите расстояние до сайта

Если сайт хостится в Европе, а ваши пользователи живут в Новосибирске, файлы изображений, JavaScript и CSS будут идти до них сравнительно долго. Если ваш сайт увешан графикой, замедление загрузки из-за удалённости сервера от пользователей может неприятным образом влиять на скорость загрузки страниц и, соответственно, конверсию. Неплохим решением здесь является использование сети доставки данных (content delivery network, или CDN). Популярными западными CDN являются Akamai, Amazon CloudFront, CloudFlare и другие. В России более актуальны местные решения, такие как NGENIX и CDNvideo.

Сеть доставки контента хранит копии ваших данных на серверах, размещённых в разных географических точках. Допустим, вы меняете URL ресурса с такого:

http://mysite.com/myimage.png

на такой:

http://d34vewdf5sdfsdfs.cloudnfront.net/myimage.png

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

В заключение

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

При всём многообразии способов ускорить загрузку сайта существует три главных рекомендации:

1. уменьшите размер скачиваемой страницы;
2. уменьшите количество запросов к серверу;
3. уменьшите расстояние между пользователями и сервером.

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

Мы также можем порекомендовать вам две книги на русском языке по теме ускорения сайта:

• «Разгони свой сайт. Методы клиентской оптимизации веб-страниц», Николай Мациевский.
• «Реактивные веб-сайты», Николай Мациевский, Евгений Степанищев, Глеб Кондратенко.

Статья основана на материале публикации "How to Improve Your Conversion Rates with a Faster Website" в блоге Moz.com.

• < Назад
• Вперёд >