L’intégration d’une vidéo YouTube ralenti-t-il 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

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

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 cette vidéo pour voir le comportement exact de l’utilisateur sur cet exemple concret.

Chapitres de la vidéo :

01:26 Exemple des infos JSON

01:56 Copier le code HTML ci-dessous, et remplacer avec les bonnes références. Ajouter le style CSS pour la rendre responsive.

04:00 Copier coller dans une fenêtre HTML sur votre page pour l’intégrer

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.

01:23 Chercher le bout de JSON sur YouTube, pour trouver les URLs de l’image placeholder de la vidéo et les autres attributs (comme le titre, la durée, la description, etc).
Voici le petit bout de l’URL que vous placerez tout au début.

https://www.youtube.com/oembed?format=json&url=

Ouvrez la video YouTube dans Chrome et placez le bout ci-dessus avant l’URL de la vidéo.
Exemple : https://www.youtube.com/oembed?format=json&url=https://www.youtube.com/watch?v=JWf9xIxzICc

YouTube video format JSON

Le code pourrait être facilement insérer dans une page HTML, dans une section HTML sur WordPress (voir l’exemple ci-dessous), ou Shopify, etc.

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

Il va falloir tester l’ergonomie mobile de la page après avoir inséré 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 cette <iframe>, ce style pourrait ajuster l’ergonomie mobile et rendre la vidéo responsive.

Vous pouvez donner n’importe quel nom à votre classe. Dans ce cas elle s’appelle resp-iframe.

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 :

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

L’aspect gênant ? Oui, sur mobile

Sur du format mobile, le fait de devoir cliquer 2 fois avant de jouer la vidéo pourrait rendre certaines utilisations / expériences utilisateur, moins qu’idéales. Sur WordPress, comme l’exemple ci-dessous, à priori il n’y aura pas besoin du double-clicks.

    

Le premier clique permet de « demander » les requêtes YouTube de se charger, et le deuxième clique joue la vidéo. Mais en général, et pour des serveurs mutualisé et surtout des vidéos en haut de la page, cette solution est adaptée à plein d’utilisation.

Visionnez ici le comportement sur mobile : premier click à la seconde 2 (minute 0:02) puis la demande de la vidéo = deuxième click à la seconde 4 (minute 0:04) qui joue la vidéo :

Besoin d’aide ? Demandez un devis ou discutons-en

Laisser un commentaire

Retour haut de page