Кейс ускорения сайта salon.aqualogo.ru на MODx

Еще в 2020 году в Google представили концепцию Core Web Vitals — показателей скорости загрузки и отрисовки контента, влияющего на ранжирование и формирование поисковой выдачи. Ее цель, прежде всего, состоит в улучшении пользовательского опыта.

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

Сайт аквариумного салона Аква Лого salon.aqualogo.ru работает на движке MODx Revolution™. Это бесплатная и удобная CMS для небольших сайтов с ассортиментом в пределах разумного.

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

Чтобы клиентам было комфортнее это делать, было решено провести работы по ускорению сайта.

Для контроля скорости загрузки используются несколько показателей:

FCP (First Contentful Paint/Первая отрисовка контента) измеряет время с момента начала загрузки страницы до момента, когда какая-либо часть контента: текста, изображений — отобразится на экране. 

SI (Speed Index/Индекс скорости загрузки) отражает, сколько времени потребуется браузеру на полную загрузку контента страницы.

LCP (Largest Contentful Paint/Отрисовка крупного контента) считает время отрисовки основного, самого крупного контента. Входит в Core Web Vitals.    

TTI (Time to Interactive/Время загрузки для взаимодействия) — время до полного взаимодействия с пользователем. Страница считается интерактивной, если на ней отображен весь контент (значение FCP) и скорость реагирования на действия пользователя составляет до 50 мс.

TBT (Total Blocking Time/Время блокировки ввода) — время между отрисовкой первых элементов до момента, когда можно взаимодействовать со страницей.  

CLS (Cumulative Layout Shift/Совокупное смещение макета) обозначает стабильность верстки. Показатель CLS показывает, как сильно сдвигается верстка в процессе загрузки и подгружаются ли при этом блоки, препятствующие взаимодействию с контентом. Входит в Core Web Vitals.    

Каждый из показателей имеет свой вес в определении общей оценки страницы.

В качестве инструмента измерения мы в данном кейсе используем PageSpeed Insights от Google и панель Network браузера Chrome в двух режимах: No throtting (Без ограничения) и Fast 3G (Высокая скорость).

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

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

2. TBT самая мощная часть в оценке, поэтому работы начинаем именно с этого показателя. 

Главная страница. Начало работы с подъёмом TBT — отложена в отдельный файл загрузка веб-аналитики и карт. В картах появилась сложность: на самой странице карта на API JS, но также есть поп-ап с картой на API constructor. Поэтому карты приведены к единому API JS и отложены.

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

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

Результат: Теперь TBT у всех зеленое👌

3. Следующим шагом поднимаем FCP/LCP.

Тут есть замечание. Обычно производится сборка всех CSS в один файл, который минифицируется. Но можно попробовать выделить критические стили и остаток положить во второй файл. Ссылка на такую практику https://web.dev/defer-non-critical-css/.

Однако для этой задачи такой метод стал менее эффективным, чем классическая сборка стилей. В итоге для сборки задействовали Gulp.

Схема работы с Gulp:

1. Подкинуть сборку для Gulp.
2. Работу со стилями ведем теперь в файлах .scss.
3. Команды для сборки в консоли npm run dev и npm run prod.

Результат: Стили пересобраны в общий файл.

Показатели FCP улучшились:

• salon.aqualogo.ru 54/79
• salon.aqualogo.ru/akvariumyi/na-zakaz 54/55
• salon.aqualogo.ru/akvariumyi/akvarium-pod-klyuch 80/85
• salon.aqualogo.ru/akvariumyi/obsluzhivanie 75/93
• salon.aqualogo.ru/portfolio/morskoj-akvarium-akva-logo-obemom-1400-litrov-v-ofise.html 71/95

4. Заключительным шагом обучаем сайт изображениям WEBP. Учитывая количество изображений, это улучшит LCP, а тот подтянет TTI.

C помощью Gulp создаем копии изображений в .webp, теперь они легче и технологичнее.

Делаем перенаправление для всех изображений (если у него есть копия формата .webp, иначе отдаст исходник):
https://salon.aqualogo.ru/assets/images/serve_1.png (715kB) => https://salon.aqualogo.ru/assets/images-webp/serve_1.webp (253kB) (будет еще чуть быстрее, особенно для мобильных на 3G/4G).

Доделав WEBP, тестируем примененные изменения.

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

На десктопах мы подтянули суммарную оценку с 54 до 80. Показатель FCP вошел в зеленую зону, а LCP в желтую. TTI и TBT значительно ускорились и вошли в зеленую зону.

На мобильных устройствах мы поднялись из красной оценки 13 в крепкую желтую 60. FCP, CLS и TBT получили зеленую зону.