Un embed YouTube charge les scripts propres au lecteur ainsi qu’une miniature d’aperçu dès son chargement, et sur une page contenant plusieurs vidéos, cela s’accumule rapidement. Voici comment rester rapide sans renoncer à la vidéo intégrée.
Pourquoi les embeds affectent la vitesse de la page
Même avant qu’un visiteur n’appuie sur lecture, une iframe intégrée demande les ressources du lecteur YouTube ainsi qu’une image miniature. Sur une page d’avis contenant cinq vidéos intégrées, par exemple, ce sont cinq ensembles de requêtes qui se déclenchent en même temps au chargement de la page, entrant en concurrence avec les ressources de votre propre site pour la bande passante et le temps de rendu.
Solution 1 : le lazy-loading natif
La solution la plus simple tient en un seul attribut HTML. Ajouter loading=”lazy” à une balise <iframe> indique au navigateur de reporter son chargement jusqu’à ce qu’elle soit sur le point d’apparaître à l’écran :
<iframe src="..." loading="lazy" ...></iframe>Cette technique est prise en charge par tous les navigateurs modernes, ne nécessite aucun JavaScript, et constitue le changement le plus efficace pour une page contenant une vidéo intégrée sous la ligne de flottaison.
Solution 2 : le clic pour charger
Pour les pages contenant de nombreux embeds, une option encore plus poussée consiste à ne charger aucune iframe tant qu’un visiteur ne clique pas dessus. Affichez une image miniature statique, récupérée depuis les URL de miniatures publiques de YouTube (voir notre visionneuse de miniatures), avec un bouton de lecture en superposition, et ne substituez la véritable iframe qu’au clic. Cela signifie qu’aucune requête vers YouTube n’a lieu pour les vidéos qu’un visiteur ne regarde jamais réellement.
Solution 3 : ne réserver la lecture automatique qu’à ce qui en a besoin
La lecture automatique d’une vidéo ajoute un vrai travail dès le chargement de la page : le lecteur doit mettre en mémoire tampon immédiatement plutôt que d’attendre l’intention de l’utilisateur. Réservez la lecture automatique aux embeds véritablement importants, et misez sur le lazy-loading combiné à un bouton de lecture visible pour le reste.
Mesurer l’impact
Des outils comme Google PageSpeed Insights ou le panneau Lighthouse intégré à votre navigateur signalent directement les embeds tiers non optimisés, et vous permettent de comparer les temps de chargement avant et après l’application du lazy-loading. Sur les pages contenant plusieurs vidéos, la différence est généralement facile à voir, tant dans les chiffres que dans la sensation de chargement perçue.
Intégré par défaut
Notre générateur de code d’intégration inclut loading=”lazy” par défaut sur chaque embed généré, de sorte que cette optimisation est déjà en place dès que vous copiez le code.