Оптимизация быстродействия сайта
«ХАТБЕР-Казахстан» работает на рынке с 2010 года и на сегодняшний день является одним из ведущих поставщиков бумажно-беловой продукции школьного и офисного направления и спектра канцелярских товаров в Казахстане. Компания предлагает своим клиентам широкий ассортимент продукции, более 10 000 товаров.
Наше сотрудничество началось еще в 2013 году.
За это время было реализовано несколько успешных проектов. Один из последних – это оптимизация быстродействия интернет-магазина https://hatber.kz/
Клиент обратился к нам со следующими проблемами:
-
медленная загрузка страниц сайта, исходные показатели по Google PageSpeed Insight: мобильная версия 0-5 ед., desktop 20-25 ед.;
-
критичные показатели времени до отрисовки и времени до загрузки DOM по данным отчета Яндекс.Метрики;
-
некорректная и медленная работа функционала оформления заказа с использованием бонусной системы;
- ежедневная необходимость удаления кэша большого объема.
Мы провели технический аудит сайта и обнаружили, что:
-
Судя по проведенной аналитике, значительную часть времени ответа сервера занимают не компоненты, которые мы видим на экране, а фоновые функции и процессы, которые отрабатывают в самом начале страницы (до вывода контента) и после выполнения визуальной части страницы. Эту фоновую нагрузку провоцируют на каждом хите сторонние модули, с поведением которых пришлось разбираться и оптимизировать их работу.
-
Проблемы на frontend выражались в низкой отзывчивости интерфейса и долгой прогрузке ассетов - изображений, стилей, скриптов. Судя по коду, стили сайта были разбросаны по большому количеству файлов, что увеличивало количество конкурирующих HTTP-запросов и, соответственно, общее время полной загрузки страницы. Аналогичная ситуация происходила с js-кодом. Интерфейс был перегружен плагинами и UX-поведением, это увеличивало время загрузки и уменьшало отзывчивость интерфейса.
Основная задача была: снизить скорость загрузки страниц сайта, увеличить индекс быстродействия по версии Google PageSpeed Insight.
Мы решали проблему комплексно, т.е. работали параллельно по обоим направлениям - frontend и backend.
Выполненные работы:
-
Оптимизировали меню каталога и блок корзины в шапке сайта, внесли изменения в код мобильного меню, настроили lazy load картинок в каталоге и в мобильной версии сайта.
-
Снизили время кеширования и настроили автоматическую очистку кеша по расписанию.
-
В мобильной версии заменили блок видео с youtube на адаптивный.
-
На странице подробного описания акции блок с товарами был изменен на постраничный просмотр (вывод по 20 товаров за раз).
-
Добавили возможность загрузки iframe с задержкой.
-
Убрали запросы к базе в цикле в result_modifier компонента корзины в шапке.
-
Отключили ненужные модули в ядре CMS, за счет чего сократили время ответа сервера примерно на 1 секунду.
-
Провели ряд оптимизаций на frontend, за счет чего удалось достичь прироста индекса PageSpeed до 25-30 пунктов на desktop:
- отложили запуск скрипта метрики на сайте, удалили лишний код метрики от Google, чтобы не блокировался основной поток;
- проанализировали компоненты и сделали самые тяжелые также ленивыми (т.е. подгрузка отдельным запросом уже после отдачи страницы);
- удалили неиспользуемые стили и скрипты;
- минифицировали стили и скрипты;
- переместили весь Javascript в конец страницы.
В результате всех работ индекс быстродействия сайта Google PageSpeed вырос в мобильной версии c 5 до 37 ед., desktop - с 25 до 82 ед.
Несмотря на то, что один из показателей все еще находится в «красной зоне», для Заказчика - это уже отличный результат, по сравнению с исходным.
По окончании первого этапа работ был составлен для клиента список рекомендаций по работе с сайтом, а также план по дальнейшей оптимизации быстродействия сайта и улучшению показателей.
Увеличение скорости загрузки сайта и рост его быстродействия делает ресурс более удобным, позитивно влияет на результат его продвижения в поисковиках.
Смотреть подобный проект - интернет-магазин «Упаковка для бизнеса U2B»