Как ускорить загрузку сайта. Основные способы

По мнению аналитиков из Unbounce, в попытках повысить конверсию интернет-магазина 19% маркетологов вообще не рассматривают скорость загрузки веб-страниц как фактор, влияющий на конверсию, хотя исследование предпочтений покупателей демонстрирует прямо противоположную картину: 47% потребителей не будут ждать загрузки веб-страницы магазина более 2 секунд, а 45,4% потребителей в меньшей степени готовы совершить покупку, если сайт работает медленно. При этом 36,8% опрошенных покупателей больше не вернутся на сайт, а 11,9% потребителей расскажут о негативном опыте знакомым.

Кроме того, при низкой скорости загрузки страниц поисковые системы пессимизируют веб-ресурс, что приводит к снижению органического трафика. Низкая скорость загрузки страниц увеличивает отток посетителей на 11% каждую секунду после четвертой – и негативный эффект может выражаться не только в недополученной прибыли, но и в потере реальных денег. Например, это приводит к расходованию рекламных бюджетов впустую: рекламные системы типа Яндекс.Директ списывают бюджет за клик – то есть, даже не дождавшийся загрузки веб-страницы и ушедший с сайта потенциальный покупатель уже стоил интернет-магазину денег.

Что можно сделать, чтобы скорость загрузки сайта была достаточной для того, чтобы пользователи не уходили искать нужный товар у кого-то другого?

Ускоряем доставку объектов на устройства пользователей 

Что происходит, когда пользователь заходит на страницу интернет-магазина? Он отправляет HTTP-запросы на сервер, где размещены изображения, шрифты, скрипты и все, что содержится на веб-странице. В ответ на это сервер отправляет все, что запросил пользователь, на его устройство. Чем "ближе" к источнику (серверу) находится пользователь, тем быстрее произойдет доставка контента веб-страницы. Но если, скажем, онлайн-магазин хостится на одном сервере в Москве, а запрос поступает из Новосибирска, запросу придется преодолеть несколько "хопов" – промежуточных узлов, на каждом из которых будет добавлена некоторая задержка. Чем больше этих хопов, тем медленней доставляется контент и тем медленней будет грузиться страница веб-сайта.

Чтобы доставка произошла быстрее, можно использовать CDN. Технология CDN (Content Delivery Network, сеть доставки контента) предполагает, что закэшированные объекты, содержащиеся на сайте, хранятся на множестве географически распределенных серверов (edge-серверах), и при запросе пользователя на его устройство отправится закэшированный объект, который находятся на наиболее близком к источнику запроса сервере, что помогает значительно снизить задержку.

Оптимизируем статический контент 

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

В борьбе за покупателя интернет-магазины увеличивают количество изображений, но картинки – одни их самых "тяжелых" объектов на веб-странице. На веб-странице используются форматы JPEG/PNG/GIF – средний размер JPEG-файла составляет около 2 Мбайт. Если пользователь обращается к странице, на которой, скажем, содержатся несколько десятков таких изображений, страница может грузиться несколько секунд – притом с каждой секундой после третьей вероятность конверсии снижается на 7%.

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

При этом современному ритейлеру нельзя игнорировать пользовательский опыт мобильных покупателей: в России доля пользователей m-commerce выросла до 30% – об этом говорит отчет компании Criteo. В последующие годы мобильных покупателей станет еще больше за счет подключения к mcommerce-платформам покупателей поколения Z – первых digital natives.

Для ускорения загрузки веб-страниц можно в первую очередь оптимизировать изображения, сконвертировав их из JPEG или PGN в формат WebP – его представил Google несколько лет назад. Он поддерживается большинством современных браузеров (за исключением Safari старых версий). WebP, в отличие от других форматов, при сжатии сохраняет визуально различимое качество изображения, но "вес" изображение можно сократить на десятки процентов. Таким образом, доля трафика изображений в общей доле трафика, передаваемого на устройства значительно сокращается, и для его доставки с сервера потребуется намного меньше времени. Поэтому можно сократить время загрузки веб-страницы на 20-40%.

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

Если с оптимизацией изображений мы разобрались, также можно сжать текстовый контент – это .js, .css и подобные форматы файлов. Для этого подойдет использование алгоритма сжатия данных Brotli от Google. Его поддержка предусмотрена на широком спектре браузеров, включая Firefox, Chrome и другими браузерами, основанными на Chromium. Эффект сжатия Brotli в сравнении с алгоритмом deflate на 20% более эффективен.

Подключаем протокол HTTP/2

Протокол HTTP/2 – это многопоточный протокол, при использовании которого можно в параллельном режиме загружать более сотни объектов с домена одновременно. Предыдущая версия протокола HTTP 1.1, широко используемая сайтами, ограничивает количество одновременных подключений на один домен до шести. Если загрузка объектов осуществляется в параллельном режиме, это ускоряет доставку контента и, как следствие, загрузку веб-страниц.  

Используем распределенный DNS 

Как мы уже выяснили ранее, расстояние между местоположениями пользователя и сервера способно значительно повлиять на скорость загрузки страниц. Если онлайн-магазин хостится централизованно (например, на сервере хостинг-провайдера, расположенном в определенном ЦОДе или на инфраструктуре глобального облачного провайдера вроде AWS с точкой присутствия, условно, в Европе), это удлиняет маршрут доставки трафика для части, если не для всех, пользователей.

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

Также распределенный DNS поможет избежать еще более критичных проблем, чем скорость загрузки: использование этого подхода обеспечивает дополнительную отказоустойчивость сайта. Любой простой в работе интернет-магазина выражается в ощутимых денежных потерях, которые только растут с масштабом бизнеса: например, зарубежные ритейлеры подсчитали, что только час простоя онлайн-ритейлера в день распродажи может вылиться в потерю 6% дневной выручки.