Web-агентство Red Chameleon
+38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
Заказать обратный звонок
О нас
  • Отзывы
  • Партнеры
  • Наши клиенты
  • Вакансии
Портфолио
Создание сайтов
  • Создание интернет-магазина
  • Разработка интернет-магазина на PrestaShop
  • Разработка сайтов на Laravel
  • Создание интернет-магазина на Laravel
  • Создание сайта на Wordpress
  • Разработка сайтов на YII2
  • Разработка сайтов на Symfony
Поддержка сайта
  • Доработка сайта
Контакты
Блог
Ещё
    +38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
    • О нас
      • Назад
      • Отзывы
        • Партнеры
          • Наши клиенты
            • Вакансии
            • Портфолио
            • Создание сайтов
              • Назад
              • Создание интернет-магазина
                • Разработка интернет-магазина на PrestaShop
                  • Разработка сайтов на Laravel
                    • Создание интернет-магазина на Laravel
                      • Создание сайта на Wordpress
                        • Разработка сайтов на YII2
                          • Разработка сайтов на Symfony
                          • Поддержка сайта
                            • Назад
                            • Доработка сайта
                            • Контакты
                            • Блог
                            • Веб-студия
                            • Проекты
                            • Ускорение загрузки и работы интернет-магазина 5WATT

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

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

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

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

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

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

                            Начало работ по ускорению сайта

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

                            • аудит скорости;

                            • ускорение загрузки страниц;

                            • нагрузочное тестирование и повышение производительности;

                            • оптимизация сайта для увеличения показателей PageSpeed.

                            Работы проводились с октября 2019 до марта 2020 г.
                            Заказчик обратился c задачами на оптимизацию по ТЗ от SEO-специалистов. Но их отложили, так как нужно было сосредоточиться на решении проблемы со скоростью загрузки.
                            Для этого провели аудит скорости и нагрузочное тестирование. Нагрузочное тестирование стало одной из наиболее интересных задач.
                            По результатам внедрили комплекс доработок, которые повысили производительность и скорость работы сайта.
                            Диана Хоменко
                            Диана Хоменко,
                            Проект-менеджер КРАСНОГО ХАМЕЛЕОНА

                            Аудит скорости интернет-магазина

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

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

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

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

                            Сравнение версий PHP

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

                            Наш разработчик взял для теста случайный модуль для организации кеширования и при тестировании получил прирост 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-адреса сторонних ресурсов, с которых грузится контент, до момента, когда данные с них фактически запрашиваются. Так экономится время на внешних подключениях.

                            DNS-prefetch

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

                            Провели нагрузочное тестирование интернет-магазина для определения производительности сервера и 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

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

                            • добавили свойство font-display для шрифтов;

                            • внедрили «ленивую загрузку» (lazyload) для изображений и видео;

                            • внедрили элемент <link rel=preload> для загрузки шрифтов;

                            • установили и доработали модуль для вывода изображений в формате WebP;

                            • оптимизировали загрузку скриптов.

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

                            • Главная – 53/96

                            • Страница каталога – 77/99

                            • Карточка товара – 71/98

                            • Запись блога – 72/95

                            Pagespeed 5watt

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

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

                            Для этого мы:

                            • оптимизировали HTML-код;

                            • обеспечили отложенную загрузку «тяжелого» контента и предзагрузку сторонних ресурсов;

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

                            • совместно с системным администратором поработали над настройкой сервера;

                            • организовали кеширование.

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

                            А ваш сайт не нуждается в ускорении?

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

                            Позвоните мне


                            Давайте обсудим ваш проект
                            Оставьте заявку, и мы свяжемся с вами

                            Сайт защищен reCAPTCHA, используются
                            Политика конфиденциальности и Условия пользования Google.

                            О веб-студии
                            Портфолио
                            Вакансии
                            Контакты
                            Блог
                            Создание сайтов
                            Разработка сайтов на Laravel
                            Разработка сайтов на Symfony
                            Разработка сайтов на YII2
                            Создание сайта на WordPress
                            Разработка интернет-магазинов
                            Создание интернет-магазинов на Laravel
                            Создание интернет-магазина на Prestashop
                            Разработка b2b-сайтов и порталов
                            Разработка личного кабинета
                            Поддержка сайтов
                            Доработка сайтов
                            Перенос сайтов с Битрикс на другую платформу
                            Синхронизация с ERP-системами

                            Карта сайта
                            Оплата и расчеты
                            Гарантии
                            Наши контакты


                            +38 (095) 520-30-05
                            hello@redchameleon.com.ua
                            Украина, г. Киев, ул. Беломорская, д. 1А
                            • Facebook
                            • Telegram
                            • Viber
                            • WhatsApp
                            WEB-агентство Красный Хамелеон
                            WEB-агентство Красный Хамелеон. Разработка, поддержка, продвижение сайтов и интернет-магазинов
                            в Украине (Киев, Харьков, Одесса, Днепр, Львов) и других странах.
                            © 2013-2022, Красный хамелеон.