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 Attributloading
"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
Dies ist der Standardwert für das Attribut loading
für
<img>
- und <iframe>
-Element?
"eager"
"lazy"
In welchen Fällen sind JavaScript-basierte Lazy-Load-Lösungen sinnvoll?
loading
nicht
z. B. bei automatisch wiedergegebenen Videos,
animierte Bilder oder Lazy Loading<video>
Posterbild.
Wann ist eine Fassade eine nützliche Technik?
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.