5watt.ua – оптово-розничный интернет-магазин светодиодной продукции.
Представители компании обратились к нам за технической поддержкой сайта. Мы взялись за проект в конце 2019 года и до сих пор работаем над его улучшением и оптимизацией.
Сайт на PrestaShop, но описанные методы преимущественно подходят для проекта на любой платформе.
Среди первоочередных задач были:
Работы проводились с октября 2019 до марта 2020 г.
Заказчик обратился c задачами на оптимизацию по ТЗ от SEO-специалистов. Но их отложили, так как нужно было сосредоточиться на решении проблемы со скоростью загрузки.
Для этого провели аудит скорости и нагрузочное тестирование. Нагрузочное тестирование стало одной из наиболее интересных задач.
По результатам внедрили комплекс доработок, которые повысили производительность и скорость работы сайта.
Диана Хоменко,
Проект-менеджер КРАСНОГО ХАМЕЛЕОНА
В результате проведенного аудита скорости наш веб-программист обнаружил ряд слабых мест проекта. Быстрые тесты показали основные направления для оптимизации загрузки и ускорения сайта.
Сравнили PHP версии без изменения других параметров. Только за счет этого заметен существенный прирост производительности.
PHP 7.0 (слева) и текущая 5.6 (справа).
Наш разработчик взял для теста случайный модуль для организации кеширования и при тестировании получил прирост 200 %.
Показатели с кешированием и без.
Мы рекомендовали клиенту в первую очередь внедрить эти правки и только потом переходить к оптимизации по Google PageSpeed.
Проблема с модулями для PrestaShop в том, что они платные (и часто их стоимость весьма ощутима), а демоверсий нет. Для быстрого теста во время аудита скорости использовалась устаревшая версия.
Поэтому выбор приходится основывать на количество загрузок, регулярность обновлений, оценки пользователей и статьи, но протестировать их на сайте, чтобы сравнить в реальных условиях не получится.
Предложили клиенту модуль Page Cache Ultimate Module.
После установки модуля и прогрева кеша на тестовом сервере получили довольно внушительный прирост скорости.
В самом модуле есть сравнение работы без кеширования и с кешированием:
Аналогичные результаты наблюдались по всем страницам интернет-магазина. При этом показания скорости загрузки с кешем более стабильные: без кеширования время загрузки одной и той же страницы может варьироваться от 1 до 2 секунд, а с включенным кешем разница уменьшается до 100–200 мс.
Отложенная загрузка скриптов Youtube для вставленных видео – отличный способ сократить время формирования страницы. Суть метода в том, что при загрузке контента вместо встроенного видео и массы сопутствующих скриптов грузится только картинка со скриншотом из видео, и после клика по картинке загружается плеер Ютуба. Таким образом, видео загружается, только если пользователь хочет его посмотреть. Подробнее об этом способе написано здесь.
Применением отложенной загрузки нам удалось сократить размер страницы на 1,7 мБ.
Для повышения скорости загрузки внешних ресурсов добавили в секцию head страницы dns-prefetch.
Такая конструкция помогает заранее определять IP-адреса сторонних ресурсов, с которых грузится контент, до момента, когда данные с них фактически запрашиваются. Так экономится время на внешних подключениях.
Провели нагрузочное тестирование интернет-магазина для определения производительности сервера и CMS PrestaShop с учетом подключенной CDN Cloudflare.
Работы проводились в два этапа:
Чтобы получить максимально объективные результаты, наш программист провел ряд тестов с использованием нескольких сервисов:
В результате проведенных тестов удалось установить, что:
В текущей конфигурации PrestaShop тоже способен выдерживать нагрузку (с учетом подключенного Cloudflare). Отказываться от CMS из-за производительность потребности нет.
После внесения изменений в настройки сервера мы провели повторное тестирование, чтобы оценить результаты корректировок. Для этого использовали только Gatling и 2 сценария:
Все тесты показали заметные улучшения производительности. Среди прочего, сильно улучшилось время ответа сервера.
Было:
Стало:
Таким образом, нашему программисту благодаря проведенному нагрузочному тестированию удалось выявить слабые места, негативно влияющие на производительность ресурса. А в связке с системным администратором сервера эти проблемы были устранены. Результат – повышение скорости и производительности интернет-магазина.
Для повышения показателей сервиса Google PageSpeed провели ряд оптимизаций:
Результаты по разным типам страниц для мобильной и десктопной версии:
В итоге нашей команде удалось добиться достойных показателей производительности, скорости загрузки и «попугаев» PageSpeed.
Для этого мы:
Клиент остался доволен достигнутым результатом. А это лучший показатель качества работы нашей команды.