סרטון

כשמבצעים אופטימיזציה של סרטון למדדי ליבה לבדיקת חוויית המשתמש באתר, חשוב להגדיר את המאפיינים width ו-height בתג <video>. בהתאם למצב, כדאי להשתמש גם במאפיין poster.

• מאפייני width ו-height: כדי למנוע שינויי פריסה, צריך להגדיר את המאפיינים width ו-height בתג <video>. כך הדפדפן יכול לזהות את המידות של הסרטון (ולשמור את כמות השטח הנכונה) – בלי שיהיה צורך להמתין להורדת הסרטון.

• המאפיין poster (אופציונלי): המאפיין poster מציין את התמונה שצריך להציג כשמתבצעת הורדת סרטון. אם סרטון הוא רכיב ה-LCP, ה-LCP נקבע לפי מועד העיבוד של תמונת הפוסטר, ולא לפי זמן הטעינה הכולל של הסרטון. אם המאפיין הזה לא יצוין, הדפדפן ימתין עד שהפריים הראשון של הסרטון יהיה זמין ואז ישתמש בתמונה הזו כתמונת הפוסטר. סרטונים בלי המאפיין poster לא נכללים כרגע במדד Largest ContentfulPaint.

בדוגמה הזו, אנחנו משתמשים ב-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;
}