Видео

При оптимизации видео для Core Web Vitals обязательно установите атрибуты width и height в теге <video> . В зависимости от ситуации вы также можете использовать атрибут poster .

  • Атрибуты width и height . Чтобы предотвратить сдвиги макета, установите атрибуты width и height в теге <video> . Это позволяет браузеру определить размеры видео (и зарезервировать правильное количество места), не дожидаясь загрузки видео.

  • Атрибут poster (необязательно) : атрибут poster определяет изображение, которое должно отображаться во время загрузки видео. Если видео является элементом LCP, LCP определяется по времени отрисовки постера, а не по времени загрузки всего видео. Если этот атрибут не указан, браузер будет ждать, пока не станет доступен первый кадр видео, а затем использовать его в качестве изображения постера; видео без атрибута poster в настоящее время не учитываются в категории «Наибольшая содержательная краска» .

В этом примере CSS используется для обеспечения изменения размера видео в соответствии с его контейнером. Это не влияет на Web Vitals, но является полезным методом.

HTML

<video controls width="960" height="540" poster="flower-960-poster.png">
    <source src="flower-960.mp4" type="video/mp4">
</video>

CSS


        video {
    max-width: 100%;
    height: auto;
}