Mise en place d’un chargement paresseux pour les vidéos
Senior SEO-specialist
Les vidéos enrichissent votre contenu, mais elles sont également lourdes. Les éléments intégrés standard se chargent immédiatement lors de la visite de la page, ce qui ralentit le temps de chargement et a une incidence négative sur votre indice de vitalité Web de base. La solution : le chargement paresseux. Dans cet article, je vous montre comment charger les vidéos dès qu’elles sont affichées, sans plug-ins externes ni problèmes de performances.
1. Pourquoi le chargement paresseux pour les vidéos ?
Un embed standard de YouTube ou de Vimeo charge automatiquement plusieurs scripts externes, des vignettes et des ressources iframe lors de la visite des pages.
Inconvénients :
- Lent LCP (Largest Contentful Paint)
- Score PageSpeed inférieur
- Mauvaise performance mobile
- Consommation inutile de données avec les vidéos en bas de page
Le chargement paresseux garantit que la vidéo ne se charge qu’une fois que le visiteur a fait défiler la page jusqu’à elle.
2. Opération : de l’image à l’iframe lors du défilement
La technique de chargement paresseux fonctionne comme suit :
- Vous affichez une vignette statique (par exemple JPG ou WebP)
- Lors du défilement (via l’API Intersection Observer), remplacez cette vignette par l’iframe <.>
- Résultat : chargement plus rapide, pas de scripts bloquant le rendu, meilleure expérience pour l’utilisateur.
3. Exemple HTML + JavaScript (YouTube)
HTML :
html
<div class="video-wrapper" data-video-id="dQw4w9WgXcQ">
<img src="https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video preview" loading="lazy">
<button class="play-button" aria-label="Video afspelen">▶</button>
</div>
CSS (facultatif) :
css
.video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
cursor: pointer;
}
.video-wrapper img {
width: 100%;
display: block;
}
.play-button {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
background: none;
border: none;
color: white;
}
JavaScript (Intersection Observer) :
html
<script>
document.addEventListener('DOMContentLoaded', function () {
const videos = document.querySelectorAll('.video-wrapper');
const loadIframe = (el) => {
const videoId = el.getAttribute('data-video-id');
const iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allow', 'autoplay; encrypted-media');
iframe.setAttribute('allowfullscreen', '');
iframe.style.width = '100%';
iframe.style.height = '100%';
el.innerHTML = '';
el.appendChild(iframe);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadIframe(entry.target);
observer.unobserve(entry.target);
}
});
});
videos.forEach(video => {
observer.observe(video);
});
});
</script>
Aan de slag met SEO? Neem gerust contact op.
4. Alternative : chargement paresseux avec des plugins (avec CMS)
Pour les sites WordPress :
- WP Rocket – Chargement paresseux des images et des vidéos
- Lazy Load for Videos – Plugin spécifique pour les vidéos
- LiteSpeed Cache – Optimisation tout-en-un, y compris le chargement paresseux des vidéos
Remarque : vérifiez visuellement que les vidéos intégrées se chargent toujours correctement après l’installation.
5. Optimisation supplémentaire : compression des vignettes
La plupart des vignettes vidéo ont une taille de 480 px ou plus. Optimisez-les avec :
- Format WebP (plus petit, même qualité)
- Compression via Squoosh
- loading= »lazy » at <img>
Utilisez également un texte alt pour le contexte et le référencement.
En conclusion
Le chargement paresseux des vidéos est une évidence : meilleur temps de chargement, meilleure ergonomie et meilleurs résultats dans Lighthouse/PageSpeed. Grâce à une simple combinaison de HTML, CSS et JS, vous ne chargez les vidéos que lorsque c’est nécessaire – et vous évitez les retards inutiles lors des premières visites.
