Ускорение интернет-магазина РусМарта на Битрикс

С помощью сервиса PageSpeed Insights мы зафиксировали текущие показатели:

Взяв задачу в работу, мы провели аудит сайта:

• проверили настройки хостинга, мощность и настройки сервера;
• изучили настройки в административной панели сайта;
• оценили работу скриптов;
• проверили, как выглядят SQL-запросы к базе данных сайта;
• выяснили текущий форматы отображения картинок, видео.

По итогу аудита составили план работ, согласовали его с клиентом и приступили к выполнению.

Ниже описаны шаги, которые мы предприняли, а также результаты, которые получили.

1. Первоочередной задачей стал перенос сайта с виртуального хостинга на выделенный сервер, так как особенности размещения сайта на хостинге не позволяли нам выполнить часть важных мероприятий по ускорению. Например, нельзя было настроить конвертацию формата картинок из jpeg и png в webp. Плюс, используя собственные настройки основных компонентов сервера (nginx, mysql, php, memcached), мы оптимизировали время обработки запросов и повысили скорость отдачи ответа сервера.

2. Одновременная загрузка тяжелых скриптов при открытии страницы тормозила своевременную отдачу контента. Поэтому следующим шагом отложили загрузку js-скриптов Яндекс.Метрики, Google Analytics, чатов, карт и некоторых других. 

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

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

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

4. Оптимизировали загрузку файлов js и css таким образом, что скрипты и стили, необходимые для отображения первого экрана, грузятся сразу, а все остальные — после загрузки контента.

5. Настроили на сервере программу и скрипт для конвертации изображений формата jpg и png в более современный формат webp. Он позволяет уменьшить размер файла изображения без потери качества. Веб-сервер по заголовкам запроса определяет, поддерживает ли браузер пользователя показ изображений формата webp, и если да, то отдает картинки нового формата.

6. Одним из важных моментов в работе сайта и его скорости является кеширование данных. Стандартное кеширование в CMS Bitrix — хранение данных в файлах на жестком диске сервера. Это позволяет хранить большой объем данных (в пределах размера жесткого диска), но имеет меньшую скорость выдачи. Для сайта rusmarta.ru мы использовали подход хранениния кеша в оперативной памяти сервера посредством memcache. Также в Битриксе есть инструмент дополнительного кеширования — «Композитный сайт», который мы подключили. Данный кеш также размещается в memcache.

7. Помимо прочего, был выполнен ряд настроек Битрикса инструментами CMS: исправлены ошибки, выявленные штатным тестированием, оптимизированы таблицы, созданы фасетные индексы, удалены неиспользуемые модули.

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

Таким образом, для мобильных устройств мы ускорили загрузку сайта в 10 раз. Для десктопов со среднего значения в 50 баллов, по оценке PageSpeed Insights, вывели в зону больше 80-ти баллов из 100 возможных. Здесь важно, что сам сайт довольно тяжелый, с большим количеством скриптов, часть из которых нельзя унести в отложенную загрузку. Наша основная задача — не красивые цифры GPSI, а реальное ускорение загрузки сайта. На «живых» устройствах сайт стал открываться заметно быстрее, особенно на мобильных. Задачу считаем выполненной.