Как атрибуты width и height у картинок ускорят сайт на 12% и сделают его комфортнее?

[achekalin]

Вот, спасибо за пост! А то, на фоне засилия статей про ИИ, текстов про банальную верстку стало до обидного мало (а сами модели верстать умеют, но получается у них это не всегда визуально безгрешно)!

Сам совет ставить width/height у <img> правильный — браузер заранее знает aspect ratio и не устраивает лишний layout shift.

Но с остальным я бы был аккуратнее. «Ускоряет сайт на 12%» — это результат конкретного теста, а не свойство метода. aspect-ratio тоже вполне нормальный инструмент, а img { width: 100%; height: auto; } как универсальный рецепт вообще спорен: чаще нужен max-width: 100%, иначе маленькие картинки начинаем растягивать.

Ну и тезисы про «grid пересчитывается только после первого изображения» и «preload шрифта даёт один пересчёт страницы» выглядят уже как слишком сильные обобщения.

[Axenic]

Спасибо за комментарий. За 10 лет хайпа писать качественный код и учитывать подобные нюансы не научились даже low code платформы и конструкторы сайтов, хотя конкуренция там высокая. ИИ если и сможет, то скорее всего это будет работать не из коробки.

Часто ещё бывает ситуация, что люди покупают шаблон сайта, начинают заполнять его своими данными и начинают вылезать подобные визуальные дефекты вроде скачущих изображений (натягивая вёрстку затёрли width и height). И тут просто надо знать, как их исправить, и отработать проблему.

Ускорение считалось на синтетическом примере, симулирующем каталог товаров. В реальности, layout shift может случаться, как чаще (из-за картинок в шапке и подвале), так и реже (используется display: grid, и layout shift будет не для каждой строки, а 1-2 раз для всех ячеек).

Касательно grid и шрифта, это обобщение для 98% случаев. То есть, верно почти всегда, кроме редких исключений. Так что, я подумал, вполне уместно обобщить.