Интернет-магазин канцтоваров Hatber

Интернет-магазин канцтоваров Hatber

Оптимизация быстродействия сайта

«ХАТБЕР-Казахстан» работает на рынке с 2010 года и на сегодняшний день является одним из ведущих поставщиков бумажно-беловой продукции школьного и офисного направления и спектра канцелярских товаров в Казахстане. Компания предлагает своим клиентам широкий ассортимент продукции, более 10 000 товаров.

Наше сотрудничество началось еще в 2013 году.

За это время было реализовано несколько успешных проектов. Один из последних – это оптимизация быстродействия интернет-магазина https://hatber.kz/


Клиент обратился к нам со следующими проблемами:

  1. медленная загрузка страниц сайта, исходные показатели по Google PageSpeed Insight: мобильная версия 0-5 ед., desktop 20-25 ед.;

  2. критичные показатели времени до отрисовки и времени до загрузки DOM по данным отчета Яндекс.Метрики;

  3. некорректная и медленная работа функционала оформления заказа с использованием бонусной системы;

  4. ежедневная необходимость удаления кэша большого объема.


Мы провели технический аудит сайта и обнаружили, что:

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

  • Проблемы на frontend выражались в низкой отзывчивости интерфейса и долгой прогрузке ассетов - изображений, стилей, скриптов. Судя по коду, стили сайта были разбросаны по большому количеству файлов, что увеличивало количество конкурирующих HTTP-запросов и, соответственно, общее время полной загрузки страницы. Аналогичная ситуация происходила с js-кодом. Интерфейс был перегружен плагинами и UX-поведением, это увеличивало время загрузки и уменьшало отзывчивость интерфейса.


Основная задача была: снизить скорость загрузки страниц сайта, увеличить индекс быстродействия по версии Google PageSpeed Insight.

Мы решали проблему комплексно, т.е. работали параллельно по обоим направлениям - frontend и backend.


Выполненные работы:

  1. Оптимизировали меню каталога и блок корзины в шапке сайта, внесли изменения в код мобильного меню, настроили lazy load картинок в каталоге и в мобильной версии сайта.

  2. Снизили время кеширования и настроили автоматическую очистку кеша по расписанию.

  3. В мобильной версии заменили блок видео с youtube на адаптивный.

  4. На странице подробного описания акции блок с товарами был изменен на постраничный просмотр (вывод по 20 товаров за раз).

  5. Добавили возможность загрузки iframe с задержкой.

  6. Убрали запросы к базе в цикле в result_modifier компонента корзины в шапке.

  7. Отключили ненужные модули в ядре CMS, за счет чего сократили время ответа сервера примерно на 1 секунду.

  8. Провели ряд оптимизаций на frontend, за счет чего удалось достичь прироста индекса PageSpeed до 25-30 пунктов на desktop:

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


В результате всех работ индекс быстродействия сайта Google PageSpeed вырос в мобильной версии c 5 до 37 ед., desktop - с 25 до 82 ед. 


Несмотря на то, что один из показателей все еще находится в «красной зоне», для Заказчика - это уже отличный результат, по сравнению с исходным.


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

 

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

Смотреть подобный проект - интернет-магазин «Упаковка для бизнеса U2B»


Выдаем результат

Оптимизация быстродействия сайта
Готовый проект: https://hatber.kz/
Хочешь такой же?
Позвони или напиши нам
или
Оставить заявку
^ Наверх