Jeder Besucher schätzt eine schnell ladende Webseite. Beim sogenannten Lazy Loading werden daher Bilder erst bei Bedarf nachgeladen. Bisher war dies nur mit JavaScript möglich. Lazy Loading ist ein häufig eingesetztes effizientes Mittel um die Datenmenge zu reduzieren, die beim Laden einer Website übertragen werden muss. Dabei werden Bilder nicht sofort geladen, sondern erst dann, wenn sie durch Scrollen in den sichtbaren Bereich – den sogenannten Viewport – gelangen. Das Ergebnis ist eine kürzere #ladezeit.

Erreicht wurde das bisher mit JavaScript. Das ändert sich jetzt mit der nativen Lazy Load Unterstützung seitens der Browser.

Beginnend mit der Version 76 von Chrome hat Google in seinem Browser vor etwa einem halben Jahr die Möglichkeit zum Lazy Loading von Bildern und IFrames eingebaut. So kann die #performance direkt mit HTML verbessert werden, ohne JavaScript verwenden zu müssen.

Dazu wurde das Attribut loading dem <img> und dem <iframe> Tag hinzugefügt. Mit <img loading=“lazy“ src=“…“> beispielsweise wird der Browser angewiesen, ein Bild erst dann zu laden, wenn es sich im sichtbaren Bereich befindet.

Da Chromium auch von anderen Browser-Herstellern genutzt wird, existiert diese Möglichkeit mittlerweile auch in weiteren Browsern. An einer Implementierung in Firefox wird derzeit ebenfalls gearbeitet…

Lesen Sie weiter auf: Lazy Loading ohne JavaScript
Quelle: WPwissen
Titelbild/Grafik by WPwissen by Peter Raschendorfer

Kommentare und Fragen
Möchten Sie zu diesem Artikel ein Kommentar abgeben oder haben dazu eine Frage, dann machen Sie dies bitte immer auf der Herausgeberseite!
Aktuelles von WPwissen by Peter Raschendorfer

Die folgenden Hinweise erscheinen unabhängig vom Artikel!

Glauben Sie, dass Ihre Freunde diese Information noch nicht kennen? Teilen Sie diese mit ihnen.