Оптимизация изображений и Core Web Vitals: практическое руководство
Изображения — главный фактор производительности веба. Вот как правильно их оптимизировать и улучшить показатели Core Web Vitals.
Google начал использовать Core Web Vitals как фактор ранжирования несколько лет назад, и внезапно все стали заботиться о скорости страниц. Но когда разбираешься, что реально делает страницы медленными, почти всегда один и тот же виновник: изображения.
На средней веб-странице изображения составляют около 50% общего веса страницы. Разберитесь с изображениями, и вы решите половину проблемы производительности.
Три метрики, которые важны
LCP (Largest Contentful Paint) — как быстро загружается самый большой видимый элемент. Обычно это изображение. Google хочет это меньше 2,5 секунд.
CLS (Cumulative Layout Shift) — насколько элементы прыгают во время загрузки страницы. Изображения без заданных размеров — основная причина. Цель: менее 0,1.
INP (Interaction to Next Paint) — как быстро страница реагирует на действия пользователя. Тяжёлые изображения могут блокировать основной поток и задерживать взаимодействия. Цель: менее 200мс.
Влияние реально
Вот что происходит при оптимизации изображений на типичном контентном сайте:
| Метрика | До оптимизации | После оптимизации | |---------|---------------|-------------------| | Вес страницы | 4,2 МБ | 890 КБ | | LCP | 4,8 секунды | 1,6 секунды | | CLS | 0,25 | 0,02 | | Время загрузки (3G) | 18 секунд | 4 секунды |
Это не подтасовка. Эти цифры с реальных сайтов, с которыми я работал. Исправления не сложные — нужно лишь немного внимания.
Шаг 1: правильный размер, правильный формат
Самый большой выигрыш — отдавать изображения нужного размера. Hero-изображение шириной 3000px, отображаемое на 1200px, отправляет в 6 раз больше пикселей, чем нужно.
Измените размер изображений под их размер отображения. Для Retina-дисплеев делайте 2x — если изображение отображается на 600px, сделайте его 1200px.
Затем выберите правильный формат:
- WebP — на 25-35% меньше JPEG при эквивалентном качестве. Используйте по умолчанию.
- AVIF — ещё меньше WebP, но кодирование медленнее и поддержка браузерами догоняет.
- JPEG — универсальный запасной вариант. Всё ещё хорош для фотографий, когда WebP не вариант.
- PNG — только для изображений, которым нужна прозрачность и нельзя использовать WebP.
- SVG — для иконок, логотипов и простых иллюстраций. Крошечный размер, бесконечное масштабирование.
Шаг 2: сжимайте агрессивно
Большинство изображений несут больше качества, чем экраны могут отобразить. Можно сжать JPEG до качества 80, и никто не заметит разницу — но файл станет на 40-60% меньше.
Примерное руководство:
| Уровень качества | Случай использования | Типичная экономия | |-----------------|---------------------|-------------------| | 90-100 | Фотопортфолио | 10-20% | | 75-85 | Обычные веб-изображения | 40-60% | | 60-75 | Миниатюры, фоны | 60-80% |
Не гадайте с уровнями качества. Сожмите, потом посмотрите результат. Если не видите разницы, сжатие в порядке.
Шаг 3: исправьте сдвиг макета
Каждое изображение на странице должно иметь явные атрибуты width и height, или использовать CSS aspect-ratio. Без них браузер не знает, сколько места резервировать, и контент прыгает при загрузке изображений.
<!-- Хорошо: браузер знает нужное пространство -->
<img src="photo.webp" width="800" height="600" alt="Описание" />
<!-- Тоже хорошо: CSS aspect ratio -->
<img src="photo.webp" style="aspect-ratio: 4/3; width: 100%;" alt="Описание" />
Одно это может перевести ваш CLS из провала в зачёт.
Шаг 4: ленивая загрузка изображений за пределами экрана
Если изображение не видно при первой загрузке страницы, не загружайте его, пока пользователь не прокрутит до него.
<img src="photo.webp" loading="lazy" alt="Описание" />
Один атрибут. Всё. Но не делайте ленивую загрузку для hero-изображения или LCP-элемента — он должен загружаться сразу.
Шаг 5: используйте адаптивные изображения
Отдавайте разные размеры для разных ширин экрана. Телефону не нужно изображение в 1400px.
<img
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
src="photo-800.webp"
alt="Описание"
/>
Да, это значит генерировать несколько размеров. Но экономия трафика на мобильных устройствах значительная.
SVG: часто упускаемая оптимизация
Если у вас иконки или логотипы в PNG, конвертируйте их в SVG. PNG-иконка в 50КБ становится SVG в 3КБ, который выглядит идеально при любом размере.
Даже существующие SVG обычно можно оптимизировать. Большинство дизайн-инструментов экспортируют SVG с лишними метаданными, ненужной точностью и скрытыми слоями. Прогон через оптимизатор обычно уменьшает размер на 30-60%.
Оптимизируйте ваши SVG, чтобы выжать лишние байты.
Быстрый чек-лист аудита
Пройдитесь по этому для любой страницы, которую хотите оптимизировать:
- Сначала измерьте — используйте Lighthouse или PageSpeed Insights для текущих показателей
- Проверьте размеры изображений — есть ли изображения шире их размера отображения?
- Проверьте форматы — используете ли WebP где возможно?
- Проверьте сжатие — прогоните изображения через компрессор
- Проверьте размеры — у каждого
<img>есть width и height? - Проверьте ленивую загрузку — изображения за экраном загружаются лениво?
- Измерьте снова — сравните новые показатели
Оптимизация изображений — не гламурная работа, но это самое эффективное улучшение производительности, которое вы можете сделать. Большинство страниц могут сократить время загрузки вдвое, просто отдавая правильно размеренные, сжатые изображения в современных форматах. Начните с самых тяжёлых страниц и двигайтесь дальше.