Оставить заявку

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

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

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

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

История кейса

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

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

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

Целевые показатели ускорения

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

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

В секундах Цветовой код
0–1,8     Зеленый (быстро)
1,8–3     Оранжевый (средне)
> 3 Красный (медленно)

 

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

В секундах Цветовой код
0–3,4  Зеленый (быстро)
3,4–5,8    Оранжевый (средне)
> 5,8 Красный (медленно)

 

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

В секундах Цветовой код
0–2,5  Зеленый (быстро)
2,4–4 Оранжевый (средне)
> 4 Красный (медленно)

 

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

В секундах Цветовой код
0–3,8  Зеленый (быстро)
3,9-7,3 Оранжевый (средне)
> 7,3 Красный (медленно)

 

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

В миллисекундах Цветовой код
0–200 Зеленый (быстрая загрузка)
200–600 Оранжевый (средняя загрузка)
> 600 Красный (медленная загрузка)

 

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

В миллисекундах Цветовой код
0–100 Зеленый (быстрая загрузка)
100–250 Оранжевый (средняя загрузка)
> 250 Красный (медленная загрузка)

 

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

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

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

Работы по ускорению

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

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

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

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

Асинхронная загрузка веб-аналитики — достаточно стандартный подход, который присутствует в любом кейсе по ускорению.

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

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

Показатель 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.

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

Значения показателей после сборки CSS в Gulp

Показатели 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

Будьте внимательны с атрибутом defer у скриптов: неверно заданная очередность может приводить к потере части рабочих стилей.

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 получили зеленую зону.

 

Хотите ускорить свой сайт?

Обращайтесь, сделаем сайт быстрым!

Рекомендуем почитать

Хотите попробовать с нами?

Оставьте заявку или позвоните нам по номеру 8 (800) 775-67-49.

Оставить заявку
след самолета
Нажмите и держите для максимального увеличения