Как «Пятёрочка» ускорила загрузку веб-страниц для региональных пользователей и при этом разгрузила ИТ-инфраструктуру и сократила расходы на CDN

«Пятёрочка» – крупнейшая сеть продовольственных магазинов «у дома», включающая в себя более 16 000 точек по всей России. Компания внедрила программу лояльности федерального масштаба, и на сайте 5ka.ru жителям всех регионов РФ ежедневно доступно множество специальных предложений и акций от «Пятёрочки» и её партнёров. 

Акции проходят в разных городах России, и по мере того, как все больше пользователей подключаются к программе лояльности «Пятёрочки», веб-трафик растёт огромными темпами: к примеру, в первом квартале объёмы потребляемого трафика росли более чем вдвое всего за месяц. 

Веб-ресурс «Пятёрочки» сталкивается с резкими всплесками трафика, когда проводятся масштабные акции и распродажи. Например, популярная акция «Большие ГасТролли», которая стартовала во всех магазинах «Пятёрочки» в марте 2020 года, спровоцировала повышение объёмов веб-трафика сразу на 50%. Так как на сайте используются изображения высокого разрешения (сайт содержит более 20 000 статических объектов), рост количества обращений к этим файлам провоцирует повышенную нагрузку на канал, и чем их больше, тем медленней грузятся веб-страницы на устройствах пользователей. 

В сфере e-commerce каждая секунда задержки рискует превратиться в недополученную прибыль:

● 47% потребителей не будут ждать загрузки веб- страницы магазина более 2 секунд, 
● 37% покупателей больше не вернутся на сайт
● 45% онлайн-покупателей не склонны совершить покупку, если сайт работает медленно
● 12% потребителей расскажут о негативном опыте знакомым
● 53% мобильных покупателей уйдут, если скорость загрузки страницы превысит 3 секунды 
● 7% конверсии может стоить одна секунда задержки
 


Учитывая, что 87% посещений веб-ресурса «Пятёрочки» происходят с мобильных устройств, в их случае скорость загрузки зависит, в том числе, от скорости соединения абонента, и показатели удержания и конверсии на сайте «Пятёрочки» могли снизиться. 


Задача: снижение объёмов трафика, устойчивость к пиковым нагрузкам, ускорение загрузки сайта

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

Команде «Пятёрочки» также предстояло повысить отказоустойчивость веб-ресурса в моменты резкого роста трафика.

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

Кроме того, при использовании компаниями собственных ЦОД в рамках проектов федерального масштаба пользователи из регионов будут сталкиваться с задержками загрузки по мере удалённости от основного узла.


Задача ясна, кто может помочь?

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

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

«В России немного компаний, которые способны предоставить подобное решение, способное одновременно закрыть все наши потребности. Платформа постоянно развивается, появляются новые сервисы, которые мы можем оценить в рамках бесплатных тестирований при помощи команды NGENIX», – Сергей Маркевич, ведущий менеджер проектов, направление лояльности и маркетинга торговой сети «Пятёрочка».

---

Читайте также: Как увеличить конверсию и не перегрузить ИТ-инфраструктуру в электронной коммерции

---

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

● Что делать с масштабированием инфраструктуры под рост трафика?

Если у онлайн-ритейлера широкая география продаж, то пользователи из любого региона должны получать высокое качество обслуживания вне зависимости от местоположения. Если аудитория отдалена от сервера, на котором находится контент, каждый «хоп”» (переподключение между сетевыми маршрутами) увеличивает задержку, сказываясь на скорости загрузки сайта. Если масштабировать собственную инфраструктуру, учитывая национальный охват веб-ресурса, то это выливается в серьёзные капитальные вложения.

При помощи NGENIX «Пятёрочка» решила перевести часть нагрузки в облако - так можно использовать ресурс инфраструктуры провайдера ёмкостью более 2 Тбит/с, подключая мощности по запросу. Учитывая большой региональный охват, доставка статического контента сайта происходит в максимальной близости от пользователя – для этого как раз требуется распределенная облачная инфраструктура. 

40 узлов платформы расположены во всех федеральных округах РФ и взаимодействуют напрямую с сетями 1000 интернет-провайдеров – то есть, 90% аудитории Рунета могут отправить запрос на сервер в один «хоп». 

Как это устроено?

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

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

Более 50% контента на сайте онлайн-ритейлера — это статический контент (в частности, изображения). В период скидок, распродаж и промоакций пользователи массово генерируют запросы к статическому контенту, и чем больше пользователей обращается к веб-ресурсу, тем выше нагрузка на инфраструктуру. При резком росте трафика под таким количеством запросов сайт может загружаться медленно, теряя посетителей, или вовсе «упасть»,  а для ритейлера это означает недополученную прибыль.
 
Как это устроено?

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

Дополнительный «буст» к производительности можно «арендовать» на необходимый срок, чтобы не вкладываться в собственное решение и сэкономить CAPEX и ресурс ИТ-команды.

● Что ещё можно сделать с ускорением загрузки веб-страниц?

После перевода веб-ресурса на платформу NGENIX можно подключить по запросу сервис оптимизации изображений Image Optimization: он «на лету» конвертирует файлы изображений из более «тяжелых» форматов JPEG и PNG в оптимизированный формат WebP, который сжимает изображение примерно на 40%, не ухудшая качество отображения. 

WebP не поддерживается версиями iOS младше v.12, поэтому пользователю нужно вернуть с сервера изображение в оригинальном формате, чтобы не нарушить отображение сайта. Ряд ecommerce-ресурсов разрабатывают собственные решения для оптимизации изображений, но платформа NGENIX может автоматически определять, когда произвести конвертацию в WebP, а когда отдать пользователю несконвертированное изображение. 

Также распределённое облако избавляет «Пятёрочку» от необходимости закупать и развёртывать дополнительные дорогостоящие сервера для преобразования файлов.

Как это устроено?

Платформа NGENIX автоматически определяет, поддерживает ли устройство пользователя формат WebP. Если да, то она конвертирует изображение в WebP и отправляет его на устройство клиента, если нет - возвращает его в оригинальном формате. Размер изображения в формате WebP почти вполовину меньше, чем в оригинальном формате. 

Если значительную долю в пользовательском трафике составляет трафик от пользователей платформ с поддержкой WebP (это более 72% браузеров) можно сократить количество трафика, отправляемого на устройства пользователей, на десятки процентов и таким образом разгрузить инфраструктуру доставки контента и ускорить загрузку веб-страниц, особенно на мобильных устройствах.  Ускорение загрузки веб-страниц положительно влияет на показатели конверсии, а оптимизация изображений разгружает ИТ-инфраструктуру, снижая CAPEX на масштабирование. 

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


 

Как происходило внедрение?

Подключение веб-ресурса на облачную платформу NGENIX происходит после того, как команда проекта произведёт организационно-технические работы, применит первичные настройки в тестовой конфигурации и соберёт необходимую статистику (запросы, количество объектов и так далее). В случае с «Пятёрочкой» самым простым шагом к подключению посещаемого веб-ресурса к платформе был полный перевод статического контента в облако. 

После того, как домен со статическим контентом был переведён на облачную платформу NGENIX, «Пятёрочка» могла начать подачу трафика на платформу и анализировать стабильность работы в реальном времени в личном кабинете, где доступна статистика и мониторинг работы веб-ресурса.

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

Тестирование сервиса происходит в течение двух недель, чтобы оценить эффект от его использования. Сервис призван существенно снизить объёмы исходящего трафика при сохранении количества запросов и качества изображений — это не только позволяет избежать наращивания ИТ-инфраструктуры под рост объёмов трафика, но и сэкономить на тарифицируемых ресурсах - например, на потреблении полосы пропускания. 

Image Optimization значительно сократил размер файлов изображений почти в 10 раз с 240 Кбайт до 25 Кбайт; это способствовало значительному снижению объёмов передаваемого трафика и сократило время обработки запроса к серверу с 230 мс для JPEG/PNG до 5 мс для WebP. 




 
 
Что в результате:  

● Благодаря подключению сервиса оптимизации изображений на 20% снизился общий объём передаваемого веб-трафика. 

● Из-за значительного сокращения размеров запрашиваемых изображений на 22% ускорилась загрузка веб-страниц 

● В 45 раз снизилось время обработки запроса к WebP в сравнении с JPEG/PNG на мобильных устройствах

● В 50 раз снизилось время обработки запроса к WebP в сравнении с JPEG/PNG на ПК


 
Эти меры повлияли на важные для «Пятёрочки» показатели:

● Снижение объёмов пользовательского трафика на 1/5 сократило потребление пропускной способности, позволив сэкономить затраты на тарифицируемый ресурс;

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



 
Отзыв:

«После подключения распределенной облачной платформы стоимость услуг NGENIX окупилась очень быстро благодаря значительному снижению объемов тарифицируемого трафика, и это даже до того, как мы подключили сервис оптимизации изображений. Можно сказать, что мы ждали появления такого сервиса, как NGENIX Image Optimization: крупные изображения уменьшились в десятки раз, из-за этого ускорилась загрузка и отдача контента. Но главное - ускорилась работа сайта в регионах, а время обработки запроса с мобильных устройств снизилось до 5 мс. Наш отдел маркетинга в восторге», - Сергей Маркевич, ведущий менеджер проектов, направление лояльности и маркетинга торговой сети «Пятёрочка».

Облачная платформа NGENIX используется для ускорения, защиты и обеспечения доступности популярных веб-ресурсов. goods.ru работает с NGENIX, чтобы бороться с DDoS-атаками и парсерами, генерирующими повышенную нагрузку, и справляется с наплывом трафика во время масштабных распродаж. Puzzle English столкнулся с кратным ростом трафика и смог выдержать высокую нагрузку во время пандемии COVID-19 без отказов благодаря распределенной облачной инфраструктуре и кэшированию и оптимизации изображений. 

Об этих внедрениях можно узнать здесь.

Узнайте, что можно сделать для повышения конверсии интернет-магазина!