Интернет-магазин канцтоваров 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 в конец страницы.