Der Teil der Bilder und video in der Nutzlast einer Website von Bedeutung sein. Leider sind Projekt-Stakeholder möglicherweise nicht bereit, Medienressourcen aus ihren bestehenden Anwendungen. Solche Stoßstellen sind frustrierend, wenn alle Beteiligten die Websiteleistung verbessern möchten, sind sich aber nicht einig, wie es dorthin kommen soll. Glücklicherweise ist Lazy Loading eine Lösung, die die Nutzlast der ersten Seite verringert und Ladezeit, aber spart nicht am Content.
Was ist Lazy Loading?
Lazy Loading ist ein Verfahren, das das Laden nicht kritischer Ressourcen auf einer Seite verzögert. Ladezeit. Stattdessen werden diese nicht kritischen Ressourcen die Sie brauchen. Bei Bildern „nicht kritisch“ ist oft gleichbedeutend mit „off-screen“. Wenn Sie Lighthouse verwendet und sich einige Möglichkeiten angesehen haben, Verbesserung finden Sie in diesem Bereich vielleicht Hinweise in Form von Prüfung von nicht sichtbaren Images verschieben:
<ph type="x-smartling-placeholder">
Wahrscheinlich haben Sie Lazy Loading bereits gesehen. dies:
- Sie gelangen auf eine Seite und fangen an zu scrollen, während Sie Inhalte lesen.
- Irgendwann scrollen Sie durch ein Platzhalterbild in den Darstellungsbereich.
- Das Platzhalterbild wird plötzlich durch das endgültige Bild ersetzt.
Ein Beispiel für Lazy Loading für Bilder finden Sie auf der beliebten Publishing-Plattform. Mittel: Hier werden die schlanken Platzhalterbilder beim Seitenaufbau an und ersetzt sie durch langsam geladene Bilder, Darstellungsbereich.
<ph type="x-smartling-placeholder">
Wenn Sie mit Lazy Loading nicht vertraut sind, fragen Sie sich vielleicht, wie nützlich die Technik ist und welche Vorteile sie hat. Lies weiter und finde es heraus!
Warum sollten Sie für Bilder oder Videos Lazy Loading verwenden, anstatt sie nur zu laden?
Es besteht nämlich die Möglichkeit, dass Sie Inhalte laden, die der Nutzer möglicherweise nie sieht. Dies ist ist aus verschiedenen Gründen problematisch:
- Es verschwendet Daten. Bei nicht getakteten Verbindungen ist das nicht das Schlimmste, (Sie könnten diese wertvolle Bandbreite für Ihre Downloads andere Ressourcen, die der Nutzer tatsächlich sieht). Bei begrenzten Daten Allerdings kann das Laden von Inhalten, die Nutzende nie sehen, effektiv verschwendet werden. von ihrem Geld.
- Dadurch werden Verarbeitungszeit, Akku und andere Systemressourcen verschwendet. Nach einer Medienwiedergabe heruntergeladen wird, muss der Browser sie decodieren und den Inhalt in der Datei Darstellungsbereich.
Lazy Loading von Bildern und Videos verkürzt die anfängliche Seitenladezeit die Seitengewichtung und die Nutzung der Systemressourcen, die Leistung.
Lazy Loading implementieren
Es gibt mehrere Möglichkeiten, Lazy Loading zu implementieren. Bei der Wahl der Lösung müssen die von Ihnen unterstützten Browser berücksichtigt werden. und was Sie per Lazy Loading laden möchten.
Moderne Browser implementieren Lazy Loading auf Browserebene.
Dieser kann mit dem Attribut loading bei Bildern und iFrames aktiviert werden.
Um für Kompatibilität mit älteren Browsern zu sorgen
oder Lazy Loading für Elemente ohne integriertes Lazy Loading durchzuführen.
können Sie eine Lösung
mit Ihrem eigenen JavaScript implementieren.
Es gibt auch eine Reihe von vorhandenen Bibliotheken, die Ihnen dabei helfen.
Ausführliche Informationen zu diesen Ansätzen findest du in den Posts auf dieser Website:
Wir haben auch eine Liste mit möglichen Problemen beim Lazy Loading zusammengestellt. und was Sie bei der Implementierung beachten sollten.
Fazit
Mit Sorgfalt kann Lazy Loading für Bilder und Videos die anfängliche Ladezeit und Seitennutzlast auf Ihrer Website, einschließlich Core Web Vitals. Für Nutzer werden keine unnötigen Aktivitäten – einschließlich Netzwerkkonflikten bei langsameren Verbindungen – und Verarbeitungskosten von Medienressourcen, die sie möglicherweise nie sehen, können diese Ressourcen bei Bedarf weiterhin aufrufen.
Im Hinblick auf Verfahren zur Leistungsverbesserung ist Lazy Loading vernünftigerweise und unkontrovers sind. Wenn ihr auf eurer Website viele Inline-Bilder habt, ist eine hervorragende Möglichkeit, unnötige Downloads zu reduzieren. Die Nutzenden und die Projekt-Stakeholder es zu schätzen wissen!