Comment réduire le poids du player vidéo Youtube pour augmenter les performances de votre site internet ?

outils :

Dans ce tutoriel, Sandro, cofondateur de l'agence Webflow Gemeos vous montre comment réduire le poids du player vidéo Youtube pour augmenter les performances de votre site internet ?

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.
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

 <script src="https://unpkg.com/youtube-light-player">
</script>

‍

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

 <youtube-light-player src="https://www.youtube.com/watch?v=Ht_n-n2TDc0">
</youtube-light-player>

‍

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

Sandro D.

Mis à jour le

8/10/2024

Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)