Video

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 e height: per impedire variazioni del layout, imposta gli attributi width e height 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'attributo poster 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 attributo poster 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;
}