Der Anteil von Bildern und Videos in der typischen Nutzlast einer Website kann beträchtlich sein. Leider sind Projektbeteiligte nicht bereit, Medienressourcen aus ihren bestehenden Anwendungen zu kürzen. Solche Einbrüche sind frustrierend, insbesondere wenn alle Beteiligten die Websiteleistung verbessern möchten, sich aber nicht darauf einigen können, wie das erreicht werden soll. Glücklicherweise ist Lazy Loading eine Lösung, die die anfängliche Seitennutzlast und die Ladezeit verkürzt, aber nicht die Inhalte spart.
Was ist Lazy Loading?
Lazy Loading ist eine Technik, die das Laden nicht kritischer Ressourcen beim Seitenaufbau verzögert. Stattdessen werden diese nicht kritischen Ressourcen bei Bedarf geladen. „nicht kritisch“ ist oft gleichbedeutend mit „außerhalb des Bildschirms“. Wenn Sie Lighthouse verwendet und Verbesserungsmöglichkeiten untersucht haben, haben Sie in diesem Bereich möglicherweise eine Orientierungshilfe in Form der Prüfung von nicht sichtbaren Bildern zurückstellen gesehen:
Wahrscheinlich haben Sie Lazy Loading schon in Aktion gesehen. Der Ablauf sieht ungefähr so aus:
- Sie gelangen auf eine Seite und beginnen zu scrollen, während Sie Inhalte lesen.
- Irgendwann scrollen Sie durch ein Platzhalterbild in den Darstellungsbereich.
- Das Platzhalterbild wird plötzlich durch das fertige Bild ersetzt.
Ein Beispiel für Lazy Loading finden Sie auf der beliebten Publishing-Plattform Medium. Dort werden einfache Platzhalterbilder beim Seitenaufbau geladen und durch verzögert geladene Bilder ersetzt, wenn sie in den Darstellungsbereich gescrollt werden.
Wenn Sie mit Lazy Loading nicht vertraut sind, fragen Sie sich vielleicht, wie nützlich diese Technik ist und welche Vorteile sie bietet. Lies weiter und finde es heraus!
Warum sollten Sie Bilder oder Videos nicht einfach laden, anstatt sie einfach zu laden?
Weil es möglich sein kann, dass du Dinge laden, die der Nutzer nie sieht. Dies ist aus mehreren Gründen problematisch:
- Sie verschwendet Daten. Bei kostenlosen Verbindungen ist dies nicht das Schlimmste, was passieren könnte (obwohl Sie diese wertvolle Bandbreite zum Herunterladen anderer Ressourcen verwenden könnten, die tatsächlich vom Nutzer gesehen werden). Bei begrenzten Datenplänen könnte es jedoch Geldverschwendung sein, Inhalte zu laden, die der Nutzer nie sieht.
- Dadurch werden Verarbeitungszeit, Akku und andere Systemressourcen verschwendet. Nachdem eine Medienressource heruntergeladen wurde, muss sie vom Browser decodiert und der Inhalt im Darstellungsbereich gerendert werden.
Lazy Loading von Bildern und Videos reduziert die anfängliche Seitenladezeit, die anfängliche Seitengröße und die Nutzung von Systemressourcen. All dies wirkt sich positiv auf die Leistung aus.
Lazy Loading implementieren
Es gibt verschiedene Möglichkeiten, Lazy Loading zu implementieren. Bei Ihrer Lösung müssen die von Ihnen unterstützten Browser und das Lazy Loading berücksichtigt werden.
In modernen Browsern wird Lazy Loading auf Browserebene implementiert, das über das Attribut loading für Bilder und iFrames aktiviert werden kann.
Sie können eine Lösung mit Ihrem eigenen JavaScript implementieren, um die Kompatibilität mit älteren Browsern zu verbessern oder Lazy Loading für Elemente ohne integriertes Lazy Loading durchzuführen.
Es gibt auch eine Reihe von vorhandenen Bibliotheken, die Ihnen dabei helfen.
In den Beiträgen auf dieser Website finden Sie ausführliche Informationen zu all diesen Ansätzen:
Außerdem haben wir eine Liste mit potenziellen Problemen beim Lazy Loading zusammengestellt und Hinweise auf Dinge, auf die Sie bei der Implementierung achten sollten.
Fazit
Wenn Sie Vorsicht walten lassen, können Lazy Loading von Bildern und Videos die anfängliche Ladezeit und die Seitennutzlasten Ihrer Website erheblich reduzieren, einschließlich der Core Web Vitals. Nutzer verursachen keine unnötigen Netzwerkaktivitäten – einschließlich Netzwerkkonflikten bei langsameren Verbindungen – und Verarbeitungskosten für Medienressourcen, die sie möglicherweise nie sehen. Sie können diese Ressourcen aber bei Bedarf aufrufen.
Was die Techniken zur Leistungsverbesserung anbelangt, ist Lazy Loading relativ unkontrovers. Wenn Sie viele Inline-Bilder auf Ihrer Website haben, ist das eine perfekte Möglichkeit, unnötige Downloads zu reduzieren. Die Nutzenden und die Stakeholder Ihrer Website werden dies zu schätzen wissen!