Comment arrêter les vidéos ayant un impact négatif sur Core Web Vitals • Yoast

Les vidéos intégrées sont une partie de plus en plus importante des sites Web. Et il est facile de voir pourquoi. Ils ajoutent une couche attrayante et interactive à toutes sortes de types de pages. Mais il y a un problème : les fichiers vidéo sont volumineux. En particulier sur les connexions mobiles à faible bande passante, ils peuvent être très lents à charger.

Cela peut être un problème du point de vue de l’expérience utilisateur, en particulier si la vidéo est essentielle pour l’affichage de la page (comme avec une vidéo d’arrière-plan à lecture automatique). Mais cela peut aussi être un défi pour le référencement. Avoir trop de vidéos volumineuses sur une page peut avoir un impact négatif sur vos Core Web Vitals, en particulier le Largest Contentful Paint (LCP) et le Cumulative Layout Shift (CLS). Approfondissons ces deux sujets et ce que vous pouvez faire pour y remédier.

La plus grande peinture de contenu

Si votre page comprend une vidéo intégrée en ligne, cette vidéo fait partie du Largest Contentful Paint (LCP). Qu’est-ce que cela signifie? Cela signifie que la vidéo est un élément essentiel de l’expérience de la page, à la fois d’un point de vue algorithmique et utilisateur. Si votre temps LCP est trop lent (par exemple, lorsqu’il dépend de l’exécution d’une grande quantité de JavaScript), vous pouvez recevoir une évaluation Core Web Vitals échouée dans Google Search Console. Qui ressemble à ça :

Google aime voir les pages se charger en 2,5 secondes sur une connexion mobile 3G. C’est certainement un défi si les fichiers vidéo HD sont essentiels à l’expérience de votre page.

Changement de mise en page cumulé

Si les vidéos sont les dernières à se charger sur votre page, elles peuvent causer des problèmes avec le Cumulative Layout Shift (CLS). Comment? En forçant des blocs de texte ou d’images à se déplacer sur la page lors du chargement de la vidéo.

Pour atténuer cela, vous devez soit vous assurer que vos vidéos se chargent avec le HTML – mais cela peut bloquer le rendu ailleurs – soit vous assurer que le cadre dans lequel la vidéo apparaîtra se charge avant même que le fichier lui-même ne soit activé.

Corriger avec des espaces réservés

Le moyen de résoudre ces problèmes n’est pas de supprimer les vidéos de votre site Web ! Au lieu de cela, vous devez être intelligent sur la façon dont JavaScript et les fichiers multimédias sont chargés. Avec la vidéo, cela signifie utiliser des espaces réservés pour les images miniatures – de petits fichiers image qui se chargent à l’avance. Ils peuvent servir de déclencheur pour que la vidéo soit lue lorsque vous cliquez dessus.

Si vous utilisez ces vignettes, la plus grande peinture de contenu est terminée. Même sans exécuter le JavaScript associé aux lecteurs vidéo ! De plus, vous avez résolu le changement de disposition cumulatif presque instantanément.

La solution : le plug-in Yoast Video SEO

Le plugin Yoast Video SEO présente un certain nombre d’avantages pour améliorer la vitesse et la santé de votre site. Par exemple, charger des espaces réservés pour les vignettes ! Plutôt que de charger chaque fichier vidéo dès qu’une demande de page est faite, le plug-in Yoast Video SEO charge une image d’espace réservé avant les vidéos. Pendant que l’utilisateur visualise la page, le plugin charge les vidéos en arrière-plan. Le résultat? Lorsqu’un visiteur clique sur le bouton de lecture, vos vidéos sont prêtes.

Les images d’espace réservé sont également petites et rapides à charger, ce qui signifie que la plus grande peinture de contenu peut être créée très rapidement. De plus, il n’y a aucun risque qu’un changement de mise en page cumulatif tardif se produise en raison d’un fichier vidéo à chargement lent. En d’autres termes : le plugin Yoast Video SEO pour WordPress est un moyen simple de s’assurer que vos vidéos n’ont pas d’impact négatif sur vos Core Web Vitals !