Оптимизация изображений для Core Web Vitals и LCP

Наибольший вклад в вес веб-страницы обычно вносят изображения. Скорость напрямую влияет и на опыт пользователя, и на позиции в поиске, поэтому оптимизация изображений — одно из самых результативных действий. Google измеряет это через Core Web Vitals, и изображения находятся в центре двух из них.

Как изображения влияют на Core Web Vitals

LCP (Largest Contentful Paint) измеряет, за сколько отрисовывается крупнейший видимый элемент. На большинстве страниц это hero-изображение или большое фото, поэтому тяжёлая медленная картинка напрямую задирает LCP. Цель — меньше 2,5 секунды.

CLS (Cumulative Layout Shift) измеряет неожиданные сдвиги контента при загрузке. Если у изображения не указаны размеры, браузер не резервирует место — и всё прыгает, когда оно догружается. Обе проблемы решаются парой приёмов.

1. Используйте современный формат

Переход с JPEG и PNG на WebP или AVIF часто срезает 25–50% размера при том же качестве. Меньше файл — быстрее загрузка и ниже LCP. Конвертация целой папки за раз — как в Scrunch — самый быстрый способ применить это ко всему сайту.

2. Отдавайте изображения в размере показа

Типичная ошибка: залить фото шириной 4000 пикселей и показывать в контейнере на 800. Браузер всё равно скачает файл целиком. Уменьшите изображения примерно до размера показа (до 2x для retina-экранов) — экономия будет огромной.

3. Используйте адаптивные изображения

Атрибут srcset позволяет браузеру выбрать подходящую картинку под каждый экран. Телефон не должен качать hero-изображение для десктопа. Несколько вариантов ширины — и маленькие экраны получают маленькие файлы, что особенно важно для мобильных Core Web Vitals.

4. Ленивая загрузка для картинок вне экрана

Но никогда — для hero-изображения

loading="lazy" на изображениях ниже сгиба откладывает их загрузку до надобности и экономит трафик. А вот LCP-изображение вверху страницы должно грузиться сразу — в идеале с fetchpriority="high", чтобы появиться как можно быстрее.

5. Резервируйте место против сдвигов макета

Всегда задавайте атрибуты width и height (или aspect-ratio в CSS). Браузер зарезервирует правильное место до загрузки, и прыжок, бьющий по CLS, исчезнет.

Краткий чек-лист

• Конвертируйте изображения в WebP или AVIF
• Уменьшайте до реального размера показа (~2x для retina)
• Дайте адаптивные ширины через srcset
• Ленивая загрузка ниже сгиба
• Приоритет LCP/hero-изображению
• Указывайте width и height против сдвигов

Формат и размер — это основа, начните с них. Scrunch берёт на себя этап конвертации и сжатия — много изображений сразу, прямо в браузере.