Крупнейшие поисковики включают скорость загрузки сайта в факторы ранжирования, известные западные игроки ecommerce публикуют кейсы по увеличению конверсии с помощью ускорения сайтов. И в это время вокруг нас все больше медленных сайтов, которые должны приносить прибыль своим владельцам, а приносят только увеличение показателя отказов. В чём причина такой ситуации, как её исправить? Об этом и не только расскажем в этой статье.
Скорость загрузки сайта – что это такое и как её измерить?
Вопрос не такой праздный, как может показаться на первый взгляд. Можно измерять загрузку страницы целиком или только до начала рендеринга, можно с прогретым кешем (повторное посещение) или пустым (первый раз на сайте). А еще есть набор условий: браузер, устройство (ПК или мобильное), качество соединения (задержки, пропускная способность). При изменении каждого из этих параметров скорость может меняться радикально. Кстати, это одна из причин, почему так много медленных сайтов: разработчики часто тестируют сайты в идеальных условиях быстрого подключения и мощного устройства и получают неплохие показатели скорости.
Также нужно отметить два вида тестирования скорости: синтетическое и на реальных пользователях (RUM – real users monitoring, например реализовано в Google Analytics и Яндекс.Метрике). Оба вида полезны и должны использоваться на практике. Первый – на начальном этапе и в процессе оптимизации, второй – до и после оптимизации для оценки результатов.
Мы рекомендуем взять на основу такой параметр: время до первого полезного экрана (time to first meaningful paint). На практике значит, что по прошествии этого времени можно понять, что это за сайт, прочитать заголовки и другой текст, возможно увидеть оформление (частично). В идеале на этом этапе уже можно взаимодействовать с сайтом: переходить по ссылкам, прокручивать контент и т. д.
С метрикой разобрались, теперь определимся, чем измерять. Для выбранной метрики доступны несколько простых способов: Developers tools в Chrome и WebPagetest.
Если мы используем Chrome, что нужно выставить нужную скорость соединения (Network Throttling) и включить опцию «Capture Screenshots» на панели Network. Недавно появилась возможность также эмулировать замедление CPU (CPU Throttling на закладке Timeline). Далее перезагружаем страницу и получаем серию скриншотов на различных стадиях загрузки страницы – замечаем время первого полезного для пользователя скриншота. Для уточнения данных нужно провести серию измерений.
При использовании WebPagetest (http://www.webpagetest.org/) достаточно выбрать точку тестирования (наиболее близкую к вашей аудитории), выбрать скорость подключения, браузер и поставить опцию «Capture video». Запускаем тест и заходим в раздел «Filmstrip View», где получаем серию скриншотов сайта. Здесь есть уже посчитанная метрика StartRender, но на неё не всегда можно опираться, так как за начало рендеринга может быть принято сообщение в интерфейсе браузера о начале загрузки сайта или значок «Loading».
Один из часто задаваемых вопросов: какое время загрузки должно быть? Чтобы ответить на этот вопрос, полезно знать шкалу восприятия скорости интерфейсов пользователем.
|
Задержка реакции, мс |
Восприятие пользователем |
|
0-100 |
Мгновенная реакция |
|
100-300 |
Небольшая, но заметная задержка |
|
300-1000 |
Система работает, но нагружена |
|
1000-10000 |
Вероятное переключение мыслей на другие задачи |
|
10000 и более |
Задача отменяется (система не работает) |
Как видно из таблицы, очень желательно уложиться в 1000 мс (1 секунду) загрузки, потому что пользователь не успевает переключиться на другие задачи и забыть, что он делал с сайтом. В то же время загрузки более чем за 10 секунд – катастрофа для любого сайта, так как ведёт к отказам (пользователь закрывает вкладку браузера).
Почему так много медленных сайтов?
Кратко опишем основные причины плачевного состояния в области скорости сайтов.
Во-первых, это непонимание важности проблемы владельцами сайтов. За ускорением сайтов обращаются только при катастрофической ситуации, не занимаются вопросом скорости регулярно.
Во-вторых, культура большинства разработчиков сайта пока не включает трепетное отношение к скорости работы сайта и процесс её контроля на всех этапах жизненного цикла.
В-третьих, требования к современному сайту неминуемо раздувают количество JS, CSS-кода и картинок (видео), а качество подключения прогрессирует очень медленно.
Наконец, есть разрыв между представлениями пользователей о быстром сайте и мнением владельцев/разработчиков сайта. Владельцы считают, что пользователи понимают, что сайт может работать не быстро и это нормально, потому что это обычный интернет-магазин. А при использовании мобильного интернета вообще нужно подождать: это ваша проблема, что интернет такой медленный. На самом деле, пользователи, по данным исследований, ожидают, что ваш сайт будет неизменно быстрым, таким же быстрым как Яндекс и Google, причём с любым качеством подключения. Всё, что хуже, воспринимается как недостаток сайта.
Способы ускорения сайта
Допустим, проблема определена, нужно ускорять сайт. Принципиально существует два способа решения задачи: автоматизированные сервисы и ручная оптимизация специалистами.
Автоматизированное ускорение сайта предоставляется в виде распределённой сети серверов (CDN), на которые направляются запросы к сайту. Сервера системы в свою очередь ходят за контентом на исходный сервер с сайтом, попутно производя различные оптимизации. За счёт использования распределённой сети, система отдаёт контент с ближайшего к пользователю сервера, что позволяет экономить на задержках в сети.
В целом автоматическое ускорение позволяет решить многие задачи по ускорению клиентской части сайта и предоставляет CDN. Однако, есть несколько серьёзных ограничений: дополнительная точка отказа сайта, непрозрачность работы для разработчиков, возможные сложности с кешированием, невозможность решения серверных проблем и глубокой оптимизации клиентской части. Кроме того, автоматизированное ускорение требует абонентской оплаты каждый месяц.
Ручная оптимизация специалистами позволяет решить практически все проблемы скорости сайта. Так как производится ручной анализ и работа с кодом, можно ускорить как клиентскую, так и серверную часть. Такой метод не исключает использование автоматизированных средств, но имеет в основе профессиональную работу человека.
Ручная оптимизация решает все задачи по ускорению сайта в условиях локализации аудитории. Также в процесс такой оптимизации может входить оптимизация сервера, хостинга или даже перенос сайта на другую инфраструктуру. Для распределённой географии пользователей полезно подключить CDN (можно без функций оптимизации сайта), но это относится к подавляющему меньшинству сайтов.
Стоимость профессиональной работы может показаться высокой, однако это единовременные вложения, а не регулярные платежи. Эффект от ускорения сохраняется на долгое время. В случае активного развития сайта рекомендуется внедрить процессы оптимизации сайта в разработку, провести консультации и обучение разработчиков, наладить мониторинг скорости сайта.
HTTPS (TLS) и ускорение
Ни для кого не секрет, что поисковые системы и браузеры призывают переводить все сайты не безопасное соединение с использованием TLS (ранее назывался SSL), особенно активно эту идею продвигает Google, который обещает в скором времени помечать обычные сайты как потенциально опасные, потому что они не используют шифрование. Суть технологии состоит в сквозном шифровании всего трафика от пользователя к серверу и обратно. При этом ключ для расшифровки есть только у сервера и клиента. Уже сейчас, Google рассматривает использование HTTPS как положительный сигнал для ранжирования. Со временем, значение этого фактора будет увеличиваться. Кроме того, многие нововведения в веб-стандартах будут работать только с HTTPS (сжатие brotli, service workers, HTTP/2).
Причины предпочтения HTTPS-сайтов просты: только защищённое соединение даёт пользователю уверенность в том, что он зашёл на настоящий сайт и его данные невозможно перехватить. Для владельцев сайтов также очень полезно следующее свойство: в контент сайта с TLS невозможно внести изменения третьим лицам по пути следования трафика (например, провайдеру, который захотел вставить свою рекламу на ваш сайт).
Получается, что мы можем получить множество преимуществ, используя HTTPS. Однако, с преимуществами приходит и проблема со скоростью работы: защищённое соединение добавляет накладные расходы и нагружает клиент и сервер задачами шифрования контента. При неоптимальной настройке сайт может значительно замедлиться.
Первую проблему позволяет решить использование нового протокола HTTP/2 и оптимизированные настройки веб-сервера (дающие как скорость, так и безопасность: OCSP, False Start, Session tickets, Session cache), вторая проблема решается использованием современных шифров, которые не требуют значительных ресурсов.
Мы считаем, что сейчас самое время перейти на HTTPS и реализовать преимущества защищенного TLS-соединения, минимизируя негативное воздействие на скорость работы сайта.
Итоги
Мы рассмотрели основные аспекты обширной области ускорения сайтов. Самый важный вывод: скоростью сайта нужно заниматься, она важна для достижения бизнес-показателей сайта. Кроме того, довольные посетители будут активнее пользоваться сайтом и рекомендовать его друзьям, для интернет-магазинов можно получить более высокую конверсию. По материалам этой статьи вы сможете самостоятельно определить скорость вашего сайта и принять решение о необходимости его ускорения, а также ориентироваться в предложениях на рынке.
Также мы затронули вопрос перехода на HTTPS (TLS) с точки зрения скорости: сейчас это можно сделать без потерь производительности, сохраняя все преимущества в возможностях.