Речь про Core Web Vitals: показатели, по которым видно, насколько быстро открывается основной контент, не «прыгает» ли вёрстка и удобно ли взаимодействовать со страницей.
В этой статье разберём практический чек-лист перед запуском, чтобы на боевом проекте не получить LCP выше 2,5 секунды и CLS больше 0,1.
Что проверяем в первую очередь
Для сайта на Битрикс особенно важно смотреть не только главную страницу. Часто главная уже оптимизирована, а проблемы появляются в каталоге, карточках товаров, разделе услуг, статьях или на странице оформления заказа.
Перед запуском стоит проверить минимум:
-
главную страницу;
-
страницу раздела каталога;
-
карточку товара;
-
страницу поиска;
-
корзину;
-
оформление заказа;
-
мобильную версию;
-
страницы с баннерами и слайдерами;
-
страницы с большим количеством изображений.
Если проект B2B или интернет-магазин, обязательно проверяем страницы с авторизацией, персональными ценами, фильтрами и остатками. Именно там часто появляются тяжёлые компоненты и динамические блоки.
1. Найдите главный элемент LCP
LCP — это время загрузки самого крупного видимого элемента на первом экране. Обычно это баннер, большое изображение, заголовок, карточка товара или блок с основным контентом.
На Битрикс-проектах LCP часто портят:
-
тяжёлый hero-баннер на главной;
-
большая картинка товара;
-
слайдер на первом экране;
-
фоновые изображения;
-
медленный вывод каталога;
-
блоки, которые ждут ответа от 1С, CRM или внешнего API.
Что сделать перед запуском:
-
определить LCP-элемент для ключевых страниц;
-
сжать изображение первого экрана;
-
использовать современные форматы изображений;
-
не загружать огромный баннер «как есть»;
-
не ставить lazy loading на изображение, которое должно быть видно сразу;
-
проверить мобильную версию отдельно.
Главная мысль простая: первый экран должен появляться быстро. Всё, что не нужно пользователю сразу, можно загрузить позже.
2. Проверьте изображения
Изображения — частая причина плохого LCP. На сайте может быть хороший сервер, аккуратный шаблон и кеширование, но один баннер весом несколько мегабайт испортит результат.
Перед запуском проверяем:
-
размер изображений на главной;
-
изображения в карточках товаров;
-
превью в каталоге;
-
баннеры;
-
фоновые картинки;
-
изображения в статьях;
-
мобильные версии картинок.
Что важно: не нужно отдавать на мобильный телефон изображение шириной 2500 пикселей, если на экране оно занимает 360 пикселей. Это типичная ошибка.
Для Битрикс-проекта лучше заранее настроить генерацию нужных размеров изображений и не полагаться на то, что контент-менеджер всегда загрузит идеальный файл.
3. Не давайте странице «прыгать»
CLS показывает, насколько сильно элементы страницы смещаются во время загрузки. Пользователь читает текст или хочет нажать кнопку, а в этот момент сверху догружается баннер, шрифт или блок рекомендаций — страница сдвигается.
На Битрикс-сайтах CLS часто появляется из-за:
-
баннеров без заданной высоты;
-
изображений без размеров;
-
слайдеров, которые инициализируются после загрузки;
-
рекламных или промо-блоков;
-
всплывающих плашек;
-
виджетов чата;
-
подгружаемых блоков корзины, авторизации или персональных цен.
Что сделать:
-
задавать ширину и высоту для изображений;
-
резервировать место под баннеры и слайдеры;
-
не вставлять блоки сверху страницы после загрузки;
-
аккуратно подключать чат, попапы и внешние виджеты;
-
проверять, как ведёт себя шапка сайта при авторизации;
-
не менять высоту карточек товаров после догрузки цен и остатков.
Если блок будет загружен позже, под него всё равно должно быть заранее оставлено место.
4. Проверьте шрифты
Шрифты могут влиять и на скорость, и на визуальные сдвиги. Если сначала отображается один шрифт, потом другой, текст может поменять размер и сдвинуть элементы.
Перед запуском стоит проверить:
-
сколько файлов шрифтов подключается;
-
какие начертания реально используются;
-
не загружаются ли лишние веса;
-
не блокирует ли шрифт отображение текста;
-
не меняет ли текст размеры после загрузки.
Часто достаточно оставить только нужные начертания и корректно настроить загрузку шрифтов. Не нужно подключать весь набор, если в дизайне используются только regular и bold.
5. Уберите лишние скрипты с первого экрана
На боевых сайтах быстро накапливаются внешние скрипты: аналитика, пиксели, чаты, коллтрекинг, карты, формы, виджеты, A/B-тесты.
Каждый из них может быть полезен, но все вместе они замедляют первый экран.
Перед запуском проверьте:
-
какие скрипты подключены в шаблоне;
-
какие нужны на всех страницах;
-
какие можно грузить только там, где они используются;
-
какие можно отложить;
-
нет ли дублей аналитики;
-
не подключается ли карта на всех страницах ради одного блока «Контакты».
Для Битрикс это особенно важно: иногда скрипт добавили в общий шаблон, и он загружается на каждой странице, хотя нужен только в одном разделе.
6. Настройте кеширование компонентов
Битрикс может работать быстро, если правильно использовать кеширование. Но если компоненты каждый раз собирают каталог, меню, фильтры и списки товаров заново, серверная часть начинает тормозить.
Перед запуском проверьте:
-
включено ли кеширование у компонентов;
-
не сбрасывается ли кеш слишком часто;
-
нет ли компонентов без необходимости работающих в режиме без кеша;
-
корректно ли кешируются меню, списки, новости, каталог;
-
не смешиваются ли персональные данные со статическим контентом.
Для интернет-магазинов важно не кешировать то, что зависит от конкретного пользователя: корзину, авторизацию, персональные цены, индивидуальные скидки. Но всё остальное не должно пересобираться без причины.
7. Проверьте композитный режим
Композитный режим на Битрикс может помочь ускорить отдачу страниц, особенно для неавторизованных пользователей. Но его нельзя просто включить и забыть.
Перед запуском нужно проверить:
-
какие страницы попадают в композитный кеш;
-
корректно ли работают корзина и авторизация;
-
не кешируются ли персональные данные;
-
не ломаются ли фильтры и динамические блоки;
-
правильно ли обновляются области, которые должны меняться.
Композит полезен, когда статическая часть страницы отделена от динамической. Если в шаблоне всё смешано, сначала нужно навести порядок в логике компонентов.
8. Не забывайте про мобильную версию
Core Web Vitals часто проседают именно на мобильных устройствах. На десктопе всё может быть хорошо, а на смартфоне — медленный первый экран, тяжёлые изображения, прыгающие блоки и перегруженная шапка.
Перед запуском проверяем:
-
первый экран на мобильном;
-
вес изображений;
-
высоту баннеров;
-
меню;
-
фильтры;
-
карточки товаров;
-
липкие кнопки;
-
попапы;
-
форму заказа.
Особенно внимательно стоит смотреть мобильный каталог. Фильтры, сортировка, карточки и кнопки покупки не должны сдвигать страницу после загрузки.
9. Проверьте реальные страницы, а не только тестовую главную
Одна из типичных ошибок — прогнать PageSpeed только для главной страницы. Но пользователь чаще приходит не на главную, а в карточку товара, статью, раздел каталога или посадочную страницу из рекламы.
Перед запуском лучше составить список URL:
-
3–5 популярных страниц каталога;
-
3–5 карточек товаров;
-
главная;
-
корзина;
-
оформление заказа;
-
страница услуги;
-
статья или новость;
-
страница с формой.
Так проверка будет ближе к реальному использованию сайта.
Короткий чек-лист перед запуском
Перед релизом сайта на Битрикс проверьте:
-
LCP-элемент на ключевых страницах;
-
вес и размеры изображений;
-
баннеры и слайдеры на первом экране;
-
наличие width и height у изображений;
-
отсутствие скачков вёрстки;
-
загрузку шрифтов;
-
лишние скрипты и виджеты;
-
кеширование компонентов;
-
работу композитного режима;
-
мобильную версию;
-
страницы каталога и карточки товаров;
-
корзину и оформление заказа;
-
реальные данные, а не только тестовый контент.
Как мы подходим к проверке Core Web Vitals
Мы проверяем Core Web Vitals не в самом конце, когда сайт уже готов к запуску, а ещё на этапе сборки шаблонов и компонентов. Так дешевле исправлять проблемы.
Для проектов на 1С-Битрикс мы смотрим не только фронтенд, но и серверную часть: кеширование, компоненты, структуру шаблонов, композитный режим, работу каталога, динамические области и внешние интеграции.
Наша задача — не просто получить зелёную оценку в одном тесте, а сделать так, чтобы сайт быстро открывался на реальных устройствах и не раздражал пользователя скачущей вёрсткой.
Короткий вывод
Core Web Vitals — это не абстрактная техническая метрика. Это про то, как быстро пользователь видит страницу и насколько спокойно он может с ней взаимодействовать.
На Битрикс чаще всего проблемы возникают из-за тяжёлых изображений, слайдеров, лишних скриптов, неаккуратных динамических блоков и неправильного кеширования.
Если проверить эти вещи до запуска, можно избежать ситуации, когда боевой сайт уже опубликован, реклама запущена, а первые пользователи видят медленный первый экран и прыгающую страницу.