Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Natives Lazy-Loading - loading="lazy"

Wenn wir einen schnelleren Aufbau einer Website wollen, dann kann man sich überlegen, ob man bei der Bildkomprimierung noch etwas herausholen kann oder viel einfacher: Die Bilder im Anfangs nicht sichtbaren Bereich einfach bei Gelegenheit vom Browser nachladen lässt. Sprich alle Bilder, die erst durch scrollen sichtbar werden, verstopfen auch nicht das erste Laden und schnelle Anzeigen der Website.

Hier hat Google mit Chrome ab der Version 76 eine Integration, die Richtungsweisend für andere Browserhersteller sein sollte. Auf jeden Fall hat man alle aktuellen Google Chrome User und Android-Browser damit abgedeckt. Besonders bei Handy-Nutzern spielt der Geschwindigkeitszuwachs und das Sparen von Datenvolumen eine große Rolle!

Wie weitverbreitet die Integration ist, sieht man unter https://caniuse.com/#feat=loading-lazy-attr

Zur Integration wird dem HTML-Befehl <img einfach mit dem Attribut loading="lazy" erweitert. Die Browser, die dieses Attribut noch nicht kennen, ignorieren es einfach. Also viel gewonnen und nichts verloren!

Unser HTML-TAG sieht dann komplett so aus:

<img src="bildname.jpg" loading="lazy" alt="Bildbeschreibung">

Zusätzlich kann dasselbe Vorgehen bei iframes verwendet werden.

<iframe loading="lazy" src="https://www.youtube.com/embed/bP0ev1A6zFc"></iframe>

Auch die HTML-Befehle <srcset> und <picture> unterstützen das lazy-load-Attribut.

Kontrolle des Ladens

Bei den Entwicklertools von Google Chrome kann unter dem Reiter „Netzwerk“ das Laden der einzelnen Elemente live verfolgt werden. Sind die Bilder noch ohne das Attribut loading="lazy" eingebunden, werden diese so schnell wie möglich geladen.

Sobald das Attribut loading="lazy" außerhalb des sichtbaren Startbereichs eingebunden ist und wir scrollen im Browser zu dem entsprechenden Bild, wird dieses nachgeladen. Die Netzwerkaktivität ist dann direkt live verfolgbar. So erhalten wir eine für den Nutzer gefühlt schnellere Seite, die intelligent nachlädt.

Auch wenn nicht alle Browser dieses Feature unterstützen, ein sehr großer Anteil der Internetsurfer nutzt Chrome. Je nach Besuchergruppe 30 – 50 Prozent.

Empfehlung: einsetzen!

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe