Lazy loading des images et vidéos : guide pratique pour votre site

Un site vitrine classique contient entre 20 et 50 images. Sans lazy loading, le navigateur télécharge la totalité de ces fichiers dès l’ouverture de la page, y compris ceux situés tout en bas que le visiteur ne verra peut-être jamais. Le résultat : un temps de chargement initial gonflé et une consommation de bande passante inutile, particulièrement pénalisante sur mobile.

Le lazy loading (chargement différé) résout ce problème en ne téléchargeant les ressources que lorsqu’elles sont sur le point d’entrer dans la zone visible de l’écran. Ce guide explique comment l’implémenter correctement pour vos images et vidéos.

Le principe du lazy loading

Le fonctionnement est simple : au lieu de charger toutes les images immédiatement, le navigateur attend que l’utilisateur fasse défiler la page. Lorsqu’une image approche de la zone visible (le viewport), le téléchargement se déclenche automatiquement.

Les bénéfices sont immédiats :

• Le temps de chargement initial diminue, parfois de plusieurs secondes
• La consommation de données mobiles est réduite
• Les Core Web Vitals s’améliorent, notamment le LCP et le FCP
• Les requêtes réseau diminuent, réduisant la charge serveur

Pour une PME suisse dont le site contient une galerie de réalisations ou un catalogue de produits, la différence peut être spectaculaire.

Lazy loading natif en HTML

Depuis 2020, tous les navigateurs modernes supportent le lazy loading natif via un simple attribut HTML. C’est la méthode la plus simple et la plus recommandée.

Pour les images

Il suffit d’ajouter l’attribut loading="lazy" à vos balises image :

<img src="photo-equipe.webp"
     alt="L'équipe tacelo au travail"
     width="800"
     height="600"
     loading="lazy">

Trois points essentiels à respecter :

• Toujours spécifier width et height pour éviter les décalages de mise en page (CLS)
• Toujours renseigner l’attribut alt pour l’accessibilité
• Ne jamais utiliser loading="lazy" sur les images visibles au premier écran (above the fold)

Pour les iframes

Le lazy loading natif fonctionne aussi sur les iframes, ce qui est particulièrement utile pour les vidéos YouTube ou les cartes Google Maps intégrées :

<iframe src="https://www.youtube.com/embed/..."
        width="560"
        height="315"
        loading="lazy"
        title="Présentation de notre agence">
</iframe>

Une iframe YouTube non lazy-loadée charge environ 800 Ko de ressources. Si votre page contient trois vidéos intégrées, cela représente 2,4 Mo économisés pour les visiteurs qui ne scrollent pas jusque-là.

Intersection Observer : le lazy loading avancé

Pour des besoins plus spécifiques, l’API JavaScript Intersection Observer offre un contrôle total sur le déclenchement du chargement.

Quand l’utiliser

L’Intersection Observer est préférable au lazy loading natif dans certains cas :

• Vous souhaitez déclencher une animation ou un chargement progressif (fade-in)
• Vous devez gérer des arrière-plans CSS (background-image) qui ne supportent pas loading="lazy"
• Vous voulez précharger les images un peu avant qu’elles n’entrent dans le viewport (avec un rootMargin)
• Vous avez besoin de statistiques sur les images réellement vues par vos visiteurs

Principe de fonctionnement

L’Intersection Observer surveille un ou plusieurs éléments et déclenche un callback lorsque ceux-ci deviennent visibles (ou approchent du viewport). Le mécanisme est performant car le navigateur gère l’observation de manière asynchrone, sans bloquer le thread principal.

La logique de base :

1. Les images sont initialement chargées avec un placeholder léger ou sans source
2. L’Observer surveille ces éléments
3. Lorsqu’un élément entre dans la zone de détection, la vraie source est assignée
4. L’Observer cesse de surveiller l’élément une fois chargé

Le rootMargin pour anticiper

Le paramètre rootMargin permet de définir une marge autour du viewport. Avec un rootMargin de “200px”, le chargement se déclenche 200 pixels avant que l’image n’entre dans la zone visible. Le visiteur ne verra jamais de placeholder car l’image sera déjà chargée lorsqu’il scrollera jusqu’à elle.

Lazy loading des vidéos

Les vidéos représentent un défi particulier car elles sont nettement plus lourdes que les images. Deux stratégies se complètent.

Vidéos intégrées (YouTube, Vimeo)

La méthode la plus efficace est le “facade pattern” : afficher une image miniature cliquable au lieu de l’iframe vidéo. L’iframe n’est chargée que lorsque l’utilisateur clique sur le bouton lecture.

Cette approche économise entre 500 Ko et 1,5 Mo par vidéo intégrée et améliore considérablement le temps de chargement initial. La miniature peut être l’image par défaut de YouTube (accessible via une URL standardisée) ou une image personnalisée en WebP.

Vidéos hébergées localement

Pour les vidéos hébergées sur votre propre serveur (hero vidéo, fond animé), l’attribut preload="none" empêche le navigateur de télécharger la vidéo avant qu’elle ne soit nécessaire :

<video preload="none" poster="apercu-video.webp" playsinline>
  <source src="video-hero.mp4" type="video/mp4">
</video>

L’attribut poster affiche une image de prévisualisation pendant que la vidéo n’est pas encore chargée. C’est une solution élégante pour les vidéos intégrées sur un site sans pénaliser la performance.

Erreurs fréquentes à éviter

Lazy-loader l’image LCP

L’erreur la plus courante est d’appliquer le lazy loading à la plus grande image visible au premier écran (l’image hero, par exemple). Cette image définit le LCP (Largest Contentful Paint) et doit se charger le plus vite possible. Le lazy loading ajoute un délai qui dégrade cette métrique critique.

La règle est simple : les images visibles sans scroll ne doivent pas avoir loading="lazy". Ajoutez plutôt fetchpriority="high" pour les prioriser.

Oublier les dimensions

Sans attributs width et height, le navigateur ne connaît pas la taille de l’image avant son chargement. Lorsque l’image apparaît enfin, elle pousse le contenu environnant et génère un décalage de mise en page (CLS). Ce problème est encore plus visible avec le lazy loading car les images se chargent progressivement.

Trop d’images sur une seule page

Le lazy loading ne résout pas tout. Si votre page de réalisations contient 200 images, même avec le lazy loading, l’expérience de scroll sera dégradée. Envisagez plutôt une pagination ou un chargement “load more” qui ajoute les images par lots.

Ignorer le fallback

Bien que le support navigateur soit quasi universel aujourd’hui (plus de 95 % des navigateurs), vérifiez que vos images s’affichent correctement sur les navigateurs plus anciens. Le lazy loading natif échoue gracieusement : si le navigateur ne le supporte pas, l’image se charge normalement.

Lazy loading et SEO

Une question revient souvent : le lazy loading nuit-il au référencement Google ? La réponse courte est non, à condition de bien l’implémenter.

Google affirme officiellement que Googlebot comprend et interprète le lazy loading natif (loading="lazy"). Le bot est capable de simuler le scroll pour découvrir les images lazy-loadées.

Quelques précautions pour maintenir une bonne indexation des images :

• Utilisez le lazy loading natif plutôt qu’une bibliothèque JavaScript personnalisée
• Assurez-vous que l’URL de l’image est présente dans le code HTML (pas uniquement en JavaScript)
• Renseignez l’attribut alt de manière descriptive pour le SEO des images
• Incluez vos images dans le sitemap XML si elles ont une valeur SEO importante

Impact mesurable

Pour illustrer l’impact du lazy loading, prenons l’exemple concret d’un site vitrine de PME avec une page d’accueil contenant 15 images :

• Sans lazy loading : le navigateur télécharge les 15 images immédiatement, soit environ 3 Mo de données. Temps de chargement sur une connexion 4G : 4,2 secondes.
• Avec lazy loading : seules les 4 images du premier écran sont chargées immédiatement, soit 800 Ko. Temps de chargement : 1,8 secondes.

La différence de 2,4 secondes est perceptible et impacte directement le taux de rebond et la satisfaction utilisateur.

Mise en pratique pour votre site

Si votre site utilise un CMS comme WordPress, des plugins de performance (WP Rocket, Perfmatters) activent le lazy loading automatiquement. Pour les sites sur mesure, le lazy loading natif est la solution la plus simple et la plus performante.

L’implémentation prend quelques minutes pour un gain de performance durable. C’est l’une des optimisations au meilleur rapport effort/résultat dans une démarche d’amélioration de la web performance.

Chez tacelo, nous intégrons systématiquement le lazy loading dans nos projets, combiné à une optimisation complète des images (format WebP, dimensionnement adaptatif, compression). Le résultat : des sites qui se chargent en moins de deux secondes, même sur les connexions mobiles.