Медіа може завантажуватися без зарезервованого місця

Чому це важливо

Посібник web.dev з оптимізації Cumulative Layout Shift називає зображення, вбудовані елементи та iframe без розмірів серед найпоширеніших причин зсувів макета. Коли браузер знає висоту елемента ще до надходження файлу, він може залишити це місце вільним, тож текст і кнопки під ним лишаються на місці.

Що зробити

1. Відкрийте знахідку: у ній показано кожен елемент без розміру з його початковим відкривальним тегом, оголошеними шириною й висотою та оголошеннями CSS, що до нього застосувалися, з їхньою таблицею стилів, селектором і позицією.
2. Додайте атрибути width і height, що відповідають пропорціям файлу, або задайте елементу CSS height чи min-height або ширину разом з aspect-ratio.
3. Для iframe чи embed задайте висоту на самому елементі. Сама лише висота навколишнього контейнера не доводить, що елемент резервує місце, але підтверджена висота батьківського елемента може бути основою для явної відсоткової висоти на елементі.
4. Перевірте в браузері, що вміст більше не зсувається, поки завантажується медіа.

Коли залишити як є: Якщо елемент не може зсунути інший вміст, наприклад тому, що навколишній контейнер уже має фіксовану висоту, це можна залишити.

Що ми читаємо

Ми читаємо повний початковий HTML сторінок, які повернули 200 і, схоже, рендеряться на сервері, наявним в аудиті аналізатором HTML5, зокрема навігацію й футер. Ми переглядаємо елементи <img>, <video>, <iframe> і <embed> поза межами, які не рендеряться, як-от <template>, <noscript> і <script>. Не кожну відмінність макета, пов’язану з просторами імен, змодельовано. Нічого не рендериться, і JavaScript не виконується; сторінки, які, схоже, залежать від JavaScript, позначаються як неперевірені, а відмінності макета в режимі quirks не моделюються.

Ми застосовуємо стилі сторінки в порядку їхнього каскаду: таблиці стилів, підключені будь-де в документі, блоки <style>, файли, які вони підтягують через @import до трьох рівнів углиб, і вбудовані атрибути style, використовуючи байти, збережені аудитом. Таблиці стилів лише для друку й правила @media, що не застосовуються до екранів, пропускаються. Зіставляються лише селектори з назв елементів, класів та ID, поєднаних пробілами чи >; правило, що задає властивості розміру, фону, display, видимості чи макета з будь-яким іншим селектором, залишає сторінку неперевіреною. Імпорти з шаром CSS і нерозв’язані умовні імпорти не можуть підтвердити розмір.

Елемент вважається таким, що має розмір, коли зрештою отримує додатну висоту: з атрибута height, з CSS height чи min-height у пікселях, як відсоток від батьківського елемента з відомою висотою або з відомої ширини разом зі співвідношенням сторін з атрибутів чи CSS aspect-ratio. Сама лише ширина або співвідношення сторін без відомої ширини висоти не резервують.

Елементи, приховані через display: none чи visibility: hidden, пропускаються лише тоді, коли їхню видимість підтверджено. Умовне перевизначення не може встановити, що елемент лишається прихованим. Атрибут hidden, закритий <details> чи <dialog>, медіа, вкладене в інше медіа, ключові слова на кшталт auto, значення calc() чи var(), а також position, float, transform чи анімація на елементі або предку не можуть бути розв’язані й залишають сторінку неперевіреною.

Про сторінку повідомляється, лише коли все відповідне вдалося прочитати і принаймні один відображений медіаелемент не має зарезервованої висоти. Якщо будь-який медіаелемент, таблицю стилів чи правило не вдається розв’язати, уся сторінка позначається як неперевірена, навіть коли інший елемент явно не має розміру. Якщо повні дані показують, що відображених медіа немає, це правило не застосовується; така відсутність не підтверджує, що попередню проблему виправлено.

Приклад і докази

Ілюстративний приклад — схематичні HTML і CSS, а не реальний аудит.

Сторінка https://bakery.example/menu/ підключає /assets/site.css, що містить таке правило:

.hero img {
  width: 600px;
  aspect-ratio: 3 / 2;
}

<div class="hero"><img src="/hero.jpg" alt="Our bakery"></div>
<img src="/bread.jpg" alt="Fresh bread">

Перше зображення має ширину й співвідношення сторін, тож його висоту зарезервовано. Друге не має висоти ні в HTML, ні в CSS, тому про сторінку повідомляється.

<img src="/bread.jpg" width="1200" height="800" alt="Fresh bread">

Можливе виправлення: оголосіть розмір другого зображення. Наступний повний аудит підтверджує виправлення, коли повністю читає ту саму сторінку й увесь її CSS і бачить, що кожен відображений медіаелемент має розмір; видалення всіх медіа залишає попередню проблему непідтвердженою.

Підтвердити й перевірити знову

Перевірте самі: відкрийте сторінку в Chrome з увімкненим обмеженням швидкості мережі в інструментах розробника й простежте, чи зсувається текст, коли з’являються зображення та фрейми; панель Performance позначає зсуви макета й елементи, що зсунулися.

Повторна перевірка: Повний аудит — запустіть новий повний аудит сайту. Знахідка вважається підтверджено виправленою, лише коли ту саму сторінку знову прочитано повністю з усіма її таблицями стилів і кожне відображене зображення, відео, iframe та embed на ній має зарезервовану висоту. Видалення всіх медіа зі сторінки, відсутня таблиця стилів чи будь-яке правило, яке перевірка не може розв’язати, залишають знахідку непідтвердженою.

Обмеження та джерела

Це статичне прочитання зафіксованих HTML і CSS: ми не виконуємо JavaScript, не рендеримо сторінку й не вимірюємо Cumulative Layout Shift, а резервування місця саме по собі не доводить, що сторінка стала стабільнішою. Багато поширених шаблонів CSS поки що не вдається розв’язати, зокрема height: auto, max-width: 100%, позиціювання, обтікання, трансформації та селектори з псевдокласами чи атрибутами; на медіаелементі чи його предках вони залишають сторінку неперевіреною. Сама лише фіксована висота контейнера не підтверджує зарезервованого місця на медіаелементі; підтверджена висота батьківського елемента може бути основою для явної відсоткової висоти. Медіа, додане скриптами, не видно.

Упевненість: Середня, бо оголошені розміри показують, де браузер може залишити вільне місце, але чи справді вміст зсувається, залежить від того, як рендериться сторінка.

Джерела

• web.dev, Оптимізація Cumulative Layout Shift — перелічує зображення, рекламу, вбудовані елементи та iframe без розмірів серед найпоширеніших причин поганого CLS і радить оголошувати width і height для зображень і відео або резервувати місце за допомогою CSS, наприклад aspect-ratio чи min-height. Перевірено 10 жовтня 2026.

Редакційна перевірка: 2 листопада 2026