Как оптимизировать страницу под PageSpeed: LCP, INP, CLS и чек-лист

PageSpeed Insights показывает оценку от 0 до 100 и длинный список советов. Из-за этого кажется, что задача – дотянуть цифру до зелёной зоны любой ценой. На деле оценка – только сводка. Важнее понять, какие метрики проседают и что именно на странице их тянет вниз.

Ниже – как читать отчёт, что значат LCP, INP, CLS, FCP и TBT, какие причины встречаются чаще всего и как их исправлять. В конце – разбор нашего сайта ntsame.agency с реальными цифрами и чек-лист.

Что показывает PageSpeed Insights

В отчёте два разных блока данных, и их важно не путать.

• Данные реальных пользователей (полевые данные). Это Core Web Vitals из отчёта Chrome UX Report: как сайт открывался у настоящих посетителей за последние 28 дней. Оценивается 75-й процентиль: метрика «хорошая», если так быстро страница открылась хотя бы у трёх посетителей из четырёх. Именно эти данные Google использует как сигнал ранжирования. У сайтов с небольшим трафиком блока может не быть.
• Лабораторные данные (Lighthouse). Один тестовый прогон на серверах Google: для мобильной версии – с эмуляцией телефона среднего класса и замедленного мобильного интернета. Отсюда и берётся оценка 0–100. Лабораторный тест удобен, чтобы искать причины и проверять исправления, но от запуска к запуску результат колеблется на несколько баллов.

Начинайте с вкладки «Мобильный телефон»: условия теста там жёстче, и большинство покупателей приходит с телефона. Цвета оценки: 90–100 – зелёный, 50–89 – оранжевый, 0–49 – красный.

Метрики: LCP, INP, CLS, FCP и TBT

Core Web Vitals – это три метрики: LCP, INP и CLS. FCP и TBT – вспомогательные, но по ним удобно искать причины. Пороги ниже – рекомендации Google.

В лабораторной оценке больше всего весят TBT, LCP и CLS. INP в лабораторном тесте измерить нельзя – там нет живого пользователя, поэтому его заменяет TBT: если основной поток долго занят скриптами, страница и в реальности будет медленно отвечать на нажатия.

Изображения

Картинки – самая частая причина плохого LCP: главный баннер весит мегабайт, грузится в размере для огромного монитора или ждёт своей очереди за десятком других файлов.

• Современные форматы. WebP обычно заметно легче JPG и PNG при том же качестве, AVIF – ещё легче. Браузер может получать новый формат автоматически, а старые файлы остаются запасным вариантом.
• Размер под экран. Атрибуты srcset и sizes позволяют отдавать телефону картинку под его ширину, а не под широкий монитор.
• Ленивая загрузка – только ниже первого экрана. loading="lazy" на картинках внизу страницы экономит трафик. Но главную картинку первого экрана откладывать нельзя: это прямо ухудшает LCP.
• Приоритет для главной картинки. fetchpriority="high" говорит браузеру загрузить её раньше остального.
• Размеры в разметке. width и height у каждой картинки резервируют место заранее, и вёрстка не прыгает – это про CLS.

Шрифты

Шрифт может задерживать текст: браузер ждёт файл и не показывает заголовок, пока его не получит.

• Используйте формат WOFF2 и подключайте только нужные начертания и наборы символов (например, латиницу и кириллицу отдельными файлами).
• Добавьте font-display: swap, чтобы текст сразу показывался системным шрифтом, а затем подменялся.
• Основной шрифт первого экрана можно загрузить заранее через <link rel="preload">. Пять начертаний одного шрифта – уже повод задуматься, все ли они нужны.

Сторонние скрипты: GTM, пиксели, чаты

Google Tag Manager, Meta Pixel, Microsoft Clarity, онлайн-чаты, виджеты отзывов и обратного звонка – каждый скрипт по отдельности небольшой, но вместе они занимают основной поток как раз тогда, когда страница должна отрисоваться. В отчёте это видно по высокому TBT и пункту «Сократите влияние стороннего кода».

• Отложенный запуск. Скрипты аналитики и маркетинга запускаются не при загрузке, а после первого действия посетителя: прокрутки, клика, касания или нажатия клавиши. Посетитель, который читает страницу, их не замечает.
• Чат – по требованию. Вместо полного виджета на старте показывайте лёгкую кнопку, а сам чат загружайте по клику.
• Ревизия. Пиксели давно закрытых рекламных кампаний и забытые тестовые счётчики встречаются почти на каждом сайте. Лишнее – удалить.

У отложенного запуска есть цена: визиты, которые закончились без единого действия, счётчики не увидят. Для большинства сайтов это приемлемо, но решение стоит принять осознанно, вместе с маркетингом.

CSS и JavaScript

• Скрипты, которые не нужны для первого экрана, подключайте с defer, чтобы они не блокировали отрисовку.
• Не грузите всё везде: слайдер, карта и калькулятор доставки нужны на одной-двух страницах, а не на каждой. Это особенно касается плагинов WordPress и модулей OpenCart.
• Стили, нужные для первого экрана, можно встроить прямо в страницу, а остальное загрузить позже.
• Вкладка «Покрытие» в Chrome DevTools показывает, какая часть CSS и JS на странице вообще не используется.

Кэш страниц и время ответа сервера

TTFB – время, за которое сервер начинает отдавать страницу. Пока его нет, браузер ничего не делает, поэтому медленный ответ сервера сдвигает все остальные метрики. Ориентир Google – до 0,8 с.

• Кэш страниц. На WordPress и OpenCart каждая страница по умолчанию собирается заново: запросы к базе, плагины, шаблоны. Кэш хранит готовый HTML и отдаёт его без этой работы.
• Сжатие и кэш статики. Gzip или Brotli для текста, долгий срок кэширования для картинок, стилей и скриптов с версией в имени файла.
• Сервер и CDN. Если после кэша ответ всё равно медленный, проблема в хостинге или расстоянии до посетителей. Но переезжать стоит после того, как убраны причины в коде.

Сдвиги вёрстки: CLS

CLS растёт, когда что-то появляется на странице позже остального и сдвигает текст. Покупатель целится в кнопку, а попадает в баннер.

• Картинки и видео без width и height (или aspect-ratio в CSS).
• Баннеры, cookie-уведомления и плашки акций, которые вставляются над контентом. Резервируйте под них место или показывайте поверх страницы.
• Встроенные блоки: карты, видео, виджеты отзывов – задайте контейнеру фиксированную высоту.
• Шрифты, которые после загрузки заметно меняют ширину текста.

Разбор: как мы оптимизировали ntsame.agency

Наш сайт работает на WordPress с собственной темой. Проверка страницы /locations/dubai/ в PageSpeed Insights:

Метрики на компьютере: FCP 0,3 с, LCP 0,5 с, TBT 0 мс, CLS 0,001. Что для этого сделали:

1. WebP-копии изображений. Для картинок темы и медиатеки создаются WebP-версии, и браузер получает лёгкий файл автоматически.
2. Lazy loading и fetchpriority. Всё ниже первого экрана грузится по мере прокрутки, главная картинка – с высоким приоритетом.
3. Отложенный запуск GTM, Meta Pixel и Clarity. Счётчики стартуют после первого действия посетителя, поэтому в первой загрузке не участвуют – отсюда TBT 0 мс.
4. Свой дисковый кэш страниц. Готовый HTML отдаётся без запуска WordPress. Время ответа сервера сократилось с 0,6 до 0,15 с.
5. Переходы без перезагрузки. Библиотека Swup подменяет только содержимое страницы, а шапка, стили и скрипты при переходе не загружаются заново.

Подробнее об этих работах – на странице ускорения сайта, там же кейс ntsame.agency с оценками для телефона и компьютера.

Скорость, SEO и продажи

Core Web Vitals – один из сигналов ранжирования Google, но не главный: содержание страницы важнее. Сильнее скорость влияет на поведение. Медленную страницу чаще закрывают, не дождавшись первого экрана, поэтому скорость – один из пунктов нашего чек-листа CRO для интернет-магазина.

Если впереди редизайн или переезд, заложите скорость в техзадание сразу и не потеряйте позиции при переносе – об этом наш чек-лист переноса сайта. А то, что можно оптимизировать, во многом зависит от платформы: сравнение в статье OpenCart, WooCommerce, Shopify или Laravel.

Чек-лист оптимизации страницы

1. Проверить страницу в PageSpeed Insights на вкладке «Мобильный телефон», сравнить полевые и лабораторные данные.
2. Найти LCP-элемент в отчёте и убедиться, что он не загружается лениво и имеет fetchpriority="high".
3. Перевести изображения в WebP или AVIF и отдавать их в размере под экран.
4. Добавить loading="lazy" картинкам ниже первого экрана.
5. Прописать width и height всем картинкам, видео и встроенным блокам.
6. Оставить только нужные начертания шрифтов в WOFF2 с font-display: swap.
7. Отложить запуск GTM, пикселей, чатов и виджетов до первого действия посетителя.
8. Удалить неиспользуемые счётчики, плагины и библиотеки.
9. Подключить скрипты с defer и не грузить их на страницах, где они не нужны.
10. Включить кэш страниц, сжатие и кэширование статики. Проверить TTFB.
11. Зарезервировать место под баннеры и уведомления, чтобы не было сдвигов вёрстки.
12. Повторить замер несколько раз и через 28 дней проверить полевые данные.

Читайте по теме: 12 мест, где интернет-магазин теряет покупателей; редизайн без потери позиций; как скорость загрузки сайта влияет на продажи.

Ускорим ваш сайт

Замерим ключевые страницы, покажем, что именно тормозит, и исправим это в коде – без редизайна. Подробности на странице ускорения сайта. Напишите нам через форму на сайте, в Telegram, WhatsApp или на e-mail.