#blog
Знаю, что сама тема не нова, но это не делает её неактуальной. Сегодня посмотрим статью "Как атрибуты width и height у картинок ускорят сайт на 12%". Вкратце о содержании:
▪ Суть проблемы: Изображения без заданных размеров при загрузке «раздвигают» блоки страницы, вызывая пересчёт макета — это приводит к скачкам и дёрганию страницы, а на мобильных устройствах может занять секунды.
▪ Основное решение: Указать у тега <img> атрибуты width и height, а в CSS задать width: 100% и height: auto. Браузер заранее зарезервирует место под картинку, и страница перестанет дёргаться, экономя до 12% процессорного времени.
▪ Альтернативные способы (не рекомендуются): Трюк с padding-bottom и свойство aspect-ratio решают ту же задачу, но разбрасывают логику по нескольким местам кода и усложняют поддержку, поэтому предпочтительнее обычные атрибуты.
▪Дополнительные нюансы: Эффект применим и к тегам <video>, <iframe>, <canvas>, <object>; при использовании grid потери меньше, а самые большие всплески CPU вызывают шрифты, которые стоит подгружать заранее через <preload>.
▪Проверка результата: Производительность легко измерить в профайлере браузера (F12 → Performance), а для автоматической проверки подходят сервисы вроде Site Alarm и Goolgle PSI.

Статья: https://habr.com/ru/articles/1080050/