Ніщо так не дратує відвідувачів вебсайтів, як зміщення макета. Відбувається все так: користувач хоче натиснути на будь-яке посилання, а натискає на рекламу або зовсім інше місце, оскільки дозавантажилося зображення чи інший мультимедійний вміст, який своїм розміром посунув макет. Уявити важко, коли ви для перегляду використовуєте мобільний телефон, який апаратно застарів, ледве завантажуєте сторінку вебсайту, і при потребі перейти у новий розділ, вас перенаправляє у зовсім інше місце, ви знову повертаєтеся, чекаєте повністю завантаження сторінки та повторюєте операцію, втрачаючи дорогоцінний час.
Для зображень не задано явним чином атрибути width та height
У більшості випадків це виникає при завантаженні зображень, у яких по замовчуванню не вказані атрибути ширини та висоти.

Для більшого розуміння проведемо експеримент. Використаємо зображення шириною 2000 та висотою 1500 пікселів. Для виводу напишемо код:
<html>
<body>
<img src="http://site.com/image.jpg" width="200" height="150" />
<p>Текст</p>
<link rel="stylesheet" type="text/css" href="http://site.com/style.css" />
</body>
</html>
Таблиця стилів:
img{width: 200px; height: auto}
Для експериментів з вебсторінками завжди потрібно враховувати не найкращі показники швидкості інтернету, а найгірші. Існує безліч інструментів для тестування. Наприклад, у браузері Mozilla Firefox є чудовий інструмент Responsive Design Mode, у якому можна переглянути вебсторінку очима мобільного пристрою. Важливим параметром цього додатку є можливість вибрати швидкість завантаження. Наприклад, вибираємо Regular 2G і спостерігаємо, як вебсторінка завантажується надзвичайно повільно, що дасть змогу гарно її проаналізувати на предмет зміщення макета.

Якщо ми переглянемо результат виконання нашого html коду, отримаємо чітко сформовану сторінку, оскільки вебпереглядач відразу формує макет сторінки, зберігаючи місце для фото чітко визначеного розміру, і слово «Текст» відразу займає своє статичне місце.

А тепер видалимо характеристики зображення width="200" height="150". Що відбудеться?
<html>
<body>
<img src="http://site.com/image.jpg" />
<p>Текст</p>
<link rel="stylesheet" type="text/css" href="http://site.com/style.css" />
</body>
</html>
Оскільки вміст сторінки завантажується почергово, спочатку отримаємо зображення оригінальним розміром шириною 2000 та висотою 1500 пікселів. Слово «Текст» зміститься на 1500 пікселів донизу. Після чого завантажиться таблиця стилів, у якій зображенню присвоюється ширина 200 пікселів, що спричинить зміщення макета на 1350 пікселів догори, оскільки зображення зменшиться до 150 пікселів висоти.

Існує поняття CLS (Cumulative Layout Shift) - сукупне зміщення макета, яке вимірює нестабільність контенту шляхом підсумовування оцінок зміщення для кожного зміщення макета. Метрика оцінює, наскільки видимий контент змістився в області перегляду, а також враховує відстань, на яку зачепили елементи. Цю величину можна отримати результатом тесту PageSpeed Insights. Явно вказуючи ширину й висоту для зображень, ви зможете зменшити зміщення макета й покращити показник CLS.

Мабуть, ви читаєте цю статтю через отриману помилку «Для зображень не задано явним чином атрибути width та height» результату тесту PageSpeed Insights, та хочете зробити маленький крок для покращення вашого вебсайту. Однозначно, ви рухаєтеся у правильному напрямку!

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