Что на самом деле измеряют эти три числа
LCP — Largest Contentful Paint — это время до отрисовки самого крупного видимого элемента: hero-изображения, заголовочного блока. Из всех метрик она ближе всего к вопросу «когда страница ощутилась загруженной». Хорошо — меньше 2,5 секунды для 75-го перцентиля реальных визитов.
INP — Interaction to Next Paint — измеряет, сколько времени страница видимо отвечает после тапа, клика или нажатия клавиши, на протяжении всего визита. Хорошо — меньше 200 мс. В 2024 году она заменила FID и строже его: она ловит ту вязкость, которую пользователи чувствуют на перегруженных JavaScript страницах, а не только первое взаимодействие.
CLS — Cumulative Layout Shift — оценивает, насколько видимый контент двигается без запроса пользователя: абзац, который вы читали, прыгает из-за загрузившейся рекламы; кнопка сместилась ровно в момент тапа. Хорошо — меньше 0,1, и в отличие от двух других это безразмерный балл, а не время.
Полевые и лабораторные данные: каким числам верить
PageSpeed Insights показывает два разных мира. Верхняя секция — «что увидели реальные пользователи» — это полевые данные от пользователей Chrome за 28 дней, и именно их использует Google. Нижний балл — лабораторная симуляция на замедленном железе: полезна для диагностики, обманчива как цель.
Практические следствия: лабораторный балл 60 при зелёных полевых данных означает, что у вас всё в порядке; идеальная лаборатория при красном «поле» означает, что реальные посетители в реальных сетях страдают, а лабораторная машина — нет. Оптимизируйте под полевые числа, лабораторный отчёт используйте, чтобы понять, ПОЧЕМУ они такие, — и помните, что полевые данные запаздывают: сегодняшнее исправление полностью проявится в них лишь через срок до 28 дней.
Чиним LCP: в основном задача доставки
LCP раскладывается на части: время получить HTML, время обнаружить главное изображение, время его скачать, время отрисовать. Три из этих четырёх — доставка; поэтому LCP — тот показатель, который CDN двигает сильнее всего, и правильная первая цель.
Рычаги в порядке влияния: отдавайте HTML и ресурсы из кеша на edge, чтобы первые байты приходили с ближайшей точки, а не с вашего origin; конвертируйте hero-изображения в WebP/AVIF и подгоняйте их под реальный размер показа, вместо того чтобы отгружать файлы в разрешении камеры; сжимайте текст, который должен прийти до отрисовки. На cdn.com.tr все три — настройки правила доставки: кеширование на edge, автоматическая оптимизация изображений в WebP/AVIF и Brotli/Gzip, — так что самые крупные рычаги LCP оказываются переключателями, а не переделкой сайта. На стороне приложения дайте hero-изображению высокий приоритет загрузки и никогда не подключайте к нему lazy-loading: ленивая загрузка LCP-элемента — самая частая самострельная рана по LCP.
Чиним CLS: резервируйте место
У сдвига вёрстки одна корневая причина: контент приходит, а место под него не зарезервировано. Исправления негламурны и надёжны. Дайте каждому изображению и видео явные атрибуты width и height (или aspect-ratio в CSS), чтобы браузер зарезервировал коробку до прихода файла. Дайте рекламным слотам и embed-блокам контейнеры фиксированного размера, которые держат место независимо от того, загрузился контент или нет. Предзагружайте кастомные шрифты и используйте такие стратегии font-display, при которых поздняя подмена шрифта не перевёрстывает страницу. И никогда не вставляйте баннеры над уже показанным контентом после загрузки — этот единственный паттерн стоит за большинством ужасных баллов CLS.
CLS — тот показатель, где выходные, потраченные на расстановку атрибутов, регулярно выводят проваливающуюся страницу в зелёную зону.
Чиним INP: меньше JavaScript в главном потоке
INP — самый упрямый из трёх, потому что его причина структурная: слишком много JavaScript делает слишком много работы в том же потоке, который должен отвечать пользователю. Доставка помогает по краям — меньшие сжатые бандлы быстрее приходят и парсятся, — но настоящие исправления живут в приложении: разбивайте длинные задачи, чтобы браузер мог дышать между ними, откладывайте сторонние скрипты, которым незачем выполняться до взаимодействия, и режьте накопившийся за годы груз тег-менеджера. Сначала измерьте: панель производительности с обзором длинных задач точно показывает, какие скрипты держат поток.
Относитесь с подозрением к любому, кто обещает починить INP, не трогая ваш JavaScript: эта метрика существует именно потому, что одной доставкой отзывчивость не подделать.
Разумный порядок работы
Смотрите полевые данные для страниц, важных коммерчески, а не только для главной. Проваливается LCP — кеширование на edge, формат и размеры изображений, сжатие (набор доставки), затем приоритет загрузки. Проваливается CLS — размеры, зарезервированные слоты, загрузка шрифтов. Проваливается INP — закладывайте настоящую работу в приложении; ничто другое честно его не сдвинет. После каждого раунда перемеряйте в «поле» и закладывайте лаг до 28 дней.
И держите рамку: смысл не в значке. Те же 2,5 секунды, которые удовлетворяют метрику, — это разница между посетителем, который остался, и посетителем, который ушёл; значок — лишь место, где это видно.
Часто задаваемые вопросы
Действительно ли Core Web Vitals влияют на ранжирование?
Да — как один сигнал среди многих: скорее арбитр между сопоставимыми результатами, чем доминирующий фактор. Более крупный эффект для бизнеса обычно прямой: та же медлительность, что проваливает метрику, теряет посетителей ещё до того, как ранжирование вступает в игру.
Почему лабораторный балл плохой, а полевые данные зелёные?
Лаборатория симулирует медленное устройство в замедленной сети; ваша реальная аудитория может сидеть на железе получше. Зелёные полевые данные — тот ответ, который считается; лабораторию используйте только для диагностики, а не как цель.
Как быстро CDN улучшит мои показатели?
Механизм срабатывает сразу: закешированный на edge HTML и оптимизированные изображения меняют LCP уже при следующем некешированном визите. ОТЧЁТНЫЕ полевые числа двигаются в срок до 28 дней, потому что это скользящее окно реальных визитов.
Какой показатель чинить первым?
Тот, который проваливается в полевых данных на страницах, приносящих деньги. Если проваливаются несколько: сначала LCP (настройки доставки, самый быстрый выигрыш), затем CLS (дешёвые правки в приложении), в конце INP (настоящая работа с JavaScript).