L’intégration d’une vidéo YouTube ralenti le chargement de la page

Comment integrer une video youtube sans ralentir la page web

L’astuce pour améliorer la vitesse d’une page web quand elle intègre une vidéo YouTube

Vidéo explicative | Langue : Français | Durée : 7 min 33 sec

Table des matières

Comment l’intégration d’une vidéo YouTube ralentit-elle la vitesse de chargement du site

Les appels d’une vidéo intégrée (dans une page web sur votre site – embeded video) vers YouTube sont nombreux et lourd en poids.

Voici un exemple d’une page qui ne contient que le code d’intégration <iframe> d’une vidéo YouTube; à droite, on peut distinguer pas moins de 65 différentes requêtes / réponses faites par le navigateur vers / de YouTube, Google fonts, etc.

C’est le cas par exemple des vidéos insérées sur les pages produits de sites e-commerce comme Shopify ou WooCommerce. Voir cet audit SEO ↳ d’un site e-commerce Shopify en 5 vidéos / 153 minutes (contenu payant ℹ️).

Cela va sans dire… c’est lourd et lent 🐌 .

Pour améliorer la vitesse de chargement d'une page web intégrant une vidéo YouTube, on regarde les requêtes faites entre la page et la vidéo.
Exemple des requêtes d’une seule vidéo YouTube sur une page

Accélérer le chargement des pages web contenant une vidéo YouTube.

Solution : afficher et charger une image + le child-src. Le principe c’est de demander la page avec un minimum de requêtes depuis et vers YouTube (ou autre). Et donc on « charge » l’image d’abord avec le petit bouton triangle « play », et ce n’est qu’une fois cliqué que l’appel vers YouTube se déclenche et fait place à la vidéo même.

Le child-src facilite la tâche quand on a une Content Security Policy (CSP) pour définir les sources valides ↳.

Il existe différentes techniques, mais le principe est le même : afficher une image avant le chargement de la vidéo même. L’avantage c’est qu’on on gagne en vitesse et en réactivité sur la page en question; le désavantage, on demande à l’utilisateur de cliquer 2 fois avant de visionner la vidéo. À vous de choisir.

Vous pouvez allez à la minute 05min et 16sec dans la vidéo ci-dessus pour voir le comportement exact de l’utilisateur sur cet exemple concret.

Augmenter la vitesse de chargement du site (contenant des vidéos YouTube)

Voici un exemple HTML d’une vidéo YouTube insérée en iFrame: à noter que le « width » / « height » peut s’ajuster à volonté. Suivre les étapes dans la vidéo ci-dessus.

  1. Chercher le bout de JSON sur YouTube, trouver les URLs de l’image placeholder de la vidéo et les autres attributs (comme le titre, la durée, la description, etc) – 1 min 23
  2. Exemple des infos JSON – 1 min 26
  3. Copier le code HTML ci-dessous, et remplacer avec les bonnes références – 1 min 56
  4. Ajouter le style CSS pour la rendre responsive.
  5. Copier coller dans une fenêtre HTML sur votre page pour l’intégrer – 4 min.
<iframe class="resp-iframe" width="850" height="480" child-src="https://www.youtube.com/embed/L3dYocCSU-E" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%;}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:red;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/L3dYocCSU-E?rel=0&amp;amp;showinfo=0&amp;autoplay=1&amp;loop=0&amp;enablejsapi=0>
        <img src=https://i.ytimg.com/vi/L3dYocCSU-E/hqdefault.jpg alt='S3 amazon expliqué par etc'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture allowfullscreen title="vidéo à propos de S3 "></iframe>

Le code pourrait être facilement insérer dans un WordPress, Shopify, etc.

Il va falloir tester surtout au niveau de l’ergonomie mobile de la page après avoir insérer la vidéo (padding, position, etc) et voir ce qui marche le mieux pour la page en format mobile. S’assurer d’abord que la page qui héberge la vidéo est mobile-friendly (voir la relation ergonomie mobile dans la GSC et fichier robots.txt ↳ contenu libre).

    <style>
        .resp-iframe {
            display: block;
            width: 100%;
        }
    </style>

Puisqu’on utilise class="resp-iframe" pour cet <iframe>, ce petit style pourrait ajuster l’ergonomie mobile et rendre la vidéo responsive.

Vous pouvez donner n’importe quel nom à votre classe.

HTML complet de la page

<!DOCTYPE html>
<html lang="fr" ontouchmove>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div>
    <style>
        .resp-iframe {
            display: block;
            width: 100%;
        }
    </style>
    <iframe class="resp-iframe" width="850" height="480" child-src="https://www.youtube.com/embed/L3dYocCSU-E" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%;}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:red;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/L3dYocCSU-E?rel=0&amp;amp;showinfo=0&amp;autoplay=1&amp;loop=0&amp;enablejsapi=0>
        <img src=https://i.ytimg.com/vi/L3dYocCSU-E/hqdefault.jpg alt='S3 amazon expliqué par etc'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="vidéo à propos de S3 "></iframe>
    </div>
</body>
</html>

Rendre la vidéo YouTube intégrée 📱 responsive

Nous avons donné le nom de « resp-iframe » à la « class » mais vous pouvez lui donner un autre nom de votre préférence. La partie « intéressante » pour s’assurer que la vidéo est responsive c’est la suivante : (à mettre dans un widget sous WordPress, ou direct section HTML, ou dans la description de produit sur Shopify, etc).

    <div>
    <style>
        .resp-iframe {
            display: block;
            width: 100%;
        }
    </style>
    <iframe class="resp-iframe" width="850" height="480" child-src="https://www.youtube.com/embed/L3dYocCSU-E" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%;}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:red;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/L3dYocCSU-E?rel=0&amp;amp;showinfo=0&amp;autoplay=1&amp;loop=0&amp;enablejsapi=0>
        <img src=https://i.ytimg.com/vi/L3dYocCSU-E/hqdefault.jpg alt='S3 amazon expliqué par etc'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="vidéo à propos de S3 "></iframe>
    </div>

Résultat de l’optimisation du temps de chargement

Résultat, nous avons intégré une vidéo responsive en HTML et optimisé la vitesse de chargement de cette page web.

L’utilisateur clique sur l’image, la page commence à afficher les éléments YouTube et on peut visionner la vidéo sans ralentir la vitesse du site. Nous avons allégé les requêtes initiales et rendu l’expérience utilisateur plus agréable.

Laisser un commentaire

Retour haut de page
Ré-autoriser les cookies (règle l'ajout au panier sur certains navigateurs)