Verzögertes Laden von Bildern außerhalb des sichtbaren Bereichs

Silktide prüft, ob Ihre Seite Bilder herunterlädt, die der Besucher noch nicht sehen kann – Bilder weiter unten auf der Seite, unterhalb der ersten Bildschirmseite. Wenn diese bereits zu Beginn geladen werden, verzögert das die Inhalte, die sich der Besucher tatsächlich ansieht.

Die Abhilfe ist : Der Browser ruft jedes Bild kurz bevor es in den Sichtbereich scrollt ab, statt sofort alle Bilder der Seite herunterzuladen.

Warum das wichtig ist

Wenn eine Seite lädt, steht dem Browser nur begrenzte Bandbreite zur Verfügung, und jedes heruntergeladene Bild konkurriert mit allem anderen. Wird diese Bandbreite für Bilder drei Bildschirmseiten weiter unten verbraucht, treffen das Aufmacherbild, der Text und die Schaltflächen, auf die der Besucher wartet, später ein.

Bei langen, bildlastigen Seiten ist die Verschwendung groß: Ein Besucher, der die erste Bildschirmseite liest und wieder geht, hat – in Zeit und mobilen Daten – womöglich für Dutzende Bilder bezahlt, die er nie gesehen hat.

So beheben Sie das

Fügen Sie bei Bildern unterhalb der ersten Bildschirmseite loading=\"lazy\" hinzu. Browser unterstützen dies nativ, ohne dass Skripte erforderlich sind:

<!-- Weit unten auf der Seite: erst laden, wenn der Besucher in die Nähe scrollt -->
<img src="team-photo.jpg" alt="Unser Team" loading="lazy" width="800" height="600">

Laden Sie Bilder am Seitenanfang nicht verzögert, insbesondere das größte – das verzögert das, was Besucher zuerst sehen, und schadet mehr als es nützt.
Viele CMS und Frameworks laden Bilder inzwischen automatisch verzögert; falls Ihres das nicht tut, suchen Sie nach einer Einstellung oder einem Plugin, bevor Sie Templates ändern.
Vergeben Sie bei verzögert geladenen Bildern weiterhin explizite Abmessungen, damit die Seite beim Laden nicht springt – siehe Explizite Bildgrößen.

So prüft Silktide das

Lädt die Seite in einem echten Browser, mit dem für Ihre Geschwindigkeitstests konfigurierten Gerätetyp, der Verbindungsgeschwindigkeit und dem Teststandort.
Ermittelt Bilder, die während des initialen Ladens heruntergeladen werden, sich jedoch vollständig unterhalb des sichtbaren Bereichs befinden und noch nicht verzögert werden.
Meldet jedes außerhalb des Sichtbereichs liegende Bild mit der Downloadgröße, die aufgeschoben werden könnte.
Bewertet die Seite nach der insgesamt aufschiebbaren Größe: etwa 30 KB werden herabgestuft, 100 KB oder mehr gelten als schlecht.

Fehlerbehebung

Das Bild ist auf meinem Bildschirm sichtbar

Was "außerhalb des Sichtbereichs" ist, hängt vom Bildschirm ab. Silktide testet mit dem Gerät, das für Ihre Geschwindigkeitstests konfiguriert ist; daher kann ein Bild, das sich auf Ihrem Desktop noch in der Nähe der Falz befindet, auf einem kleineren unterhalb der ersten Bildschirmseite liegen. Lazy Loading ist dennoch unbedenklich: Das Bild lädt, sobald der Besucher in seine Nähe scrollt.

Wir laden bereits per Skript verzögert

Ältere, skriptbasierte Ansätze stoßen Downloads mitunter dennoch zu früh an, oder das Skript erfasst Bilder nicht, die von anderen Plugins hinzugefügt werden. Die gemeldeten Bilder zeigen genau, was außerhalb des Sichtbereichs heruntergeladen wurde; das native loading=\"lazy\" ist die einfachste und zuverlässigste Lösung.