Video

Wenn du Videos für Core Web Vitals optimieren möchtest, musst du die Attribute width und height im <video>-Tag festlegen. Je nach Situation können Sie auch das Attribut poster verwenden.

  • Attribute width und height: Um Layoutverschiebungen zu verhindern, lege die Attribute width und height im Tag <video> fest. So kann der Browser die Abmessungen des Videos ermitteln und die richtige Menge an Speicherplatz reservieren, ohne auf den Download des Videos warten zu müssen.

  • Attribut poster (optional): Das Attribut poster gibt das Bild an, das beim Herunterladen eines Videos angezeigt werden soll. Wenn ein Video das LCP-Element ist, wird der LCP anhand der Zeit bestimmt, zu der das Posterbild gerendert wird, und nicht, wenn das gesamte Video geladen wird. Wenn dieses Attribut nicht angegeben ist, wartet der Browser, bis der erste Frame des Videos verfügbar ist, und verwendet es dann als Posterbild. Videos ohne poster-Attribut werden derzeit nicht für Largest Contentful Paint berücksichtigt.

In diesem Beispiel wird mithilfe von CSS sichergestellt, dass die Größe des Videos an den Container angepasst wird. Dies hat keine Auswirkungen auf Web Vitals, ist aber ein nützliches Verfahren.

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;
}