Изображения и Core Web Vitals: LCP, CLS, INP

С 2021 года Google использует Core Web Vitals как сигнал ранжирования в результатах поиска. Изображения оказывают прямое и существенное влияние на все три метрики. Понимание этой взаимосвязи необходимо для любой работы по SEO и производительности веб-страниц.

Что такое Core Web Vitals?

Core Web Vitals. это три метрики пользовательского опыта, измеряемые Google:

• LCP (Largest Contentful Paint): время до отрисовки самого крупного видимого элемента. Как правило, это изображение.
• CLS (Cumulative Layout Shift): насколько неожиданно смещается макет страницы. Изображения без указанных размеров. основная причина.
• INP (Interaction to Next Paint): отзывчивость на взаимодействие с пользователем. Тяжёлые изображения могут косвенно влиять на этот показатель.

LCP: метрика, больше всего зависящая от изображений

На 70–80% страниц элемент LCP. это изображение: обычно баннер-герой, главное фото или изображение товара. Google ожидает LCP менее 2,5 секунды. Типичные проблемы с изображениями, влияющие на LCP:

1. Изображение LCP загружается лениво

Самая вредная ошибка. Добавление loading="lazy" к изображению-герою откладывает его обнаружение и загрузку.

<!-- Wrong: delays LCP -->
<img src="hero.jpg" loading="lazy">

<!-- Correct: load immediately -->
<img src="hero.jpg" loading="eager">

2. Изображение LCP не предзагружено

Браузер обнаруживает изображение LCP только при разборе HTML. Подсказка предзагрузки позволяет браузеру получить его раньше:

<link rel="preload" as="image" href="hero.avif" type="image/avif">

3. Изображение LCP слишком тяжёлое

Изображение-герой весом 1 МБ всегда даст плохой LCP на мобильных соединениях. Цель: менее 200 КБ для полноширинного баннера 1200 пикселей, используя AVIF или WebP.

4. Изображение LCP обслуживается без CDN

Обслуживание изображений с одного исходного сервера увеличивает задержку для удалённых пользователей. CDN сокращает TTFB (время до первого байта), напрямую улучшая LCP.

CLS: изображения без указания размеров

Если браузер не знает размеры изображения до его загрузки, он не может зарезервировать место в макете. Изображение загружается и сдвигает содержимое вниз. это и есть сдвиг макета. Исправление простое:

<!-- Wrong: no dimensions, causes CLS -->
<img src="photo.jpg" alt="...">

<!-- Correct: dimensions prevent layout shift -->
<img src="photo.jpg" alt="..." width="800" height="600">

Также можно использовать CSS aspect-ratio для достижения того же эффекта, когда нельзя жёстко задать размеры:

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Измерение влияния изображений на Core Web Vitals

Используйте эти инструменты, чтобы определить, какие изображения ухудшают ваши показатели:

• Google Search Console: отчёт Core Web Vitals показывает страницы с плохими оценками на основе реальных данных пользователей
• PageSpeed Insights: определяет элемент LCP, показывает возможности «Правильно размещайте изображения» и «Используйте изображения в новых форматах»
• Chrome DevTools → вкладка Performance: водопадная диаграмма показывает, когда каждое изображение загружается и отрисовывается
• Lighthouse: встроен в Chrome DevTools, указывает на конкретные возможности оптимизации изображений

Контрольный список изображений для Core Web Vitals