Как мы увеличили скорость загрузки страниц интернет-магазина

Даже в современных условиях, когда появились мобильные сети пятого поколения, а средняя скорость интернета в Украине растет постоянно (у многих провайдеров это уже 100 Мбит/сек и более), вопрос скорости загрузки сайтов не теряет своей актуальности. Этот показатель по-прежнему оказывает огромное влияние на количество отказов и конверсию. 

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

Наше сотрудничество с компанией началось в конце 2019 года, когда ее представители доверили «‎Красному Хамелеону» техническую поддержку, улучшение и оптимизацию своего интернет-проекта. 

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

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

Начальный этап

Приоритетные задачи:

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

Время проведения работ – октябрь 2019 – март 2020 г.

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

Веб-программисты «Красного хамелеона» в ходе проведения аудита скорости обнаружили ряд уязвимостей проекта, а быстрые тесты задали ключевые направления для оптимизации загрузки и ускорения веб-ресурса.

Переход на новейшую версию PHP

Сравнение PHP версий без изменений прочих параметров продемонстрировало заметный рост производительности.

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

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

Наши рекомендации клиенту – внедрение предложенных правок перед оптимизацией по Google PageSpeed.

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

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

Модули PrestaShop платные и зачастую не дешевые (демоверсии отсутствуют). Быстрый тест в процессе аудита скорости проводился с использованием устаревшей версии.

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

Клиенту был предложен модуль Page Cache Ultimate Module. После его установки и прогрева на тестовом сервере был получен очень ощутимый прирост скорости.

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

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

Схожие результаты были показаны по всем страницам веб-ресурса, причем скорость загрузки с включенным кешем дала более стабильные показания (разница времени загрузки уменьшилась с 1-2 секунд до 100-200 миллисекунд).

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

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

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

DNS-prefetch

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

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

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

Чтобы определить производительность сервера и CMS PrestaShop (учитывая подключенную CDN Cloudflare) мы провели нагрузочное тестирование. Работы осуществлялись в два последовательных этапа:

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

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

• Loader.io.
• Frugaltesting.com.
• Siege.
• Gatling.

По результатам проведенных тестов удалось сделать такие выводы:

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

Было:

Стало:

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

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

• 5 юзеров в секунду на протяжении 5 минут (общее число 1500);
• 10 юзеров в секунду на протяжении 5 минут (общее число 3000).

Тесты продемонстрировали ощутимое улучшение производительности, в том числе реальное сокращение времени отклика сервера.

Программисты «‎Красного хамелеона», благодаря нагрузочному тестированию, сумели обнаружить уязвимости сайта, имеющие негативное влияние на его производительность. Слабые места были успешно устранены в связке с сисадмином сервера. Полученный результат – заметный прирост скорости и производительности интернет-магазина.

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

Чтобы повысить показатели сервиса Google PageSpeed, был проведен ряд оптимизирующих манипуляций:

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

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

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

Итоги работы

Наша команда сумела достичь достойных показателей производительности и «попугаев» PageSpeed, а также существенно увеличить скорость загрузки.

Для этой цели мы:

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

Лучшим показателем качества нашей работы мы считаем то, что клиент абсолютно удовлетворен результатом, которого нам удалось достичь. 

С удовольствием обсудим ваш проект и предложим наиболее эффективные решения.