Comment implémenter le lazy loading natif sur les iframes dans Webflow ?

Les iframes (vidéos YouTube, Google Maps, formulaires embarqués) sont parmi les ressources les plus lourdes d'une page web. Sans lazy loading, elles se chargent toutes au chargement initial, même si l'utilisateur ne les voit jamais. Sandro, cofondateur de l'agence Webflow Gemeos, vous montre comment y remédier.

Pourquoi les iframes pèsent sur vos performances

Une iframe YouTube charge par défaut plusieurs centaines de Ko de scripts, styles et ressources dès l'ouverture de la page. Sur une page avec 2 ou 3 vidéos YouTube intégrées, c'est souvent 1 à 3 Mo de ressources chargées inutilement pour les utilisateurs qui ne scrollent pas jusqu'à ces éléments. L'impact sur le LCP (Largest Contentful Paint) et le TBT (Total Blocking Time) est direct.

1. Activez le lazy loading natif sur une iframe Webflow

Dans Webflow, les iframes natives (élément Video) ne permettent pas d'ajouter l'attribut loading directement via l'interface. Utilisez un élément "HTML Embed" à la place et ajoutez l'attribut loading="lazy" manuellement.

<iframe
  src="https://www.youtube.com/embed/VOTRE_ID"
  loading="lazy"
  width="100%"
  height="480"
  frameborder="0"
  allowfullscreen
>iframe>

2. Utilisez la technique du placeholder pour YouTube

Le lazy loading natif diffère le chargement mais charge quand même l'iframe entière dès que l'utilisateur approche. La technique du placeholder YouTube est encore plus efficace : elle remplace l'iframe par une image statique (la miniature YouTube) et ne charge le player qu'au clic.

<div style="position:relative;padding-bottom:56.25%;cursor:pointer;" onclick="this.innerHTML=''">
  <img
    src="https://img.youtube.com/vi/VOTRE_ID/maxresdefault.jpg"
    loading="lazy"
    style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;"
    alt="Titre de la vidéo"
  >
div>

Remplacez VOTRE_ID par l'identifiant YouTube de la vidéo (la partie après "watch?v=" dans l'URL YouTube). Consultez aussi notre guide dédié : réduire le poids du player vidéo YouTube.

Conclusion

Le lazy loading sur les iframes est l'une des optimisations de performance les plus rapides à implémenter. Sur une page avec plusieurs vidéos, le gain sur le LCP peut être significatif.

• Cas d'usage 1 : page d'accueil avec une vidéo de présentation above the fold remplacée par un placeholder
• Cas d'usage 2 : page de témoignages avec plusieurs vidéos clients chargées en lazy
• Cas d'usage 3 : articles de blog avec des vidéos YouTube intégrées dans le Rich Text