Um die Darstellung einer Webseite im Browser zu beschleunigen, war es bis jetzt immer ratsam, mit einem Lazyload-Plugin Grafiken erst dann zu laden, wenn sie für den Nutzer sichtbar wurden. Sorgt dies doch für eine schnellere Webseite sowie weniger übertragene Daten, was vor allem bei der mobilen Darstellung eine große Rolle spielt.
Seit Chrome 76 bietet der Browser von Haus aus schon die Möglichkeit, Grafiken per lazy-load erst später zu laden. Leider nicht generell, sondern die jeweilige Grafik muss mit dem Attribut ‚loading=“lazy“‚ ausgezeichnet werden.
Genau diese Auszeichnung übernimmt die kommende WordPress-Version 5.4 automatisch, es sind dann also keine der Lazy-Load-Plugins mehr notwendig, die vor allem auf Javascript basieren. Bekannte WordPress-Plugins wie a3 Lazy Load (welche ich auch öfters verwende) sind damit größtenteils überflüssig.
Praktisch gesehen wird das Plugin https://de.wordpress.org/plugins/native-lazyload/ in WordPress 5.4 in den Core wandern. Laut der Doku dort muss man einfach die CSS-Klasse “skip-lazy” einfügen und dann wird das entsprechende Bild sofort geladen. Dies wird für Trackingpixel oder ähnliches relevant, sofern solche Tracking-Maßnahmen überhaupt noch mit der DSGVO in Zukunft problemlos möglich sind.
Lazy-Load in der Praxis sinnvoll?
Meine anfängliche Begeisterung wurde deutlich gedämpft, nachdem ich diesen Blogartikel von Aaron Peters gelesen habe. Grund dafür ist seine Feststellung, das Chrome Bilder mit lazy-load erst ab einer Pixelentfernung von 3000 Pixel vom aktuellen Viewport aus nicht automatisch lädt. Dachte ich anfangs, Chrome lädt alles unterhalb des viel zitierten ‚below-the-fold‘ nicht, so sind es in Wahrheit viele ‚folds‘, eben 3000 Pixel. Wie er als Beispiel angibt, sein 13″-Macbook hat eine Viewport-Höhe von 786 Pixel, also lädt Chrome trotz lazyload alle Grafiken, die seine Browserhöhe das vierfache übersteigen. Für Webseiten mit viel Traffic empfiehlt er darum um die Server-Last zu minimieren weiterhin eine Javascript-basierte lazyload-Lösung, und ich bin da unter diesen Umständen ganz seiner Meinung.
Update Juli 2020
Scheinbar hat Google es genauso gesehen wie ich, lazy-load in Chrome war in der Form nicht sehr sinnvoll. Die Grenze für lazyload liegt nun nicht mehr bei 3000 Pixel, sondern ist abhängig von der Verbindungsart
- 1250px bei 4G
- 2500px bei 3G
Da 3G in Deutschland glücklicherweise mittlerweile nicht mehr groß berücksichtigt werden muss, gilt nun eine praktische Grenze von 1250 Pixel und damit erfüllt lazy-load auch den damit vorgesehenen Zweck viel besser.
Lazy Load mit DIVI Theme
Mit Version 4.6.4 vom 25.09.2020 unterstützt nun auch DIVI die Lazy Load-Funktion von WordPress.
Auch iframes mit lazyload
Mit WordPress 5.7 werden auch iframes per lazyload erst später geladen. WordPress ist dabei so intelligent, nur solche iframes später zu laden, bei denen die Höhe und Breite angegeben ist. Ein späterer Layout-Shift, welches zu einer Abstrafung bei Google führt, findet somit nicht statt.
