Ускорение работы интернет-магазина 5WATT

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

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

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

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

Для этого провели аудит скорости и нагрузочное тестирование. Нагрузочное тестирование стало одной из наиболее интересных задач.

По результатам внедрили комплекс доработок, которые повысили производительность и скорость работы сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отложенная загрузка скриптов Youtube для вставленных видео – отличный способ сократить время формирования страницы. Суть метода в том, что при загрузке контента вместо встроенного видео и массы сопутствующих скриптов грузится только картинка со скриншотом из видео, и после клика по картинке загружается плеер Ютуба. Таким образом, видео загружается, только если пользователь хочет его посмотреть. Подробнее об этом способе написано здесь: https://www.labnol.org/internet/light-youtube-embeds/27941/ .

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

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

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

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

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

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

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

• https://loader.io/
• https://frugaltesting.com/
• https://www.joedog.org/siege-home/
• https://gatling.io/open-source/.

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

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

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

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

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

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

Было:

Стало:

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

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

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

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

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

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

Для этого мы:

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

Клиент остался доволен достигнутым результатом. А это лучший показатель качества работы нашей команды.