Was ist mit "Lazy load" gemeint?

Lazy load ist ein Konzept, das darauf abzielt, die Ladezeit einer Webseite oder Anwendung zu verbessern, indem bestimmte Inhalte erst dann geladen werden, wenn der Benutzer sie tatsächlich benötigt. Beispielsweise kann eine Webseite, die viele Bilder enthält, so konfiguriert werden, dass die Bilder erst dann geladen werden, wenn der Benutzer nach unten scrollt und sie in den sichtbaren Bereich kommen. Auf diese Weise wird vermieden, dass der Benutzer warten muss, bis alle Bilder geladen sind, bevor er die Seite verwenden kann. Lazy load kann die Ladezeit einer Webseite erheblich verbessern und trägt somit zu einer besseren Benutzererfahrung bei.

Lazy load und Cumulative Layout Shift (CLS)

Lazy load an sich ist kein Problem für das Cumulative Layout Shift (CLS), aber es kann dazu beitragen, dass das CLS erhöht wird. Das sollte man versuchen zu vermeiden.
CLS ist ein Maß für die Stabilität der Layout einer Webseite und wird gemessen, indem die Größe und der Standort von visuellen Elementen über die Zeit beobachtet werden. Wenn Elemente, die mittels Lazy load geladen werden, die Größe und den Standort anderer Elemente verändern, kann dies dazu führen, dass das CLS erhöht wird. Um dies zu vermeiden, sollte bei der Implementierung von Lazy load sichergestellt werden, dass die Größe und die Position der geladenen Elemente vorab festgelegt werden. Dies verhindert, dass Webseiten-Elemente zum Zeitpunkt des Renderns verschoben werden.

Diese "lazy loading" JavaScript-Tools erleichtern die Programmierung

• Lazy Load (https://github.com/verlok/lazyload)
• Echo.js (https://github.com/toddmotto/echo)
• Lozad.js (https://github.com/ApoorvSaxena/lozad.js)
• yall.js (https://github.com/malchata/yall.js)

Diese Tools funktionieren alle auf ähnliche Weise. Sie beobachten das DOM (Document Object Model) und laden Bilder und andere Ressourcen erst dann, wenn sie sichtbar werden. Dies kann die Ladezeit der Webseite verbessern und dazu beitragen, dass sie schneller und reaktionsschneller wird. Es empfiehlt sich, eines dieser Tools auszuprobieren und zu sehen, ob es für Deine Bedürfnisse geeignet ist.