Test: loading=“lazy“ – aber nur für mobile

Test: loading=“lazy“ – aber nur für mobile

In einigen Tagen erwarten wir das Release von Chrome 76. Dann wird auch die unter Chrome 75 noch optional zuschaltbare Funktion zum Lazyloading von Bildern standardmäßig aktiviert.

Wir haben bereits unter 75 einen Blick auf die Funktion und dem Zusammenspiel mit dem Attribut loading=“lazy“ geworfen. Sofern ihr die Funktion auch bei euch aktivieren wollt – hier findet ihr diese:

Und damit auch euer Test rund wird, hier eine Testseite, bei welcher wir das loading=“lazy“-Attribut bereits implementiert haben: https://performance.seo-atelier.com/test/test/

206-Response auch ohne Attribut

Zuerst fällt auf, dass wir, sofern die Funktion im Chrome aktiviert ist, bereits ein anderes Bild im Network-Panel der Chrome Dev-Tools sehen.

Ohne aktivierte Funktion

Mit aktivierter Funktion

Wir sehen plötzlich partielle Downloads mit Statuscode 206 – Chrome teilt den Download auf. Anscheinend wird nur das obere Bild geteilt – evtl. weil es näher am Viewport liegt.

Dabei ist sehr interessant, dass das Attribut loading=“lazy“ hier noch absolut keine Auswirkungen hat. Genau so sehen die Requests/Responses auch aus, sofern das Attribut nicht verwendet wird, die Option aber im Chrome aktiviert ist.

Was bewirkt denn dann das Attribut eigentlich?

… hatte ich mich gefragt. Kein Unterschied beim Scrollen, es wird absolut nichts nachgeladen und außer der generellen Zerstückelung mittels 206ern war kein weiterer Unterschied zu erkennen.

Bis ich auf die Idee kam, mir das ganze mal aus in der mobile-View anzusehen. Und siehe da:

Vom 266 KB großen Bild wurden nur 2,1 KB geladen
Mit dem Scrollen – also wenn der Viewport in die Nähe des Bildes kommt – wird die Datei dann schließlich heruntergeladen

Insofern: Cooles Feature und unglaublich leicht umzusetzen. Nur eigentlich etwas schade, dass die Funktion nicht auch für den Desktop verfügbar ist.

Bleibt abzuwarten, ob sich dies mit Chrome 76 noch ändert und wann andere Browser nachziehen werden.

Über den Autor

Max

Schreibe eine Antwort