Différer le chargement des iframes (loading=lazy)

Les intégrations tierces (lecteurs vidéo, publications de réseaux sociaux, cartes, annonces) reposent très souvent sur des iframes. Or chaque iframe télécharge ses propres ressources, parfois plusieurs mégaoctets de données et de JavaScript, même lorsque l’utilisateur ne fait jamais défiler la page jusqu’à elle. Ce gaspillage ralentit l’ensemble de la page et consomme de la bande passante inutilement.

Différer le chargement des iframes situées hors de l’écran consiste à ne les charger que lorsque l’utilisateur s’en approche par défilement. Pour le SEO, c’est un levier direct : vous libérez de la bande passante pour les ressources visibles, vous accélérez le rendu initial et vous améliorez plusieurs signaux Core Web Vitals que Google prend en compte, dans le prolongement du travail pour différer images et iframes.

Le principe est simple : le navigateur retarde la récupération de l’iframe tant qu’elle reste éloignée du viewport, puis la charge juste avant qu’elle n’entre à l’écran. L’utilisateur ne perçoit aucune différence, mais le navigateur évite des téléchargements coûteux pour du contenu jamais consulté.

Les mesures de Chrome sont éloquentes : le chargement différé des iframes hors écran peut générer une économie de données moyenne de 2 à 3 %, réduire le First Contentful Paint de 1 à 2 % à la médiane et améliorer la réactivité au 95e centile. Sur les appareils à réseau contraint, la bande passante ainsi libérée profite directement aux ressources qui déterminent le Largest Contentful Paint, tandis que d’autres intégrations gagnent à être traitées comme les vidéos à différer.

Le chargement différé natif s’active avec un seul attribut HTML, sans dépendance JavaScript. L’attribut loading accepte deux valeurs : lazy pour différer la ressource hors écran, et eager pour la charger immédiatement. Ne pas indiquer l’attribut revient au comportement eager par défaut.

La syntaxe est identique sur l’élément iframe et sur l’élément image. Pensez à toujours renseigner les attributs width et height pour réserver l’espace et éviter les décalages de mise en page.

Si vous générez vos iframes dynamiquement, l’attribut reste pris en charge : il suffit de définir la propriété loading sur l’élément avant de l’insérer dans le document. Le navigateur appliquera alors le même comportement différé qu’avec une iframe écrite directement dans le HTML.

Les intégrations multimédias et sociales sont les candidates idéales, car elles apparaissent souvent en bas de page et pèsent lourd au chargement initial, à l’image des régies publicitaires qu’il faut savoir charger sans ralentir le site. Le tableau ci-dessous récapitule les gains observés par Google sur quelques services populaires.