Lazy Loading für Bilder und <iframe>-Elemente

Bilder und <iframe>-Elemente verbrauchen oft mehr Bandbreite als andere Arten von Ressourcen. Bei <iframe>-Elementen ist eine gewisse zusätzliche Verarbeitung erforderlich. laden und rendern die darin enthaltenen Seiten.

Beim Lazy Loading von Bildern wird das Laden von Bildern, außerhalb des ersten Darstellungsbereichs befinden, kann hilfreich sein, um Bandbreitenkonflikte zu reduzieren. nach wichtigeren Ressourcen im ersten Darstellungsbereich suchen. Dadurch kann ein den Largest Contentful Paint (LCP) der Seite, wenn Netzwerkverbindungen sind schlecht und die neu zugewiesene Bandbreite kann dazu beitragen, dass LCP-Kandidaten schneller laden und schneller zu malen.

Wenn es sich um <iframe>-Elemente handelt, wird die Interaktion mit der nächsten Paint-Methode (INP) kann beim Start durch Lazy Loading verbessert werden. Das liegt daran, dass ein <iframe> ist ein separates HTML-Dokument mit eigenen Unterressourcen. Obwohl <iframe>-Elemente in einem separaten Prozess ausgeführt werden können, ist dies nicht ungewöhnlich. damit sie einen Prozess mit anderen Threads teilen können, wodurch Bedingungen erstellt werden können. bei denen die Seiten weniger auf Nutzereingaben reagieren.

Daher ist das Verzögern des Ladens von nicht sichtbaren Bildern und <iframe>-Elementen eine Methode, die sich lohnenswert macht, und erfordert relativ geringen Aufwand für eine die Rendite in puncto Leistung. In diesem Modul geht es um Lazy Loading. zwei Arten von Elementen, um eine schnellere und bessere User Experience während kritischer Startphase.

Lazy Loading von Bildern mit dem Attribut loading

Das Attribut loading kann <img>-Elementen hinzugefügt werden, um Browsern mitzuteilen, sollten sie geladen werden:

• "eager" informiert den Browser, dass das Bild sofort geladen werden sollte. auch wenn er sich außerhalb des ursprünglichen Darstellungsbereichs befindet. Dies ist auch der Standardwert für Das Attribut loading
• "lazy" verzögert das Laden eines Bildes, bis es sich innerhalb des festgelegten Abstands sichtbaren Darstellungsbereich. Dieser Abstand variiert je nach Browser, ist jedoch häufig auf so groß, dass das Bild geladen wird, wenn der Nutzer zu ihm scrollt.

Wenn Sie das Element <picture> verwenden, wird das Objekt Das loading-Attribut sollte weiterhin auf das untergeordnete <img>-Element angewendet werden, nicht Das <picture>-Element selbst. Das liegt daran, dass das <picture>-Element ein Container mit zusätzlichen <source>-Elementen, die auf verschiedene Image-Kandidaten und der vom Browser ausgewählte Kandidaten wird direkt zum untergeordneten <img>-Element hinzu.

Für Bilder im anfänglichen Darstellungsbereich kein Lazy Loading verwenden

Sie sollten das Attribut loading="lazy" nur <img>-Elementen hinzufügen, die die außerhalb des ersten Darstellungsbereichs liegen. Es kann jedoch kompliziert sein, Die genaue Position eines Elements relativ innerhalb des Darstellungsbereichs, bevor die Seite geladen wird gerendert. Unterschiedliche Größen, Seitenverhältnisse und Geräte berücksichtigt.

Beispielsweise kann sich der Darstellungsbereich für Desktops stark vom Darstellungsbereich auf einem Mobiltelefon, da es mehr vertikalen Bereich rendert, der Platz für Bilder bietet im ersten Darstellungsbereich befinden, der im ersten Darstellungsbereich eines physisch kleineres Gerät. Auf Tablets im Hochformat werden ebenfalls vertikal viel Platz, vielleicht sogar mehr als auf Desktop-Computern Geräte.

Es gibt jedoch einige Fälle, in denen klar ist, dass Sie loading="lazy" wird angewendet. Zum Beispiel sollten Sie die loading="lazy"-Attribut von <img>-Elementen bei Hero-Images oder andere Anwendungsfälle in Bildern, bei denen <img>-Elemente mit hoher Wahrscheinlichkeit falten oder oben im Layout platzieren. Dies ist noch wichtiger als für Bilder, die LCP-Kandidaten sein könnten.

Für Lazy-Loading-Bilder muss gewartet werden, bis der Browser das Layout abgeschlossen hat um festzustellen, ob die endgültige Position des Bilds innerhalb des Darstellungsbereichs liegt. Das bedeutet, Wenn ein <img>-Element im sichtbaren Darstellungsbereich ein loading="lazy"-Element hat, wird es erst angefordert, nachdem das gesamte CSS heruntergeladen und geparst wurde auf die Seite angewendet werden, anstatt sie sofort abgerufen zu lassen, vorab laden Sie den Scanner im Roh-Markup.

Da das loading-Attribut für das <img>-Element in allen wichtigen Browser verwenden, ist für das Lazy Loading von Bildern kein JavaScript erforderlich. einer Seite zusätzlichen JavaScript-Code hinzufügen, um Funktionen bereitzustellen, die der Browser bereits bietet. wirkt sich auf andere Aspekte der Seitenleistung aus, z. B. INP.

Demo: Lazy Loading für Bilder

Lazy Loading von <iframe>-Elementen

Lazy Loading von <iframe>-Elementen, bis sie im Darstellungsbereich sichtbar sind und das Laden wichtiger Ressourcen, damit die Seite auf oberster Ebene geladen wird. Da <iframe>-Elemente außerdem HTML-Dokumente, die in einem Dokument auf oberster Ebene geladen sind, eine beträchtliche Anzahl von Unterressourcen enthalten, insbesondere JavaScript, die erhebliche Auswirkungen auf den INP-Wert einer Seite haben, wenn für die Aufgaben in diesen Frames erheblich länger dauern.

<iframe>-Elemente werden häufig in Drittanbieter-Einbettungen verwendet. Beispiel: In eingebetteten Videoplayern oder Beiträgen für soziale Medien werden häufig <iframe>-Elemente verwendet. und erfordern oft eine hohe Anzahl an Unterressourcen, zu Bandbreitenkonflikten für die Ressourcen der Seite auf oberster Ebene führen. Als So werden durch Lazy Loading beim Einbetten eines YouTube-Videos mehr als 500 KiB beim beim anfänglichen Seitenaufbau und beim Lazy Loading des Plug-ins für die „Gefällt mir“-Schaltfläche von Facebook spart mehr als 200 KiB, wobei es sich größtenteils um JavaScript handelt.

Wenn auf einer Seite ein <iframe> "below the fold" (mit Scrollen sichtbar) ist, sollten Sie Lazy Loading in Betracht ziehen, wenn das Laden nicht von entscheidender Bedeutung ist, kann dies die User Experience erheblich verbessern.

Das Attribut loading für <iframe>-Elemente

Das loading-Attribut für <iframe>-Elemente wird ebenfalls in allen wichtigen Browser. Die Werte für das Attribut loading und ihr Verhalten sind die Wie bei <img>-Elementen, die das Attribut loading verwenden:

• "eager" ist der Standardwert. Es weist den Browser an, die <iframe> zu laden. HTML-Code des -Elements und dessen Unterressourcen sofort abrufen.
• "lazy" verzögert das Laden des HTML-Codes des <iframe>-Elements und seiner Unterressourcen bis sie sich innerhalb eines vordefinierten Abstands vom Darstellungsbereich befindet.

Demo: Lazy Loading von iFrames

Fassaden

Anstatt eine Einbettung sofort beim Seitenaufbau zu laden, können Sie sie auf als Reaktion auf eine Nutzerinteraktion. Dazu kann ein Bild eingeblendet werden, oder ein anderes HTML-Element verwenden, bis der Nutzer mit ihm interagiert. Sobald die wenn der Nutzer mit dem Element interagiert, können Sie es durch die Einbettung eines Drittanbieters ersetzen. Diese Technik wird als Fassade bezeichnet.

Ein häufiger Anwendungsfall für Fassaden sind Videoeinbettungen von Drittanbieterdiensten, kann die Einbettung viele zusätzliche und potenziell teure Unterressourcen wie JavaScript verwenden. In solchen Fällen Bei Videoeinbettungen gibt es einen speziellen Fall, es sei denn, es besteht eine berechtigte Notwendigkeit für die automatische Wiedergabe eines Videos. Der Nutzer muss vor der Wiedergabe mit ihnen interagieren, indem er auf die Wiedergabeschaltfläche klickt. Schaltfläche.

Dies ist eine gute Gelegenheit, ein statisches Bild zu zeigen, das und sparen dabei beträchtliche Bandbreite. Sobald die Nutzenden klickt auf das Bild, wird es durch die eigentliche <iframe>-Einbettung ersetzt, die Löst den Start des HTML-Codes des <iframe>-Elements und seiner Unterressourcen aus wird heruntergeladen.

Neben der Verbesserung des anfänglichen Seitenaufbaus besteht ein weiterer Vorteil darin, dass der Seitenaufbau Wenn der Nutzer das Video nicht wiedergibt, werden die für die Bereitstellung erforderlichen Ressourcen nie heruntergeladen. Dies ist ein gutes Muster, da so sichergestellt wird, dass die Nutzenden nur das herunterladen, das sie tatsächlich tun möchten, ohne dabei möglicherweise fehlerhafte Annahmen über die die Bedürfnisse der Nutzenden zu erfüllen.

Chat-Widgets sind ein weiterer hervorragender Anwendungsfall für die Fassadentechnik. Meiste Chat-Widgets laden große Mengen an JavaScript herunter, die sich negativ den Seitenaufbau und die Reaktionsfähigkeit auf Nutzereingaben beeinflussen. Wie beim Laden von Die Kosten fallen erst bei der Ladezeit an, bei einem Chat-Widget dass alle Nutzenden nicht vorhaben, mit ihr zu interagieren.

Bei einer Fassade ist es hingegen möglich, den Drittanbieter-Link "Starten Chat“ mit einer gefälschten Schaltfläche. Wenn Nutzende eine sinnvolle Interaktion z. B. mit dem Mauszeiger eine angemessene Zeit lang darüber halten mit einem Klick – das eigentliche, funktionale Chat-Widget befindet sich an der richtigen Stelle, wenn der wie Nutzende es brauchen.

Es ist zwar möglich, Ihre eigenen Fassaden zu bauen, aber es gibt Open-Source- Verfügbare Optionen für beliebtere Drittanbieter wie lite-youtube-embed für YouTube-Videos, lite-vimeo-embed für Vimeo-Videos und React-Livechat Loader für Chat-Widgets.

Lazy Loading-Bibliotheken für JavaScript

Wenn du Lazy Loading für <video> Elemente, <video> Element-poster Bilder, Bilder, die von der CSS-Eigenschaft background-image geladen wurden, oder andere nicht unterstützte Bilder können Sie dies mit einer JavaScript-basierten Lazy-Loading-Lösung tun, lazysizes oder yall.js, da Lazy Loading für diese Arten von Ressourcen auf Browserebene.

Insbesondere die automatische Wiedergabe und die Schleife von <video>-Elementen ohne Audiotrack sind eine deutlich effizientere Alternative als animierte GIFs, sind oft mehrmals größer als eine Videoressource mit gleichwertigen visuellen Elementen. die Qualität zu verbessern. Trotzdem können diese Videos in Bezug auf die Bandbreite beträchtlich sein, Lazy Loading ist eine zusätzliche Optimierung, weniger Bandbreite verbrauchen.

Die meisten dieser Bibliotheken funktionieren mit der Intersection Observer API. Mutation Observer API, wenn sich der HTML-Code einer Seite nach dem anfängliches Laden, um zu erkennen, wann ein Element den Darstellungsbereich des Nutzers erreicht Wenn die sichtbar ist oder sich dem Darstellungsbereich nähert, dann ist die JavaScript-Bibliothek ersetzt das nicht standardmäßige Attribut (oft data-src oder ein ähnliches Attribut), mit dem richtigen Attribut, z. B. src.

Angenommen, du hast ein Video, das ein animiertes GIF ersetzt, möchtest es aber per Lazy Loading laden. mit einer JavaScript-Lösung. Dies ist mit yall.js möglich mit folgendem Code: Markup-Muster:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

Standardmäßig beobachtet yall.js alle qualifizierenden HTML-Elemente mit der Klasse "lazy" Sobald yall.js geladen und auf der Seite ausgeführt wurde, wird das Video geladen werden, bis der Nutzer in den Darstellungsbereich scrollt. An diesem Punkt wird der data-src Attribute der untergeordneten <source>-Elemente des <video>-Elements sind vertauscht an src-Attribute, wodurch eine Anfrage zum Herunterladen des Videos und wird die Wiedergabe automatisch gestartet.

Wissen testen

Nächster Schritt: Prefetching und Pre-Rendering

Sie haben jetzt einen Handle für das Lazy Loading von Bildern und <iframe>-Elementen. können Sie sicherstellen, dass die Seiten schneller geladen werden, und dabei die Anforderungen der Nutzenden respektieren. Es gibt jedoch Fälle, in denen kann spekulatives Laden von Ressourcen wünschenswert sein. Im nächsten Modul mehr über Vorabruf und Pre-Rendering erfahren und wie diese Techniken bei Auf diese Weise wird das Aufrufen nachfolgender Seiten erheblich beschleunigt, da die im Voraus an.