Beim Lazy Loading wird auf Ressourcen gewartet, bis sie benötigt werden, anstatt sie im Voraus zu laden. Dies kann die Leistung verbessern, indem die Menge der Ressourcen reduziert wird, die beim ersten Seitenaufbau geladen und geparst werden müssen.
Bilder, die beim ersten Seitenaufbau nicht sichtbar sind, sind ideale Kandidaten für diese Technik. Das Beste daran ist, dass Lazysizes diese Strategie zu einer sehr einfachen Implementierung machen.
Das Skript „Lazysizes“ zur Seite hinzufügen
- Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
lazysizes.min.js
wurde bereits heruntergeladen und zu dieser Glitch hinzugefügt. So fügen Sie es in die Seite ein:
- Fügen Sie
index.html
das folgende<script>
-Tag hinzu:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
Lazysizes lädt Bilder intelligent, wenn der Nutzer durch die Seite scrollt, und priorisiert die Bilder, die ihm bald angezeigt werden.
Bilder für Lazy Loading angeben
- Fügen Sie Bildern, die per Lazy Loading geladen werden sollen, die Klasse
lazyload
hinzu. Ändern Sie außerdem das Attributsrc
indata-src
.
Die Änderungen für flower3.png
würden dann zum Beispiel so aussehen:
<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">
Versuchen Sie für dieses Beispiel Lazy Loading für flower3.png
, flower4.jpg
und flower5.jpg
.
Beispiele ansehen
Fertig! So können Sie diese Änderungen in Aktion sehen:
Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild .
Öffnen Sie die Konsole und suchen Sie die soeben hinzugefügten Images. Ihre Klassen sollten sich von
lazyload
zulazyloaded
ändern, wenn Sie auf der Seite nach unten scrollen.
- Im Netzwerkbereich sehen Sie, wie die Bilddateien einzeln geladen werden, wenn Sie auf der Seite nach unten scrollen.
Mit Lighthouse bestätigen
Außerdem empfiehlt es sich, diese Änderungen mit Lighthouse zu überprüfen. Die Leistungsprüfung „Nicht sichtbare Bilder verzögern“ von Lighthouse gibt Aufschluss darüber, ob Sie vergessen haben, Lazy Loading für nicht sichtbare Bilder hinzuzufügen.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild .
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Wahltaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Lighthouse.
- Achten Sie darauf, dass in der Liste Kategorien das Kästchen Leistung angeklickt ist.
- Klicken Sie auf die Schaltfläche Bericht erstellen.
- Prüfen Sie, ob die Prüfung Nicht sichtbare Images verzögern bestanden wurde.
Fertig! Sie haben Lazy Loading für das Lazy Loading von Bildern auf Ihrer Seite verwendet.