Изображения обычно и есть элемент LCP
На большинстве страниц самый крупный элемент на экране — это изображение: фото в хиро, фото товара, баннер. Это автоматически делает его элементом Largest Contentful Paint, а значит оно обычно сильнее всего влияет на балл LCP — в лучшую или худшую сторону.
Фото на 4 Мб, экспортированное прямо с камеры или скачанное со стока, не выглядит как проблема. Оно просто незаметно добавляет секунду-две к тому моменту, когда посетитель видит на странице что-то реальное.
Формат и сжатие делают большую часть работы
Современные форматы — WebP и AVIF — дают заметно меньший вес файла, чем JPEG или PNG при том же визуальном качестве — часто на 30–50%. Большинство платформ и браузеров сейчас поддерживают их нативно, так что причин всё ещё отдавать JPEG как основной формат почти не осталось.
Уровень сжатия важен не меньше, чем формат. Фотографии не обязательно быть без потерь, чтобы выглядеть чётко на экране — большинство изображений хорошо выглядят при качестве 70–80%, и разница незаметна на обычной дистанции просмотра, а вес файла падает существенно.
Правильный размер для каждого устройства
Одно и то же изображение не должно отдаваться в одном размере на любое устройство. Responsive images — отдача меньшего файла на экран телефона и большего на десктоп — заметно сокращают вес для большинства посетителей, заходящих с мобильных.
Lazy loading помогает повсюду, кроме одного места, куда его хочется применить по умолчанию: само изображение LCP. Отложить загрузку именно того элемента, который измеряет Lighthouse, — значит ухудшить балл, а не улучшить его. Оно должно загружаться сразу, пока всё, что ниже, ждёт своей очереди.
Встроено изначально, а не добавлено после
Ничего из этого не разовое исправление — это набор настроек по умолчанию, который у проекта либо есть с самого начала, либо с ним приходится бороться постранично. Мы разобрали полную картину того, что нужно высокому баллу, в Оптимизации сайта на Webflow до 95+ баллов Lighthouse.
Если вес изображений тянет балл вниз, а с чего начать не очевидно, напишите нам, и мы разберём исправление.