👍👍👍 Метрика CLS и атрибуты width и height

👍👍👍 Метрика CLS и атрибуты width и height

✍️ Всегда включайте атрибуты ширины (width) и высоты (height) на ваши изображения <img> и видео элементы, советует один из разработчиков метрики CLS - Addy Osmani.

Напоминаю, что "Совокупное смещение макета (CLS)" - измеряет визуальную стабильность. Чтобы обеспечить хороший пользовательский опыт, сайты должны стремиться к тому, чтобы оценка CLS была менее 0,1.

🔥 Еще добавлю, что CLS – это один из ключевых критериев нового сигнала ранжирования, который называется «Опыт восприятия страницы».

👉 Подробнее о новом сигнале ранжирования читайте в моем блоге

https://pro100blogger.com/2020/05/page-experience.html

В качестве альтернативы атрибутам ширины (width) и высоты (height), зарезервируйте необходимое пространство с полями соотношения сторон при помощи CSS.

Если ваше изображение находится в контейнере, вы можете использовать CSS, чтобы изменить размер изображения до ширины этого контейнера. Устанавливаем высоту: авто; чтобы высота изображения не была фиксированной.

img {

height: auto;

width: 100%;

}

Подробнее в статье разработчика метрики CLS - Addy Osmani.

https://web.dev/optimize-cls/

В твиттере Addy Osmani подтвердил, что родительские контейнеры фиксированного размера также подходят для этих целей:

<div style=position: relative;padding-top: 75% >

<img style=position:absolute src=taking-long-to-load.jpg />

</div>

Источник: https://twitter.com/addyosmani/status/1276792300782284800

Это больше кода, но должно работать во всех браузерах (старых и современных).

Такой подход гарантирует, что браузер может выделять правильный объем пространства в документе во время загрузки изображения, уменьшая смещение макета.

🔥 Посоветуйте канал SEO inside своим друзьям!

👍 Сделаем вместе мир SEO лучше!

С уважением,

Вячеслав Вареня, автор блога https://pro100blogger.com

Источник новости https://t.me/seo_inside/66...