Film

Podczas optymalizowania filmów pod kątem podstawowych wskaźników internetowych ustaw atrybuty width i height w tagu <video>. W zależności od sytuacji możesz też używać atrybutu poster.

  • Atrybuty width i height: aby zapobiec przesunięciom układu, ustaw atrybuty width i height w tagu <video>. Dzięki temu przeglądarka może określić wymiary filmu (i zarezerwować odpowiednią ilość miejsca) bez konieczności czekania na jego pobranie.

  • Atrybut poster (opcjonalny): atrybut poster określa obraz, który ma się wyświetlać podczas pobierania filmu. Jeśli element LCP to film, LCP jest określany na podstawie czasu wyrenderowania obrazu plakatu, a nie momentu wczytania całego filmu. Jeśli ten atrybut nie zostanie określony, przeglądarka będzie czekać, aż pojawi się pierwsza klatka filmu, a potem użyje tego atrybutu jako obrazu plakatu. Filmy bez atrybutu poster obecnie nie są brane pod uwagę w kategorii największej treści.

W tym przykładzie kod CSS zmienia rozmiar filmu w taki sposób, aby pasował do kontenera. Nie ma to wpływu na wskaźniki internetowe, ale jest przydatną techniką.

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