Comment intégrer des vidéos sans ralentir votre site

• Si vous servez le MP4 depuis votre propre hébergement, le navigateur peut commencer à télécharger des mégaoctets que personne n’a demandé à voir.
• Si le lecteur n’a pas d’espace réservé, la page « saute » au chargement (mauvaise note de stabilité visuelle).
• Charger plusieurs lecteurs à la fois, tous en haut, retarde ce que le visiteur veut voir en premier.

1. 1Hébergez la vidéo en dehors de votre hébergement : avec Dembed, elle est servie depuis son propre stockage, en plusieurs qualités, et seul ce qui est lu est téléchargé.
2. 2Réservez l’espace avec aspect-ratio, pour que la page ne bouge pas.
3. 3Utilisez loading="lazy" sur les iframes qui ne sont pas sur le premier écran : elles ne se chargent que lorsque le visiteur s’en approche.
4. 4Ne lancez pas toutes les vidéos automatiquement : seulement la principale, si elle apporte vraiment quelque chose.
5. 5Mettez le titre de la vidéo dans l’attribut title de l’iframe.

<iframe src="https://dembed.cc/embed/v_VOTRE_ID" title="Présentation du produit" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>

• Dans une galerie, affichez des miniatures qui renvoient vers la vidéo et ne chargez le lecteur qu’au clic.
• Ou intégrez-les toutes avec loading="lazy" : seules celles jusqu’où le visiteur fait défiler se chargeront.
• Répartissez les listes très longues sur plusieurs pages.

Passez votre page dans PageSpeed Insights de Google avant et après les changements. Regardez le temps de chargement du contenu principal et la stabilité visuelle : avec ces règles, les vidéos cessent d’être le problème.