Проверяет понимание приоритизации ресурсов и оптимизации LCP для hero-изображения, критичного для метрик Core Web Vitals.
Hero-изображение обычно является самым крупным элементом первого экрана, поэтому именно оно чаще всего определяет метрику LCP (Largest Contentful Paint). Задача — сообщить браузеру, что этот ресурс критичен, и не дать ему загрузиться позже, чем нужно.
fetchpriority="high" на теге <img> поднимает приоритет запроса.<link rel="preload" as="image"> в <head> запускает загрузку до того, как парсер дойдёт до тега img.loading="lazy" на hero-изображении откладывает загрузку и ухудшает LCP.srcset и sizes отдают нужный размер под конкретный viewport.<link rel="preload" as="image" href="/hero.avif"
imagesrcset="/hero-800.avif 800w, /hero-1600.avif 1600w"
imagesizes="100vw" fetchpriority="high">
<img src="/hero-1600.avif"
srcset="/hero-800.avif 800w, /hero-1600.avif 1600w"
sizes="100vw"
width="1600" height="900"
alt="Hero"
fetchpriority="high"
decoding="async">
Указание width и height предотвращает сдвиг макета (CLS). Отдача через CDN сокращает TTFB, а инлайн критического CSS убирает блокировку рендера.
Итог: применяй preload и fetchpriority="high" вместе с современными форматами и адаптивными размерами — это самый прямой путь к быстрому LCP и хорошим Core Web Vitals.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультациюFrontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию