Как мы ускоряли интернет-магазин

5Watt – оптово-розничный интернет-магазин светодиодной продукции.

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

Сайт на PrestaShop, но описанные методы преимущественно подходят для проекта на любой платформе.

Ускорить сайт

С чего начали

Среди первоочередных задач были:

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

Работы проводились с октября 2019 до марта 2020 г.

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

Диана Хоменко,

Проект-менеджер КРАСНОГО ХАМЕЛЕОНА

Аудит скорости

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

Переход на более новую версию PHP

Сравнили PHP версии без изменения других параметров. Только за счет этого заметен существенный прирост производительности.

PHP 7.0 (слева) и текущая 5.6 (справа).

Установить модуль кеширования

Наш разработчик взял для теста случайный модуль для организации кеширования и при тестировании получил прирост 200 %.

Показатели с кешированием и без.

Мы рекомендовали клиенту в первую очередь внедрить эти правки и только потом переходить к оптимизации по Google PageSpeed.

Работы по ускорению интернет-магазина

Модуль кеширования

Проблема с модулями для PrestaShop в том, что они платные (и часто их стоимость весьма ощутима), а демоверсий нет. Для быстрого теста во время аудита скорости использовалась устаревшая версия.

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

Предложили клиенту модуль Page Cache Ultimate Module.

После установки модуля и прогрева кеша на тестовом сервере получили довольно внушительный прирост скорости.

В самом модуле есть сравнение работы без кеширования и с кешированием:

Прирост скорости с кешем

Реальное сравнение также показало достойные результаты →

Страница каталога

Загрузка без кеша – 3.98 с.

Карточка товара

Загрузка без кеша – 879 мс.

Загрузка с кешем – 449 мс.

Загрузка с кешем – 243 мс.

Аналогичные результаты наблюдались по всем страницам интернет-магазина. При этом показания скорости загрузки с кешем более стабильные: без кеширования время загрузки одной и той же страницы может варьироваться от 1 до 2 секунд, а с включенным кешем разница уменьшается до 100–200 мс.

Отложенная загрузка видео

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

Применением отложенной загрузки нам удалось сократить размер страницы на 1,7 мБ.

DNS-prefetch

Для повышения скорости загрузки внешних ресурсов добавили в секцию head страницы dns-prefetch.

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

Нагрузочное тестирование

Провели нагрузочное тестирование интернет-магазина для определения производительности сервера и CMS PrestaShop с учетом подключенной CDN Cloudflare.

Работы проводились в два этапа:

Первичное тестирование с помощью нескольких инструментов.
Контрольные тесты после дополнительных настроек сервера.

Чтобы получить максимально объективные результаты, наш программист провел ряд тестов с использованием нескольких сервисов:

В результате проведенных тестов удалось установить, что:

сервер способен держать нагрузку 10 пользователей в секунду в течение одной минуты, больше начинаются отказы;
нагрузку 5 пользователей в секунду сайт выдержал в течение 5 минут (т. е. выдержит и дольше).

В текущей конфигурации PrestaShop тоже способен нагрузку (с учетом подключенного Cloudflare). Отказываться от CMS из-за производительность потребности нет.

После внесения изменений в настройки сервера мы провели повторное тестирование, чтобы оценить результаты корректировок. Для этого использовали только Gatling и 2 сценария:

5 пользователей в секунду в течение 5 минут (всего 1500 пользователей);
10 пользователей в секунду в течение 5 минут (всего 3000 пользователей).

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

Было:

Стало:

Таким образом, нашему программисту благодаря проведенному нагрузочному тестированию удалось выявить слабые места, негативно влияющие на производительность ресурса. А в связке с системным администратором сервера эти проблемы были устранены. Результат – повышение скорости и производительности интернет-магазина.

Внедрение рекомендаций Google PageSpeed

Для повышения показателей сервиса Google PageSpeed провели ряд оптимизаций:

добавили свойство font-display для шрифтов;
внедрили «ленивую загрузку» (lazyload) для изображений и видео;
внедрили элемент <link rel=preload> для загрузки шрифтов;
установили и доработали модуль для вывода изображений в формате WebP;
оптимизировали загрузку скриптов.

Результаты по разным типам страниц для мобильной и десктопной версии:

Главная – 53/96
Страница каталога – 77/99
Карточка товара – 71/98
Запись блога – 72/95

Результат

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

Для этого мы:

оптимизировали HTML-код;
обеспечили отложенную загрузку «тяжелого» контента и предзагрузку сторонних ресурсов;
внедрили WebP-формат изображений и усовершенствовали вывод таких картинок для поддерживающих браузеров;
совместно с системным администратором поработали над настройкой сервера;
организовали кеширование.