Chargement différé des `iframe`
Différez le chargement des `iframe` hors écran avec `loading=lazy`.
Chargement différé des `iframe` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Qu’est-ce que le chargement différé ?
Le chargement différé reporte le chargement des ressources jusqu’à ce qu’elles soient nécessaires — lorsqu’un élément se trouve près de la zone d’affichage ou à l’intérieur de celle-ci. Pour les cadres intégrés, cela signifie que le document intégré, ses scripts, son CSS et ses ressources ne sont pas téléchargés tant que l’utilisateur ne fait pas défiler la page près du cadre intégré.
Attribut loading
Ajoutez loading="lazy" à un cadre intégré : <iframe src="embed.html" loading="lazy">. Le navigateur détermine quand commencer le chargement en fonction de sa propre heuristique, généralement entre 1 000 et 2 500 px avant que le cadre intégré n’entre dans la zone d’affichage. Aucun JavaScript n’est requis.
Impact sur les performances
Les cadres intégrés peuvent charger d’importantes quantités de ressources (YouTube charge environ 500 Ko de JavaScript). Le chargement différé d’une vidéo intégrée située sous la ligne de flottaison réduit d’autant le chargement initial de la page — ce qui améliore directement le LCP et le temps avant interactivité du contenu situé au-dessus de la ligne de flottaison.
loading="eager"
loading="eager" charge immédiatement le cadre intégré, quelle que soit sa position. Il s’agit du comportement par défaut. L’ajout explicite de eager est utile dans les contextes qui utilisent par défaut le chargement différé, comme les cadres de développement qui ajoutent globalement le chargement différé, lorsqu’un cadre intégré précis doit être chargé immédiatement.
Alternative à IntersectionObserver
Pour une logique de chargement différé complexe, par exemple un chargement au clic ou en fonction de la qualité de la connexion, utilisez IntersectionObserver : observez le conteneur du cadre intégré et définissez src uniquement lorsqu’il entre dans la zone d’affichage. Vous contrôlez ainsi entièrement le moment et les conditions de chargement du cadre intégré.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);Modèle de façade
Affichez par défaut une vignette statique au lieu du cadre intégré. Ajoutez un bouton de lecture par-dessus. Lors d’un clic, remplacez la vignette par le véritable cadre intégré. Le modèle de façade YouTube consiste à afficher l’image miniature de la vidéo et à charger le cadre intégré uniquement lorsque l’utilisateur clique sur le bouton de lecture — ce qui évite le coût total du chargement de l’intégration YouTube.
Modèle cliquer pour charger
Pour les intégrations de réseaux sociaux, comme les fils Twitter ou les publications Instagram, qui chargent beaucoup de JavaScript : affichez un bouton « Charger les commentaires ». Lors d’un clic, insérez le cadre intégré. Les utilisateurs qui n’interagissent pas ne supportent jamais le coût du chargement. Il s’agit d’une amélioration progressive du contenu social intégré.
Prise en charge par les navigateurs
loading="lazy" pour les cadres intégrés est pris en charge par Chrome 77+ et Firefox 121+. Safari ne prend pas en charge le chargement différé des cadres intégrés en 2024. Pour un chargement différé compatible avec tous les navigateurs, utilisez IntersectionObserver comme solution de secours fiable — il fonctionne dans tous les navigateurs modernes.
Prévention de CLS
Réservez de l’espace pour les cadres intégrés chargés paresseusement en utilisant des valeurs explicites pour width, height et aspect-ratio en CSS, afin d’empêcher le décalage cumulatif de mise en page (CLS). Lorsque le cadre intégré est chargé et devient visible, l’espace lui est déjà réservé — aucun contenu environnant ne se décale pour lui faire de la place.
Suivi analytique
Les cadres intégrés chargés paresseusement peuvent avoir une incidence sur l’analyse : si un cadre intégré destiné à un pixel de suivi ou à une intégration analytique est chargé paresseusement, il peut ne pas s’exécuter pour les utilisateurs qui ne font pas défiler la page jusqu’à lui. Assurez-vous que les cadres intégrés indispensables au suivi analytique et au suivi des conversions sont chargés immédiatement ou placés au-dessus de la ligne de flottaison.
Combiner le chargement différé et sandbox
Utilisez ensemble le chargement différé et sandbox : <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. Les deux attributs fonctionnent indépendamment — le chargement différé contrôle le moment du chargement, tandis que sandbox contrôle ce que le cadre intégré peut faire. Combinez-les pour une intégration efficace et sécurisée de contenu tiers.
Vérification des connaissances
En quoi consiste le schéma de façade pour le chargement différé des cadres iframe ?
Résumé
Le chargement différé des iframe avec loading="lazy" reporte le chargement des ressources jusqu’à ce qu’elles soient proches de la zone d’affichage, ce qui réduit considérablement le chargement initial de la page pour les intégrations volumineuses. Le schéma de façade et le chargement au clic vont plus loin en ne chargeant l’iframe qu’après une interaction de l’utilisateur. IntersectionObserver permet de contrôler le chargement différé complexe dans différents navigateurs. Réservez les dimensions de l’iframe pour éviter le CLS.
Questions Fréquemment Posées
La leçon « Chargement différé des `iframe` » est-elle gratuite ?
Oui — le texte complet de « Chargement différé des `iframe` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Chargement différé des `iframe` » ?
Différez le chargement des `iframe` hors écran avec `loading=lazy`. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Chargement différé des `iframe` » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- L’élément `iframe` : `src` et `sandbox`
- Sécurité des `iframe` : détournement de clics et `X-Frame-Options`
- Les éléments `embed` et `object`
- Chargement différé des `iframe`