Lazyloading en 2025 : vous chargez léger ou vous chargez mal ?

On est en 2025. JavaScript fait tourner des apps entières, les Core Web Vitals dictent toujours les specs SEO, et l'accessibilité web est légalement encadrée depuis l'European Accessibility Act.

Et pourtant… Je vois encore des images injectées en JavaScript sans fallback HTML ou des balises <noscript> mal utilisés.

Le lazyload, c'est pas une "optimisation sympa" : c'est un levier crucial pour la performance, la visibilité SEO et l'inclusion. Autant dire que mal s'en servir, c'est rater sa page.

Alors on fait le point. Et on clarifie tout ce foutoir.

Le lazyloading en JavaScript

Le pattern classique en JS (IntersectionObserver)

<img
  src="blank.png"
  data-src="photo.jpg"
  alt="Image d'illustration"
  class="lazy"
  width="600"
  height="400"
/>

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.add('loaded');
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));

C'est flexible, ça marche pour n'importe quel élément (<video>, <iframe>, …).
Mais sans fallback HTML, l'image est invisible pour :

• les navigateurs sans JS (oui, ça existe encore)
• les lecteurs d'écran qui attendent un img[src] dans le DOM initial
• Google, si le rendu est trop dynamique ou lent

Indéxation du lazyload en JavaScript

Lorsque on lazyload du contenu avec du JavaScript, il n'est pas forcément visible par les moteurs de recherche ou les navigateurs sans JS. Dans ce cas, on utilise la balise <noscript>. Elle est essentiel dès qu'un élément visuel est injecté ou modifié en JavaScript.
Exemple :

<img data-src="photo.jpg" alt="Image d'illustration" class="lazy" width="600" height="400" />
<noscript>
  <img src="photo.jpg" alt="Image d'illustration" width="600" height="400" />
</noscript>

Et pour un affichage correct sans JavaScript :

<noscript>
  <style>
    .lazy { display: none; }
  </style>
</noscript>

Cela permet :

• à Google d'avoir un contenu indexable immédiatement
• à un lecteur d'écran d'accéder à une version propre de l'image
• à la page d'être lisible même sans JS

Si vous utilisez déjà des techniques natives, le <noscript> devient inutile. On y vient...

Lazyloading natif : [loading="lazy"]

Depuis plusieurs années, tous les navigateurs modernes supportent l'attribut loading="lazy" sur les images. Et ça fonctionne aussi sur les iframes.

<img 
  src="photo.jpg" 
  alt="Image d'illustration"
  loading="lazy"
  width="600"
  height="400"
/>

<iframe
  src="https://www.youtube.com/embed/abc123"
  loading="lazy"
  width="560"
  height="315"
></iframe>

Avantages :

• SEO-friendly : Google lit tout, pas besoin de <noscript>, ni de JavaScript
• Accessible par défaut (si alt et dimensions bien renseignés)
• Compatible tous navigateurs modernes

Limites :

• Pas encore supporté sur <video> (du moins pas standardisé)

Et les vidéos ? Lazyload propre en 2025

Le lazyload natif pour les vidéos n'est pas encore standardisé comme pour les images ou les iframes. Mais Google propose une méthode claire dans son article sur le lazyloading des vidéos : utiliser preload="none" et poster.

Exemple :

<video 
  controls
  preload="none"
  poster="poster.jpg"
  width="640"
  height="360"
>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Ça empêche le navigateur de précharger toute la vidéo. Le poster sert d'image de couverture, rapide à afficher (et potentiellement candidate LCP).

Préchargez vos images au-dessus du fold !

Les images visibles dès le chargement de la page ne doivent pas être lazyloadées. Mais elles méritent une priorité de chargement explicite pour ne pas être bloquées par les autres ressources.
Utilisez <link rel="preload"> pour une image au dessus du fold ou une vidéo avec poster :

<link rel="preload" href="image.jpg" as="image" fetchpriority="high">

Tout ce qui n'est pas lazyloadé devrait être préchargé si c'est crucial pour le rendu initial (LCP, visuel principal, logo…).

Bonus : animation quand l'image se charge

HTML

<img
  src="photo.jpg"
  alt="Image d'illustration"
  loading="lazy"
  width="600"
  height="400"
/>

CSS

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 300ms ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

JavaScript

document.querySelectorAll('img[loading="lazy"]').forEach(img => {
  if (img.complete) {
    img.classList.add('loaded');
  } else {
    img.addEventListener('load', () => {
      img.classList.add('loaded');
    });
  }
});

Fallback <noscript>

<noscript>
  <style>
    img[loading="lazy"] {
      opacity: 1 !important;
    }
  </style>
</noscript>

Résultat : effet visuel quand JS est actif, image visible immédiatement quand il ne l'est pas.

En bref : les règles d'or du lazyloading en 2025

• Lazyload JS = <noscript> obligatoire pour l'accessibilité & SEO
• loading="lazy" = pas besoin de <noscript>, c'est natif
• Ne lazyloadez jamais les images au-dessus du fold
• Pour les images au-dessus du fold : utilisez <link rel="preload"> avec fetchpriority="high"
• Toujours renseigner width et height pour éviter les CLS
• Ajoutez un alt pertinent (et pas généré dynamiquement)
• Les vidéos non autoplay = preload="none" + poster