Video

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 e height: per evitare variazioni del layout, imposta width e height 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 valore poster: 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;
}