Images
Inhalte nur zu laden wenn sie wirklich benötigt werden, sorgt nicht nur dafür dass die Seite schneller das Dom-Ready erreicht sondern erspart unter Umständen jede Menge Datentransfer, was nicht nur Google erfreut, sondern auch den Betrachter der Website.
Diese Implementierung bringt eine Filterung aller Bilder auf der Seite mit sich, die im data-src-Attribut einen Inhalt entalten, dieser Wert braucht nur in das src-Attribut verschoben werden sobald das Bild im sichtbaren Bereich auftaucht und auch wirklich sichtbar sein soll.
Einzige Voraussetzung <img data-src="..." loading="lazy" />
Diese Implementierung unterstützt die native Variante loading="lazy" als img Attribute bei einem aktuellen Browser (ab Opera 64, Firefox 75, Chrome 76, Edge 79, Andoid Browser 80, Chrome for Android 80), aber auch den IntersectionObserver bei den etwas äteren (ab Opera 45, Firefox 55, Chrome 58, Edge 16, Safari 12.2, Andoid Browser 80, Chrome for Android 80, ...), sowie eine Variante über EventLisener für die ganz alten Browser wie z.B. den Internet Explorer, dadurch entsteht auch die breiteste Abdeckung für Lazy Loading. Zusätzlich wurde das Laden der Bilder vor dem Ausdrucken mit eingebaut, welches bisher von keinem Browser als Standard zur Verfügung gestellt wird.