История кейсаЦелевые показатели ускоренияРаботы по ускорениюФинальные замеры Еще в 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: Подкинуть сборку для Gulp. Работу со стилями ведем теперь в файлах .scss. Команды для сборки в консоли 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 получили зеленую зону. Хотите ускорить свой сайт? Обращайтесь, сделаем сайт быстрым! Отправить заявку
28 июня 2022 Ускорение сайта «Самараплитка» на MODX CMS Расскажем про ускорение сайта на MODX CMS: начальные данные, полученные результаты, проведенные работы по ускорению.
5 июля 2021 Ускорение сайта для «Пегас-агро» более чем в 10 раз Про ускорение нового сайта по производству сельскохозяйственной техники, а также ценные рекомендации по улучшению скорости загрузки веб-ресурсов от наших специалистов.
30 апреля 2021 Кейс: ускорение сайта на Битрикс за 6 шагов для фонда «Бельканто» К нам на ускорение попал сайт благотворительного фонда «Бельканто». Фонд занимается поддержкой уникальных культурных проектов, организацией концертов классической, этнической и современной музыки, фестивалей различных жанров, объединяющих музыку, живопись, литературу и хореографию, оперных спектаклей, литературно-музыкальных и мультимедийных представлений, интерактивных шоу для детей. В этом кейсе расскажем, как за 60+ часов удалось ускорить сайт из красной зоны в зеленую.