Core Web Vitals — это набор метрик, определённых Google для измерения пользовательского опыта на веб-странице. С 2021 года эти метрики входят в сигналы ранжирования Google — что означает: низкая оценка может ухудшить ваши позиции в поиске. Изображения являются одним из ключевых факторов, влияющих на эти оценки — как в лучшую, так и в худшую сторону.
Три метрики Core Web Vitals
Google измеряет три аспекта пользовательского опыта через Core Web Vitals:
| Метрика | Что измеряет | Порог "Хорошо" | Порог "Требует улучшения" |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Время загрузки наибольшего видимого элемента | ≤ 2,5 секунды | 2,5–4 секунды |
| INP (Interaction to Next Paint) | Отзывчивость на взаимодействие пользователя | ≤ 200 мс | 200–500 мс |
| CLS (Cumulative Layout Shift) | Визуальная стабильность макета | ≤ 0,1 | 0,1–0,25 |
LCP и изображения: прямая связь
Метрика LCP (Largest Contentful Paint) измеряет время, необходимое для отображения наибольшего видимого элемента в окне браузера. В подавляющем большинстве веб-страниц таким элементом является изображение — hero-изображение, главный баннер, фото товара. Тяжёлое или плохо загруженное изображение напрямую отвечает за низкую оценку LCP.
Для улучшения LCP, связанного с изображениями:
- Использовать современные форматы: WebP и AVIF значительно легче JPEG и PNG при эквивалентном визуальном качестве
- Предзагружать LCP-изображение: добавьте тег <link rel="preload"> в <head>, чтобы браузер загружал hero-изображение в первую очередь
- Не использовать lazy loading для LCP-изображения: никогда не применяйте loading="lazy" к изображению, которое будет вашим LCP — это откладывает именно то, что измеряет Google
- Отдавать изображения через CDN: географическая близость сервера снижает Time to First Byte (TTFB), что напрямую влияет на LCP
- Правильно задавать размеры изображений: никогда не отдавайте изображение шириной 3000 пикселей для отображения в 800 пикселей
Полезно знать: определить, какое изображение является вашим LCP, можно с помощью PageSpeed Insights или Chrome DevTools (вкладка Производительность → нажмите на маркер LCP). Это определение — первый необходимый шаг перед любой оптимизацией.
CLS и изображения: сдвиги макета
Метрика CLS (Cumulative Layout Shift) измеряет неожиданные сдвиги макета во время загрузки. Изображения без заданных размеров — одна из наиболее частых причин низкой оценки CLS: браузер не знает размер изображения до его загрузки, что вызывает "прыжок" страницы при его появлении.
Решение простое и универсальное: всегда указывайте атрибуты width и height в тегах img. Это позволяет браузеру зарезервировать точное необходимое место ещё до загрузки изображения.
INP и изображения: косвенное влияние
Метрика INP (Interaction to Next Paint) измеряет отзывчивость страницы на взаимодействия пользователя (клики, ввод). Изображения не влияют на INP напрямую, но очень тяжёлые изображения, монополизирующие основной поток браузера, могут косвенно ухудшить эту метрику, блокируя обработку событий JavaScript.
Декодирование объёмных изображений (PNG в несколько мегабайт, TIFF высокого разрешения) может вызывать блокировку основного потока. Атрибут decoding="async" позволяет отложить это декодирование, чтобы не блокировать взаимодействия.
Лучшие практики работы с изображениями для Core Web Vitals
- Формат: используйте WebP или AVIF для всех контентных изображений
- Размеры: всегда указывайте width и height на всех тегах img
- Lazy loading: используйте loading="lazy" для всех изображений вне области видимости, кроме LCP-изображения
- Preload: предзагружайте только LCP-изображение с помощью <link rel="preload" as="image">
- Адаптивные изображения: используйте атрибут srcset для подачи нужного размера для каждого разрешения экрана
- Сжатие: сжимайте все изображения с помощью инструментов Squoosh, Sharp или ImageMagick перед публикацией
- CDN: размещайте изображения на CDN для снижения географической задержки загрузки
Полезно знать: Google PageSpeed Insights и Lighthouse — эталонные инструменты для измерения Core Web Vitals и выявления проблемных изображений. Google Search Console также предоставляет отчёт Core Web Vitals на основе реальных данных ваших посетителей (CrUX — Chrome User Experience Report), более надёжный, чем лабораторные тесты, для оценки реального опыта пользователей.