Lazy Load im Chrome Browser – Wie eure Website damit schneller lädt

Lazy Load im Chrome Browser - Wie ihr das neue Feature für eure Website nutzt!Lazy Load beschreibt die Technik, Inhalte mit Verzögerung nachzuladen. Statt also alle Bilder einer Website sofort zu laden, werden erst einmal nur die geladen, die für den Nutzer gerade sichtbar sind. Scrollt er weiter nach unten, werden nach und nach die anderen Grafiken geladen, sobald sie sichtbar werden. Eigentlich ganz clever, nicht wahr?

Eine Sache, die ich aber nie so richtig verstanden habe, war, warum Lazy Load auf der eigenen Website umgesetzt werden musste. Zum einen ist es durchaus aufwändig, ein funktionierendes und dennoch performantes Script zu schreiben, welches übergreifend und schlau funktioniert. Zum anderen müssen die Bilder bzw. die Art, wie sie eingefügt werden, natürlich auch entsprechend angepasst werden. Viel Aufwand also, den bei WordPress zum Glück Plugins übernommen haben.

Allgemein gab es daher in den letzten Jahren viele unterschiedliche Techniken. Mal wurde das Nachladen animiert, mal waren es Platzhalter, die dann via Script gegen die richtigen Bilder ausgetatuscht wurden. Das sorgte dafür, dass Lazy Load hier richtig gut funktionierte, dort aber Probleme im Browser verursachte.

Kurzum: Es war von Anfang an problematisch, so etwas nicht als Standard direkt in den Browser zu integrieren. Genau das ist nun endlich geschehen, denn der Google Chrome kann ab Version 76 endlich Lazy Load. Halleluja!

Für Werbe-Links auf dieser Seite zahlt der Händler ggf. eine Provision. Diese Werbe-Links sind am Sternchen (*) zu erkennen. Für dich ändert sich nichts am Preis. Mehr Infos.

Lazy Load in Google Chrome

Anrufannahme und Telefonservice
Werbung

Mit Version 76 ist Lazy Load also endlich im Chrome Browser angekommen und ist somit direkt integriert. Doch wie genau funktioniert Lazy Load im Chrome und wie könnt ihr die Technik für eure Website nutzen? Eigentlich ist das ganz einfach.

Für WordPress wird es früher oder später ein entsprechendes Plugin geben, da bin ich mir sicher. Alternativ werden Bilder einfach per Hand angepasst. Das ist nicht schwer, es erfordert im Grunde nur ein weiteres Attribut innerhalb des Image-Tags. Drei mögliche Werte sind es, die Google dafür zu Verfügung stellt.

  • lazy – Lädt Bilder erst bei Bedarf
  • eager – Lädt Bilder direkt beim Seitenaufruf
  • auto* – Der Browser entscheidet über Lazy Load

Das Lazy Load gilt dabei nicht nur für Bilder, auch iFrames (also Videos) können so verzögert geladen werden. Bei Videos, die sich innerhalb einer Website befinden, scheint das auch fast noch wichtiger zu sein. So sieht der Code dann aus.

#Lazy Load für Bilder
<img alt="" loading="lazy" src="bild.jpg">

#Lazy Load für iFrames
<iframe loading="lazy" src="video.mp4"></iframe>

Wann und wie nutzen?

Im Grunde würde ich euch immer empfehlen, für das Loading-Attribut den Wert »Lazy« zu wählen. So ist sichergestellt, dass auf eurem Server möglichst wenig Last erzeugt wird und bei Besuchern nicht unnötig viele Grafiken heruntergeladen werden müssen, die sie vielleicht niemals sehen werden. Das verbessert die Ladezeit enorm.

»Eager« ist ebenfalls praktisch und kann für besonders wichtige Bilder zum Einsatz kommen. Logos wären hier ein passendes Beispiel, die natürlich immer direkt und nicht verzögert geladen werden sollten. Mit »Eager« wäre das sichergestellt. Gleiches gilt auch für wichtige Tracking-Pixel, wie sie beispielsweise die VG Wort verwendet. Würden diese nicht korrekt geladen, wäre das ein großes Problem. Mit »Eager« wird daher sichergestellt, dass der Browser hier nicht selbständig wählt, sondern die Grafiken immer direkt lädt.

Über kurz oder lang wird »Auto« dann der Standardwert sein. Hier entscheidet Chrome selbst, vermutlich anhand der Verbindung. So könnte Mobil, wo Datenvolumen und Geschwindigkeit häufig noch ein Problem sind, grundsätzlich Lazy Load zum Einsatz kommen, wohingegen am Desktop alles direkt geladen wird.

WERBUNG
Viele Websites sind abmahngefährdet! Deine auch? Mit den 10 Premium-Generatoren von eRecht24 kannst du Datenschutzerklärung, Impressum, Cookie-Einwilligung und Co. zentral an einem Ort automatisch per Knopfdruck erstellen und aktualisieren. www.e-recht24.de
Günstiges und schnelles Hosting für Blogs und Websites Beim deutschen Hoster Alfahosting gibt es nicht nur sehr günstige Hosting-Tarife, diese bieten auch viel Leistung und Features. Damit bin ich sehr zufrieden und das Hosting eignet sich optimal für eigene Websites und Blogs. Gerade Einsteiger profitieren zudem vom guten Support. www.alfahosting.de
DSGVO Schritt-für-Schritt Generator - Word- & Excel-Vorlage Ein große Hilfe bei der Erstellung des eigenen Verarbeitungsverzeichnisses, der Risikoanalyse, der technischen und organisatorischen Maßnahmen und des eigenen Datenschutzkonzepts bietet dieser DSGVO Schritt-für-Schritt Generator. Hier sind über 120 vorausgefüllte Vorlagen (Word und Excel) enthalten, so dass man in kürzester Zeit die eigenen DS-GVO Unterlagen erstellt hat. dsgvo-vorlagen.de

Demo und Browser-Support

Wer sich eine kleine Demo anschauen möchte, kann dies unter folgendem Link tun. Wie immer im Internet, werden natürlich niedliche Katzenbilder geladen. Wirklich überraschend ist die Demo dann jedoch nicht, Lazy Load ist per se ja nichts Neues mehr, die Funktion ist demnach soweit bekannt.

Funktionsfähig ist die Demo aktuell außerdem nur im Chrome Browser, denn dieser ist der einzige, der das Loading-Attribut unterstützt. Das ist schade, aber es ist damit zu rechnen, dass auch die anderen Browserhersteller entsprechendes umsetzen und integrieren werden. Davon gehe ich jedenfalls aus.

Wobei ich auch vor Jahren schon gesagt habe, dass es Zeit wird, dass Browser solche Sachen selbständig implementieren. Trotzdem hat es bekanntlich lange gedauert und ist nun auch einzig und allein im Chrome verfügbar. Also mal schauen, wann Lazy Load wirklich überall vertreten ist.

Sollte Lazy Load im Browser schon aktiviert werden?

Tja und jetzt stellt sich die nächste Frage, nämlich ob ich mit meiner Website überhaupt dafür sorgen sollte, Lazy Load im Browser zu unterstützen. Wenn nur der Chrome Browser von Google aktuell dazu fähig ist, scheint der Support immerhin doch ziemlich begrenzt auszufallen.

Auf der anderen Seite ist der Chrome Browser bekanntlich weit verbreitet, ihr erreicht also auch dort schon eine Menge Besucher, die sich über das Lazy Load freuen werden. Eigene Scripte ersetzt es derzeit aber noch nicht, da muss man tatsächlich darauf hoffen, dass bald alle Browser das Loading-Attribut unterstützen.

Wer bislang noch kein Lazy Load eingesetzt hat, kann jetzt damit anfangen, dass neue Attribut bereits zu implementieren. Wer derzeit ein eigenes Script einsetzt, sollte lieber noch ein Weilchen dabei bleiben, bis der Support über alle großen Browser abgedeckt ist.

Ich selbst werde nach und nach eigene Scripte ersetzen und gegen das Native Lazy Loading im Chrome tauschen. Weil ich denke, dass es dafür Zeit ist und weil ich es leid bin, derartige Standards für jede Website einzeln einzurichten. Lazy Load gehört in den Browser. Das habe ich früher gesagt, sage es heute und endlich scheint es auch soweit zu sein. Da bin ich dabei. Ihr auch?

Nutzt ihr bisher Lazy Load auf eurer Website?

Ergebnis anschauen

ALL-INKL.COM - Webhosting Server Hosting Domain Provider
Werbung

10 Gedanken zu „Lazy Load im Chrome Browser – Wie eure Website damit schneller lädt“

  1. Super, ich bin ein großer Fan von Lazy Load. Mega praktisch wäre es natürlich auch, wenn man Lazy Load nicht per HTML , sondern per CSS Befehl auf CSS Klassen anwenden könnte, dann wäre die Implementierung noch leichter.

    Antworten
  2. Ich habe gerade heute meine Ladezeiten analysiert und musste mich dann um meine Bilder kümmern. Nach einer kurzen Recherche wurden mir verschiedene Plugins angezeigt. Am Ende hat bei mir a3 Lazy Load geholfen, zusammen mit autoptimize.

    Habe dazu einen guten Artikel auf knista oder kinsta gefunden.

    Antworten
  3. Hallo allerseits,

    verstehe ich es richtig, dass diese Funktion lediglich greift, wenn man den Tag (loading) zu den Grafiken integriert? Oder werden alle Grafiken verzögert geladen, es sei denn, man integriert je “loading=”eager”? Wäre letzteres der Fall, sollte man ja unbedingt Zählpixel damit versehen, wenn diese am Ende des Quelltextes platziert sind.

    Grüße

    Thomas

    Antworten
  4. Hallo Peer,

    das mit der VG Wort Marke beschäftigt mich schon seit einigen Wochen, seit die Ankündigung mit dem Standard LazyLoad von Chrome kam. Ich nutze seit neustem das Plugin Prosodia VGW OS. Laut Chrome Entwicklertools und laut pingdom und gmetrix wird der Pixel so immer geladen. Wahrscheinlich weil er über JS eingebunden wurde. Ich habe nicht herausgefunden wie ich bei dem Plugin sicherheitshalber noch den eager Befehl zur Marke einbauen könnte. Ich bin alle Plugin Dateien durch…

    Grüße
    Marco

    Antworten
      • Welches Plugin hast Du, oder bindest Du noch von Hand ein? Ich habe das auch alles bis vor kurzem manuell gemacht bis mich lazyload dazu gezwungen hat praktisch umzusteigen. WordPress hatte bei mir immer beim Abspeichern den Code einfach geändert.

        Antworten
    • In den Prosodia VGW-Einstellungen kannst Du bei der Zählmarken-Ausgabe den HTML-Code anpassen.

      Für WordPress ist nun auch schon ein passendes Plugin für WordPress von den Google-Entwicklern bereitgestellt worden: https://wordpress.org/plugins/native-lazyload/
      Nach Aktivierung werden alle Bilder und iframes lazy geladen. Alles was normale geladen werden soll, muss durch eine separate Klasse gekennzeichnet werden.

      Antworten

Schreibe einen Kommentar