Lazy Loading für iframes
Verzögern Sie das Laden nicht sichtbarer iframes mit loading=lazy
Lazy Loading für iframes ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Lazy Loading?
Lazy Loading verzögert das Laden von Ressourcen, bis sie benötigt werden – wenn sich ein Element nahe am Viewport befindet oder in ihn gelangt. Bei iframes bedeutet dies, dass das eingebettete Dokument sowie seine Skripte, sein CSS und seine Assets erst heruntergeladen werden, wenn der Benutzer nahe an das iframe scrollt.
Das loading-Attribut
Fügen Sie einem iframe loading="lazy" hinzu: <iframe src="embed.html" loading="lazy">. Der Browser bestimmt anhand seiner eigenen Heuristik, wann das Laden beginnt, normalerweise 1000–2500px bevor das iframe den Viewport erreicht. JavaScript ist nicht erforderlich.
Auswirkungen auf die Performance
iframes können erhebliche Ressourcen laden, beispielsweise etwa 500KB JavaScript bei YouTube. Durch Lazy Loading eines Video-Embeds unterhalb des sichtbaren Bereichs wird die anfängliche Seitenladung genau um diese Menge reduziert. Das verbessert LCP und Time to Interactive für Inhalte oberhalb des sichtbaren Bereichs unmittelbar.
loading="eager"
loading="eager" lädt das iframe unabhängig von seiner Position sofort. Dies ist das Standardverhalten. Das explizite Hinzufügen von eager ist in Umgebungen sinnvoll, die standardmäßig Lazy Loading verwenden, etwa Frameworks, die es global hinzufügen, wenn ein bestimmtes iframe sofort geladen werden muss.
Alternative mit Intersection Observer
Für komplexe Logik zum verzögerten Laden, etwa das Laden beim Klicken oder abhängig von der Verbindungsqualität, verwenden Sie IntersectionObserver: Beobachten Sie den Container des iframes und setzen Sie src erst, wenn er in den Viewport gelangt. Dadurch erhalten Sie vollständige Kontrolle darüber, wann und ob das iframe geladen wird.
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);Facade-Muster
Zeigen Sie standardmäßig ein statisches Vorschaubild anstelle des iframes an. Legen Sie eine Wiedergabeschaltfläche darüber. Ersetzen Sie das Vorschaubild beim Klicken durch das echte iframe. Beim YouTube-Facade-Muster wird das Vorschaubild des Videos angezeigt und das iframe erst geladen, wenn der Benutzer auf „Wiedergeben“ klickt. Dadurch entfallen die vollständigen Ladeaufwände des YouTube-Embeds.
Click-to-Load-Muster
Bei Social-Embeds wie Twitter-Timelines oder Instagram-Beiträgen, die umfangreiches JavaScript laden, zeigen Sie eine Schaltfläche „Kommentare laden“ an. Fügen Sie das iframe beim Klicken ein. Benutzer, die nicht interagieren, verursachen niemals die entsprechenden Ladeaufwände. Das ist Progressive Enhancement für eingebettete Social-Inhalte.
Browserunterstützung
loading="lazy" für iframes wird ab Chrome 77 und Firefox 121 unterstützt. Safari unterstützt Lazy Loading für iframes (Stand 2024) nicht. Verwenden Sie für browserübergreifendes Lazy Loading IntersectionObserver als zuverlässigen Fallback – es funktioniert in allen modernen Browsern.
CLS verhindern
Reservieren Sie mit expliziten Angaben für width, height und CSS aspect-ratio Platz für verzögert geladene iframes, um Cumulative Layout Shift (CLS) zu verhindern. Wenn das iframe geladen wird und sichtbar erscheint, ist der Platz bereits reserviert – umliegende Inhalte müssen sich nicht verschieben, um es aufzunehmen.
Analyse-Tracking
Lazy-loaded iframes können sich auf Analysen auswirken: Wird ein iframe für ein Tracking-Pixel oder ein Analyse-Embed verzögert geladen, wird es möglicherweise bei Benutzern, die nicht dorthin scrollen, nicht ausgeführt. Stellen Sie sicher, dass wichtige Analyse- und Conversion-Tracking-iframes sofort oder oberhalb des sichtbaren Bereichs geladen werden.
lazy und sandbox kombinieren
Verwenden Sie lazy und sandbox gemeinsam: <iframe src="embed.html" loading="lazy" sandbox="allow-scripts">. Beide Attribute funktionieren unabhängig voneinander: lazy steuert den Zeitpunkt, sandbox die Fähigkeiten des iframes. Kombinieren Sie sie für ein effizientes und sicheres Einbetten von Inhalten Dritter.
Wissenscheck
Was ist das Facade-Pattern für das Lazy Loading von Iframes?
Zusammenfassung
Beim Lazy Loading von Iframes mit loading="lazy" wird das Laden der Ressourcen aufgeschoben, bis sie sich nahe am Viewport befinden – dadurch verkürzt sich der initiale Seitenaufbau bei umfangreichen Einbettungen erheblich. Das Facade-Pattern und Click-to-Load gehen noch einen Schritt weiter und laden das Iframe erst bei einer Benutzerinteraktion. IntersectionObserver ermöglicht eine browserübergreifende Steuerung komplexer Lazy-Loading-Szenarien. Reservieren Sie die Abmessungen des Iframes, um CLS zu verhindern.
Häufig gestellte Fragen
Ist die Lektion „Lazy Loading für iframes“ kostenlos?
Ja — der vollständige Text von „Lazy Loading für iframes“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Lazy Loading für iframes“?
Verzögern Sie das Laden nicht sichtbarer iframes mit loading=lazy Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Lazy Loading für iframes“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das iframe-Element: src und sandbox
- iframe-Sicherheit: Clickjacking und X-Frame-Options
- Die Elemente embed und object
- Lazy Loading für iframes