Aller au contenu

Recommandez Gemeos à votre réseau et touchez une commission

Découvrir notre système d’apport d’affaires
On en discute ?

SEO / GEO4 min lecture

Comment activer le lazy loading des iframes dans Webflow ?

Apprenez à activer le lazy loading natif sur les iframes dans Webflow pour améliorer vos Core Web Vitals et réduire le temps de chargement initial de vos pages.

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='<iframe src=https://www.youtube.com/embed/VOTRE_ID?autoplay=1 style=position:absolute;top:0;left:0;width:100%;height:100% frameborder=0 allowfullscreen></iframe>'">
  <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.

TechniqueRéduction du poids initialComplexité
loading="lazy" sur iframeModéréeTrès simple
Placeholder image + chargement au clicTrès forte (économise 500Ko+ par vidéo)Simple
Librairie lite-youtube-embedTrès forteModérée

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

Publié le 21 mai 2026

Alexandre Baverel

Alexandre Baverel est Head of Sales chez Gemeos. Fort de près de 8 ans d'expérience en SEO et en développement commercial, il accompagne les entreprises dans leur croissance en combinant visibilité, acquisition et conversion. Son approche lui permet d'aligner stratégie marketing et performance business.

Ces tutoriels pourraient vous intéresser

Tutoriels similaires

Voir tout

Vous allez notre collaboration, c’est garanti

Prêt à faire décoller votre activité ?

demander un devis

Let’s f*****G GO !!