Выбор ответа Junior Производительность и Web Vitals спрашивают часто обновлено 18 октября 2026

Главная причина CLS у картинок

Вопрос

Как предотвратить сдвиг вёрстки, когда загружается картинка?

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

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

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

Коротко

Правильный ответ: Указать width и height или aspect-ratio, чтобы место было сразу. Без размеров браузер не знает высоту картинки и ставит 0, а после загрузки контент ниже прыгает.

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

Загружать картинку через JavaScript после события load страницы
Указать width и height или aspect-ratio, чтобы место было сразуправильный ответ
Поставить loading="eager", чтобы картинка грузилась вместе с HTML
Сжать картинку посильнее, чтобы она успела загрузиться до отрисовки

Разбор

Без размеров браузер не знает высоту картинки и ставит 0, а после загрузки контент ниже прыгает. С width и height (или aspect-ratio) место резервируется сразу. Загрузка через JS ничего не резервирует и сдвиг остаётся. eager и сжатие лишь меняют время загрузки, но не устраняют сдвиг.

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

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

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

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

Длинная задача

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

Состав Core Web Vitals в 2026

Урок по теме

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

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

Длинная задача (long task)CLS INP LCP

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

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