Lazy Loading für nicht sichtbare Bilder mit Lazysizes

Katie Hempenius

Beim Lazy Loading werden Ressourcen erst dann geladen, wenn sie benötigt werden, anstatt sie im Voraus zu laden. Dies kann die Leistung verbessern, da weniger Ressourcen beim ersten Seitenaufbau geladen und geparst werden müssen.

Bilder, die beim ersten Seitenaufbau nicht auf dem Bildschirm zu sehen sind, sind ideale Kandidaten für diese Technik. Das Beste daran ist, dass sich diese Strategie mit Lazysizes sehr einfach umsetzen lässt.

Das Lazysizes-Skript der Seite hinzufügen

• Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.

lazysizes.min.js wurde bereits heruntergeladen und zu diesem Glitch hinzugefügt. So fügen Sie sie in die Seite ein:

• Fügen Sie index.html das folgende <script>-Tag hinzu:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

Mit Lazysizes werden Bilder intelligent geladen, wenn der Nutzer durch die Seite scrollt, und priorisiert die Bilder, die dem Nutzer bald angezeigt werden.

Bilder für Lazy Loading angeben

• Fügen Sie Bildern, für die Lazy Loading verwendet werden soll, die Klasse lazyload hinzu. Ändern Sie außerdem das Attribut src in data-src.

Die Änderungen für flower3.png würden zum Beispiel so aussehen:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

Versuchen Sie es in diesem Beispiel mit flower3.png, flower4.jpg und flower5.jpg für Lazy Loading.

Beispiele ansehen

Fertig! So sehen Sie die Änderungen in Aktion:

• Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.

• Öffnen Sie die Konsole und suchen Sie die soeben hinzugefügten Images. Ihre Klassen sollten sich von lazyload in lazyloaded ändern, wenn Sie auf der Seite nach unten scrollen.

• Beobachten Sie im Netzwerkbereich, wie die Bilddateien einzeln geladen werden, wenn Sie auf der Seite nach unten scrollen.

Mit Lighthouse bestätigen

Außerdem ist es empfehlenswert, diese Änderungen mit Lighthouse zu überprüfen. Die Leistungsprüfung „Nicht sichtbare Bilder zurückstellen“ von Lighthouse zeigt an, wenn Sie vergessen haben, Lazy Loading für nicht sichtbare Bilder hinzuzufügen.

1. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
2. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
3. Klicken Sie auf den Tab Lighthouse.
4. Achten Sie darauf, dass in der Liste Kategorien das Kästchen Leistung angeklickt ist.
5. Klicken Sie auf die Schaltfläche Bericht erstellen.
6. Prüfen Sie, ob die Prüfung Nicht sichtbare Images zurückstellen bestanden wurde.

Fertig! Sie haben Lazysizes verwendet, um die Bilder auf Ihrer Seite per Lazy Loading zu laden.