Розміри зображень (width/height)

Коли в <img> не вказані width та height, браузер до завантаження не знає, скільки місця займе зображення, і після його надходження контент «стрибає». Це вимірює метрика CLS (Cumulative Layout Shift).

Стрибання макета дратує (користувач клікає на щось інше, ніж хотів), і Google штрафує це через CLS у Core Web Vitals.

1. 1Вказуйте width та height у всіх <img> (браузер обчислить із них співвідношення сторін).
2. 2За потреби зарезервуйте місце через aspect-ratio у CSS.
3. 3Те саме стосується вбудувань та реклами, зарезервуйте їм простір.