Изображения обычно составляют самые тяжёлые байты на странице, поэтому их оптимизация — крупнейший выигрыш для LCP. Три рычага: современные форматы, адаптивные размеры и приоритет загрузки.
AVIF и WebP сжимают гораздо сильнее, чем JPEG/PNG при том же качестве (AVIF часто на 50% меньше JPEG). Отдавайте их с запасным вариантом, чтобы старые браузеры продолжали работать:
Не отправляйте изображение 2000px на телефон с шириной 400px. srcset позволяет браузеру выбрать правильный размер под устройство:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes сообщает браузеру, какой ширины отрисовывается изображение, чтобы он мог выбрать наименьший достаточный источник.
fetchpriority="high", loading="eager" и, возможно, preload.loading="lazy", чтобы оно не загружалось, пока не понадобится.Всегда сохраняйте width/height, чтобы предотвратить CLS.
Медленный LCP чаще всего — это просто чрезмерно большое главное изображение. Знание форматов (AVIF/WebP), srcset для правильного разрешения и корректного приоритета — плюс не загружать лениво LCP-изображение — это практический набор инструментов, который ожидают интервьюеры, и обычно это единственное изменение с наибольшим эффектом на реальном сайте.
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
Поддержать