Quando ottimizzi i video per Core Web Vitals, assicurati di impostare width
e
Attributi height
nel tag <video>
. A seconda della situazione, puoi
vuoi utilizzare anche l'attributo poster
.
Attributi
width
eheight
: per evitare variazioni del layout, impostawidth
eheight
nel tag<video>
. In questo modo il browser determinare le dimensioni del video (e riservare il numero corretto di spazio) senza dover attendere il download del video.Attributo
poster
(facoltativo): il valoreposter
: specifica l'immagine da visualizzare durante la riproduzione di un video download. Se un video è l'elemento LCP, questo valore viene determinato dal momento in cui viene eseguito il rendering dell'immagine poster o del primo fotogramma del video. Poiché le immagini sono in genere più leggere, l'utilizzo di immagini poster può comportare un LCP più veloce.
In questo esempio, viene usato CSS per garantire che il video venga ridimensionato per adattarsi containerizzato. Questo 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;
}