← Вернуться к инструментам

Как изображения влияют на Core Web Vitals - и как это исправить

Именно изображения виноваты в большинстве проблем с LCP (Largest Contentful Paint). Если ваши Core Web Vitals красные, скорее всего, причина в изображениях. Вот как это исправить.

Попробуйте прямо сейчас - бесплатно, без регистрации.

Умное сжатие изображений →

Изображения и LCP (Largest Contentful Paint)

LCP измеряет момент, когда загрузился самый большой видимый элемент. На большинстве страниц это изображение. Google хочет, чтобы LCP был меньше 2,5 секунды.

Как улучшить LCP:

Используйте WebP/AVIF: файлы на 25-50% меньше = быстрее загрузка. Конвертировать сейчас.
Измените размер изображений: отдавайте размер, подходящий под блок. Изменить размер здесь.
Предзагружайте главные изображения: <link rel="preload" as="image" href="hero.webp">
Используйте CDN: отдавайте изображения с edge-серверов рядом с пользователями.
Задайте fetchpriority: <img fetchpriority="high"> для изображений на первом экране.

Изображения и CLS (Cumulative Layout Shift)

CLS измеряет неожиданные сдвиги макета. Изображения без заданных размеров заставляют страницу «прыгать» при загрузке.

Как улучшить CLS:

Всегда задавайте width и height: <img width="800" height="600">
Используйте CSS aspect-ratio: aspect-ratio: 16/9; как современную альтернативу
Не используйте отложенную загрузку на первом экране: не добавляйте loading="lazy" главному изображению

Чек-лист быстрых исправлений

Пропустите все изображения через Умное сжатие (оптимальное качество автоматически)
Измените размер до реальных размеров показа
Добавьте атрибуты width/height всем тегам <img>
Предзагрузите изображение LCP
Включите отложенную загрузку для всего ниже первого экрана
Проверьте снова в PageSpeed Insights

Вопросы и ответы

Какой показатель LCP считается хорошим?

Меньше 2,5 секунды - «Хорошо» (зелёный). 2,5-4 секунды - «Требует улучшения» (жёлтый). Больше 4 секунд - «Плохо» (красный). Часто одной оптимизации изображений достаточно, чтобы перейти из красной зоны в зелёную.

Нужна ли отложенная загрузка для всех изображений?

Нет! Не включайте отложенную загрузку для изображений на первом экране (особенно для главного изображения/LCP). Откладывайте только те, что изначально за пределами экрана. Избыточная отложенная загрузка как раз ухудшает LCP.

Готовы? 100% бесплатно, работает в браузере.