Техпрогон
ВойтиНачать бесплатно
Выбор ответа Middle Производительность и Web Vitals обновлено

Что не так с главной картинкой

Вопрос

Это баннер первого экрана, он же LCP-элемент. Что здесь ухудшает LCP?

<img src="/hero.avif" loading="lazy" width="1200" height="600" alt="Распродажа">

Попробуйте сами

Выберите вариант, и откроется разбор.

Показать ответ и разбор

Коротко

Правильный ответ: loading="lazy": браузер откладывает загрузку видимой картинки. Ленивая загрузка нужна для картинок ниже первого экрана.

Варианты ответа

  1. Формат AVIF: браузеры его не поддерживают и докачивают JPEG-запасной
  2. Атрибуты width и height: браузер сначала пересчитывает размеры, потом грузит
  3. Непустой alt: браузер сначала рисует текст, а картинку грузит после него
  4. loading="lazy": браузер откладывает загрузку видимой картинкиправильный ответ

Разбор

Ленивая загрузка нужна для картинок ниже первого экрана. На LCP-картинке она откладывает начало загрузки, LCP растёт. Здесь лучше убрать lazy и добавить fetchpriority="high". AVIF поддерживают все основные браузеры. width и height не замедляют, а резервируют место и спасают CLS. alt нужен для доступности и на скорость не влияет.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.

Потренироваться бесплатно

Предыдущий вопрос

Lighthouse и полевые данные

Следующий вопрос

Почему клик откликается с задержкой

Урок по теме

Производительность и Core Web Vitals

Термины по теме

Длинная задача (long task)CLSINPLCP

Ещё по теме «Производительность и Web Vitals»

Все вопросы модуля