Как ускорить сайт: практический план по LCP, INP и CLS

Сначала измерьте одну и ту же страницу одинаково

Выберите три характерных типа: главная, основная услуга и статья или товар. Запишите устройство, состояние кэша и условия проверки. Сделайте несколько замеров, потому что разовый результат может зависеть от соединения, фоновой нагрузки и сторонних сервисов.

Разделяйте лабораторную диагностику и данные реальных посетителей. Лабораторный тест помогает найти причину, а полевые показатели показывают накопленный пользовательский опыт. После исправления лабораторный результат может измениться сразу, полевой — позже. Для небольшого сайта данных о конкретном URL может не хватать; это не означает автоматически хорошую или плохую скорость.

Определите, какая проблема мешает посетителю

Core Web Vitals описывают разные стороны опыта. LCP связан с появлением крупного содержимого, INP — с откликом на действия, CLS — с неожиданными сдвигами. Ориентиры хорошего опыта: LCP до 2,5 секунды, INP до 200 мс и CLS не выше 0,1. В полевых оценках важен 75-й процентиль, а не лучший отдельный визит.

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

Для LCP проверьте самый крупный элемент первого экрана

Найдите элемент LCP в отчёте. Если это изображение, проверьте его фактический размер, формат, момент обнаружения браузером и приоритет загрузки. Для важного изображения первого экрана обычно не подходит отложенная загрузка, ожидающая прокрутки. Не назначайте высокий приоритет всем картинкам одновременно.

Ниже — учебный пример разметки; размеры и текст замените под своё изображение.

<img src="/assets/workshop.webp"
     width="1200" height="800"
     fetchpriority="high"
     alt="Рабочая зона мастерской">

Если задержка начинается до получения HTML, оптимизация картинки не устранит её полностью. Проверьте серверное время ответа, редиректы и работу кэша вместе с разработчиком.

Для INP разберите действия, которые тормозят

На телефоне последовательно откройте меню, переключите фильтр, раскройте FAQ и заполните форму. Отметьте действия с заметной задержкой. Запишите трассировку производительности для конкретного сценария и посмотрите, чем занят основной поток.

Частые кандидаты на проверку — тяжёлые обработчики, длинные вычисления после каждого ввода и скрипты виджетов. Загружайте необязательный функционал по мере необходимости, разбивайте длительные задачи и сокращайте работу в обработчиках. При этом сохраняйте основной сценарий: ускоренная форма бесполезна, если после оптимизации перестала отправляться. Повторяйте тест на том же действии и устройстве.

Для CLS зарезервируйте место под появляющиеся блоки

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

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

Внедряйте по одному изменению и проверяйте бизнес-сценарии

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

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