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

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

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

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

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

У проекта может быть удобный интерфейс, продуманный современный дизайн, но какой из этого толк, если пользователь просто уйдет с него? Если на ПК с высокоскоростным соединением эта проблема не так ощутима, то для мобильных пользователей это может стать катастрофой.

Amazon и 100 миллисекунд задержки

В 2016 году, в США, продажи в сфере электронной торговли  выросли на 15,6%, из которых 11,7% принадлежат Amazon. В I квартале 2017 г. чистая прибыль увеличилась на 41% до $724 млн. Это означает, что фактическая капитализация Amazon является большей, чем общая сумма розничных торговцев США. На протяжении двух десятилетий, специалисты этой компании преуспели сфере онлайн бизнеса.

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

Как время влияет на конверсию?

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

Компании, инвестирующие в оптимизацию интерфейса для «мобильных» пользователей, имеют в среднем на 30% больше продаж. Многие компании уже осознали важность пользователей, использующих мобильные телефоны и планшеты, причем не редко, большая часть продаж поступает именно от этой категории посетителей. Онлайн-магазин спортивной одежды «Fanatics» обнаружил, что именно с мобильных телефонов совершается 56% продаж в День благодарения. Оптимизация скорости загрузки страниц увеличила конверсию на 26%.

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

  • Страницы, загруженные на ПК за 1.8 секунд имели самую большую конверсию — 12.8%;
  • Страницы, загруженные на мобильных устройствах за 2.7 секунд конвертировались в 3.3%;
  • На планшетах, максимальная конверсия в 7.2% была достигнута за 1.9 секунд загрузки.
Рейтинг конверсии для Desktop, Mobile, Tablet

Следует вывод, что оптимальное время загрузки составляет от 1.8 до 2.7 секунд, в зависимости от типа устройства. И тут, наблюдается интересная закономерность — страницы, загруженные за 2.8 секунд (всего на 100 миллисекунд медленнее) потеряли 2.4% конверсии. Для мобильных телефонов и планшетов потери составили 7.1% и 3.8% соответственно.

Детализированный рейтинг конверсии для Desktop, Mobile, Tablet

Как можно заметить на графике, процент продаж резко снижается после уменьшения скорости загрузки сайта.

Так же, аналогичные исследования провели и другие, не менее известные компании. Facebook, например, добавили серверную задержку перед выдачей страниц в 0.5 секунд. Задержки уменьшили просмотры на 3%.

Еще одна причина важности «быстроты» сайта — техническая. Для обработки «тяжелого» сайта, требуется куда больше ресурсов, чем на обработку более легкого и быстрого. Отсюда вытекают большие расходы на сервер, что опять же, снижает чистую прибыль.

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

Скорость сайта: основные компоненты

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

  1. Подключение к серверу
  2. Запрос HTML-страницы и ее загрузка на машину клиента
  3. Разбор кода страница, построение очереди для подгрузки ресурсов
  4. Загрузка и выполнение CSS и JS
  5. Начало отрисовки страницы
  6. Загрузка шрифтов, изображений и прочих элементов
  7. Окончание отрисовки страницы, выполнение отложенного кода

Время загрузки страницы можно разделить на 4 составляющих:

  1. Время между отправкой запроса и получением первых данных (время ответа сервера)
  2. Начало «рендеринга» — время между получением данных и началом отрисовки (когда на «белом экране» начинает появляться страница)
  3. Загрузка всех зависимых ресурсов — загрузка и обработка всех CSS, JS и т.д.
  4. Полная загрузка страницы — все ресурсы загружены, страница отрисована, отложенные скрипты выполнены, пользователь видит «готовую» страницу.

Одним из самых мощных инструментов тестирования скорости является «Google PageSpeed Insights». С помощью этого инструмента можно узнать скорость загрузки страницы, «проблемные места» а также получить советы по оптимизации, в случае найденных проблем.

Оптимизация скорости загрузки

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

Для скриптов доступен атрибут «async», позволяющих загружать их параллельно страницы. Но использовать его нужно с осторожностью. Файлы стилей можно разделить на 2 части — «основные», необходимые для стилизации основных элементов и стили для всего остального. «Основные» стили можно подключить в секции <head>, это позволит стилизовать «критичные» элементы сайта с минимальными задержками и избежать «белого экрана». Остальные стили подключаются после загрузки контента. 

Для подгрузки графики можно задействовать плагин «Lazy Load», который загрузит только те изображения, которые находятся в области просмотра.

Кроме оптимизации путей, не стоит обделять вниманием сами CSS и JS файлы. Все файлы должны быть минимизированы (удалены все пробелы, переносы строк и комментарии). Несколько файлов лучше объединить в один, существенно уменьшая количество запросов к серверу.

Следующий этап — оптимизация изображений. В большинстве случаев, изображения составляют большую часть «веса» страницы. Первое, что нужно сделать — правильно выбрать формат изображений. Для векторной графики (логотип, иконки, простейшие графические элементы) нужно использовать SVG, для изображений с прозрачностью — PNG, а все остальное — JPG.

В дополнение к этим форматам существует форма WebP, который позволяет сжимать изображения без потерь на 26% лучше, чем PNG и на 25-34% лучше JPEG. Но, к сожалению, этот формат поддерживается еще не всеми браузерами и искажает изображение, добавляя эффект «постеризированности».

Для всех форматов имеется множество инструментов, позволяющих производить эффективное сжатие, без потери качества, например tinypng.com и tinyjpg.com. Для сборщиков фронтенда, типа GULP неплохо зарекомендовал себя плагин «imagemin». Так же SVG-иконки можно объединить в «иконочный шрифт» и использовать их, как обычные символы.

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

Также не стоит забывать про оптимизацию запросов на серверной стороне проекта.

Подведем итоги

Скорость загрузки сайта — один из ключевых факторов, оказывающих влияние на бизнес. Медленная загрузка может свести на нет все усилия маркетологов, контент-менеджеров, SMM, SEO и других специалистов. Для оптимизации скорости загрузки сайта вы можете обратиться в нашу компанию, мы поможем добиться максимально-возможных показателей в Google PageSpeed Insights.