Impact vidéo Youtube sur temps de chargement

[RA-PH]

Bonjour,

Lorsque je mouline une page avec une iframe de vidéo Youtube sur Google Page Speed, les performances sont très médiocres du fait des ressources Javascript utilisées et notamment le player YT /player_ias.vflset/en_US/base.js qui consomme 800 kb de ces ressources.

Est-ce normal pour tous les sites qui proposent une vidéo Youtube dans son corps ?
Y a t-il un impact sur le SEO ?
Comment réduire cette taille de ressource consommées (indication d'une économie potentielle de 520 kb mais sans solution proposée). ?

 

[lweb]

Salut, tu peux utiliser du JS pour afficher une image cliquable qui déclenche la vidéo. Très efficace, c'est ce que j'utilise.

 

[RA-PH]

Ok merci mais du coup c'est la seule méthode pour ne pas se payer les temps de chargement de Youtube ?
Comment font les sites qui affichent une vidéo directement en haut de page ? Il se fichent du SEO ?

 

[rick38]

C'est la seule méthode, tout le monde fait ça.

Afficher une vidéo en haut ? Si on veut lancer automatiqueemnt une vidéo, pas le choix, il faut mettre le code normal et tant pis pour le seo.
On ne peut pas à la fois vouloir pourir l'expérience utilisateur en lui imposant le visionnage d'une vidéo et vouloir que son site ait une bonne note de performance...

 

[RA-PH]

Ok au moins c'est clair.

Du coup avec la méthode JS image cliquable ça permet de ne pas charger le JS de Youtube ?
Vous pouvez m'indiquer comment cette technique fonctionne (je ne suis pas dev mais je veux comprendre) ?

 

[rick38]

Oui, on ne fait qu'afficher l'image qui correspond à la vignette de la vidéo (fournie par youtube).
On lui ajoute quand même dessus une icone "Play" pour que les gens comprennent que c'est une vidéo à cliquer.

On la remplace par le code html de l'iframe de youtube avec l'événement click de l'image, ce qui déclenche automatiquement le chargement de la vidéo.

Quelques scripts :
https://www.labnol.org/internet/light-youtube-embeds/27941/
https://gomakethings.com/how-to-lazy-load-youtube-videos-with-vanilla-javascript/
https://medium.com/@raviashar94/emb...outube-iframe-api-and-javascript-989fe87ee496

Il existe aussi des plugins js lazy loading youtube pour ceux qui ne sont pas dev.

Autre solution, si la vidéo est hors-écran, l'attribute loading="lazy", l'iframe ne se chargera que lorsque l'utilisateur scrollera jusqu'à la voir. https://web.dev/articles/iframe-lazy-loading?hl=fr

 

[RA-PH]

Super, merci je vais aller étudier tout ça !

 

[RA-PH]

Je reviens sur le sujet parce que sur la première solution, mon développeur attire mon intention sur le fait que la technique du light embed Youtube Video, du fait qu'elle ne charge pas la vidéo au premier chargement de la page, ne respecte pas la politique de protection des données RGPD (puisque l'internaute décide d'activer la idéo par lui même et à ce moment là Youtube poserait un cookie).

Du coup c'est pas RGPD ?

 

[rick38]

Qu'il mette youtube-nocookie.com au lieu de youtube.com dans l'url embed et puis voilà.

 

[emualliug]

Selon le contenu et le poids de la vidéo, l'intégration Youtube n'est pas forcément idéale. Typiquement pour les vidéo utilisées en arrière-plan (ce qui est assez à la mode), mieux vaut la stocker "chez soi" (ou avec un CDN) que chez Youtube / Vimeo et autres.

 

[RA-PH]

Du coup le résultat n'est pas probant, ma perf sur GPS reste à 26/100

Page avec le light embed video

 

[pomination]

Bonjour,
vous pouvez aussi essayer quelques ajustements à votre main :
- Mieux optimiser les images en jpg. notamment la première qui est une image d'illustration réduite mais qui pèse plus de 160ko. Et qui est en différé alors qu'au-dessus de la ligne de flottaison. Et donner des dimensions explicites au logo
- Un grand nombre de css. A voir si une combinaison de ces derniers pourrait apporter une amélioration (ce n'est pas forcément le cas)
- Essayer de minifier vos propres js (mais pas les combiner)