Comment réduire le poids du player vidéo Youtube pour augmenter les performances de votre site internet ?
Dans ce tutoriel, Sandro, cofondateur de l'agence SEO Webflow Gemeos vous montre comment réduire le poids du player vidéo Youtube pour augmenter les performances de votre site internet.
| Situation | Poids chargé | Impact LCP |
|---|---|---|
| 4 iframes YouTube classiques | ~2,8 Mo | Très négatif |
| 4 players youtube-light-player | ~170 Ko | Neutre à positif |
Pourquoi réduire le poids du player Youtube ?
- Temps de chargement plus rapide : Un lecteur vidéo plus léger permet aux vidéos de se charger plus rapidement, ce qui améliore l'expérience utilisateur en réduisant les temps d'attente.
- Consommation de bande passante : Des lecteurs vidéo plus légers consomment moins de bande passante, ce qui est bénéfique pour les utilisateurs ayant des connexions Internet limitées ou coûteuses.
- Optimisation du référencement : Les sites Web avec des temps de chargement plus rapides ont tendance à être mieux classés dans les résultats des moteurs de recherche, ce qui peut aider à améliorer la visibilité en ligne (SEO).
- Compatibilité multiplateforme : Des lecteurs vidéo plus légers sont souvent mieux pris en charge sur une gamme plus large d'appareils et de navigateurs, ce qui garantit une expérience homogène pour tous les utilisateurs.
Exemple : 4 vidéos insérées via iframe chargeront 2,8 Mo de données lors du premier chargement, en utilisant ce code, vous pouvez le réduire à 170 Ko
Comment ça marche ?
1. Ajoutez ce script dans le <head> de votre page
2. Ajoutez un embed à l'emplacement où vous voulez afficher votre vidéo
Cela peut être dans une div, un container ou encore une section. La vidéo prendre la largeur de son élément parent
Pensez à bien modifier l'ID de la vidéo par l'ID de votre vidéo ✌🏼
3. Plus qu'à publier et tester le résultat
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
