Как мы ускорили сайт интернет-магазина Магофис в 2,2 раза

О клиенте

ООО “Магофис” является одним из лидеров на рынке поставки офисной мебели в Северо-Западном регионе. Компания обеспечивает клиентов качественной, стильной и функциональной офисной мебелью по доступным ценам и имеет широкую линейку продукции на своем интернет –магазине.

Что надо было сделать

Быстрая скорость загрузки сайта — один из важных факторов не только для удобства посетителей, но и для ранжирования сайта в поисковых системах. Если страница долго не загружается и медленно обновляется, клиенты уходят, растет процент отказов. 

Клиент обратился к нам в с просьбой увеличить скорость загрузки интернет-магазина «Магофис» — это проект на Битрикс, выполнен на готовом решении Аспро.

Проблемы интернет-магазина до оптимизации

На сайте реализовано много функций, которые снижали его производительность: каталог с большим количеством товаров и фильтры. В результате скорость загрузки страниц была очень низкой. Это негативно сказывается на пользовательском опыте, лояльности клиентов и позициях сайта в результатах поиска.

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

На момент начала работ показатели скорости были довольно низкими. Для оценки скорости загрузки мы использовали Google PageSpeed Insight. Показатели были следующие по скорости загрузки мобильной и десктопной версии:

Как видим на изображении, на карточках товара долго грузились фотографии

Работы по оптимизации скорости загрузки сайта на Битрикс

На скорость загрузки сайта влияет множество факторов в совокупности, каждый из которых нужно оценивать и смотреть детально в разрезе ситуации, при этом, проверка не должна мешать функционал сайта, так как заказы идут постоянно. 

Оценка состояния сайта

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

1. Настройка автокеширования и его очистка по регламенту Битрикс.

2. Работа с БД

3. Оптимизация самого Битрикс под работу шаблона

4. Оптимизация CSS

5. Оптимизация JS

6. Настройка отладка быстродействия сайта

7. Оптимизация картинок и перевод их в веб формат

Как кеширование данных сайта влияет на скорость загрузки

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

• очередь из запросов (запросы сами по себе быстрые, но когда их становится  много, то БД начинает выстраивать из них очередь);

• запросы медленные, массивные и частые.

Для разгрузки наиболее загруженных мест по времени мы настроили кеширование компонентов в Bitrix. Теперь, все компоненты, у которых был включен режим автокеширования, создадут кеши и полностью перейдут в режим работы без запросов к БД.

Добавили также кеширование меню. Вызов меню из кеша быстрее в 4 раза. В целом, на данном моменте, это не сильно влияет на скорость сайта, но в будущем, если меню будет расширяться, разница до и с кешированием будет ощутимая.

Проверка системы

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

Работа с БД

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

Минификация исходного кода страницы, css и js файлов

Скорость загрузки страниц сайта зависит от объема загружаемых данных. Чем меньше объем загружаемых файлов на сайте, тем быстрее он работает. 

Что мы сделали в этой части работ:

• Изучили компонент каталога на наличие лишнего кода, код страниц был огромный. 

• Удалили лишние скрипты с шаблонов каталога, 

• Сократили шаблоны для умного фильтра, пагинации, 

• Убрали ненужные скрипты, убрали лишние отступы, переносы, ненужные директивы.

В итоге листинг стал занимать 2355 строк. Почистили неиспользуемые стили, сжали большие css файлы.

Оптимизация JS

Чаты и виджеты на сайтах Битрикс могут очень сильно повлиять на скорость загрузки. На сайте “Магофис” используется чат, который загружался сразу с загрузкой страниц и заметно снижал скорость загрузки на 4,5 секунды. Для решения этой проблемы мы решили отложить загрузку скрипта на 4 сек, потому что вся страница загружается примерно 3 сек. С точки зрения покупателя, который зашел на сайт и увидел сообщение чата чуть позже, не проблема, но при этом по скорости получили выигрыш в 26%.

Также, если на страницах есть скрипты Яндекс карт, их загрузку нужно отложить на несколько секунд. Желательно до момента показа по скроллу или после полной загрузки всего контента страницы. 

Оптимизация изображений в Битриксе

Размер и формат загружаемых картинок влияет на скорость, когда они составляют большую часть контента: баннеры, фотографии товаров, изображения в статьях, новостях. Так как сайт “Магофис” интернет-магазин, с большим количеством изображений, то это как раз существенно увеличит скорость загрузки.

Что сделали по оптимизации картинок:

1. Уменьшили вес картинок, сохранив при этом их качество. 

Для оптимизации изображений провели ряд работ на сервере по переводу изображений в формат webp. Далее наши программисты написали скрипт по сжатию и переводу картинок в формат webp. 

На сайте лучше избегать публикации картинки шире 1920 px. Когда картинка занимает четверть экрана, нужно масштабировать её до 480 px.  В данном  случае, CMS позволяют загрузить разные изображения для десктопов и мобильных, что тоже упрощает процесс загрузки.

Публикация изображений нужного масштаба значительно уменьшит объём контента и скорость загрузки и браузер не будет тратить лишние ресурсы.

2. Сделали Отложенную загрузку изображений: картинки на сайте подгружаются с сервера по скроллу, визуально это практически незаметно, но значительно сокращает скорость обработки.

Как еще ускорить сайт на 1С-Битрикс

Дополнительно программист проработал Фасетные индексы

Результаты работ по оптимизации скорости

Получили отличные результаты, клиент остался доволен, так как получил все, что хотел, а реальные показатели оказались выше, чем он предполагал на начальном  этапе. Посещаемость страниц возросла, вместе с тем снизился процент отказов до 31%

Анализ скорости загрузки до и после релиза задач с кэшем.

Показатели по Google PageSpeed Insights вышли в «зеленую зону» для ПК и оранжевую для мобильных устройств:

Суммарно на все задачи было потрачено 120 часов.

Над проектом работали

• Senior Project Manager

• PHP Developer

• Middle Markup Developer

• Специалист Б24

• Программист PHP для проектов на Битрикс (БУС)