Quando ottimizzi i video per Segnali web essenziali, assicurati di impostare gli attributi width
e height
nel tag <video>
. A seconda della situazione, puoi anche
utilizzare l'attributo poster
.
Attributi
width
eheight
: per impedire variazioni del layout, imposta gli attributiwidth
eheight
nel tag<video>
. Ciò consente al browser di determinare le dimensioni del video (e riservare la quantità di spazio corretta), senza dover attendere il download del video.Attributo
poster
(facoltativo): l'attributoposter
specifica l'immagine che deve essere visualizzata durante il download di un video. Se un video è l'elemento LCP, questo valore viene determinato dal momento in cui viene visualizzata l'immagine poster, anziché dal caricamento del video complessivo. Se questo attributo non è specificato, il browser attenderà che il primo fotogramma del video sia disponibile, quindi utilizzala come immagine poster. I video privi di un attributoposter
attualmente non sono considerati per il Largest Contentful Paint.
In questo esempio viene utilizzato CSS per garantire che il video venga ridimensionato per adattarlo al suo contenitore. Ciò non ha alcun impatto su Web Vitals, ma è una tecnica utile.
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;
}