ویدئو

هنگام بهینه‌سازی ویدیو برای 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;
}