Lazy Loading für nicht sichtbare Bilder mit Lazysizes

Katie Hempenius

Öffne diesen Glitch in einem zweiten Tab, um dem Codelab zu folgen.

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>

Hinweis : Die Datei lazysizes.min.js wurde diesem Projekt bereits hinzugefügt. Sie müssen sie also nicht separat hinzufügen. Das Skript, das Sie gerade hinzugefügt haben, kann dieses Skript verwenden.

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 Attribut src in data-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.

Hinweis: Sie fragen sich vielleicht, warum das Attribut src in data-src geändert werden muss. Wenn dieses Attribut nicht geändert wird, werden alle Bilder sofort geladen und nicht per Lazy Loading. data-src ist kein Attribut, das der Browser erkennt. Wenn er also auf ein Bild-Tag mit diesem Attribut stößt, wird das Bild nicht geladen. In diesem Fall ist das sinnvoll, da dann das Lazysizes-Skript entscheiden kann, wann das Bild geladen werden soll, und nicht der Browser.

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 zu lazyloaded ä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.

1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild .
2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Wahltaste + J“ auf einem 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 verzögern bestanden wurde.

Fertig! Sie haben Lazy Loading für das Lazy Loading von Bildern auf Ihrer Seite verwendet.