Was es ist
Diese Prüfung schaut sich an, wie viele Bilder eine Seite lädt, und markiert Seiten mit einer ungewöhnlich hohen Anzahl, da jedes zusätzliche Bild eine weitere separate Datei ist, die der Browser herunterladen muss, bevor die Seite vollständig fertig geladen ist. Es geht dabei nicht darum, dass Bilder grundsätzlich schlecht wären – sie sind für Design und Inhalt einer Seite oft unverzichtbar –, sondern konkret um den kumulativen Effekt, sehr viele davon gleichzeitig zu laden.
Die praktische Auswirkung einer hohen Bilderzahl ist auf dem Handy deutlich spürbarer als am Desktop, weil mobile Verbindungen – selbst gute – in der Regel langsamer und weniger konstant sind als eine heimische oder betriebliche WLAN- oder Kabelverbindung.
Warum es wichtig ist
Jedes Bild erhöht die gesamte Datenmenge, die das Gerät eines Besuchers herunterladen muss, bevor die Seite vollständig nutzbar ist – und speziell auf einer mobilen Datenverbindung kann sich diese Ladezeit spürbar verlängern, verglichen mit derselben Seite, die auf einer schnellen Desktop-Verbindung fast sofort lädt. Ein Besucher, der auf dem Handy auf eine langsam ladende, bildlastige Seite wartet, bricht deutlich wahrscheinlicher ab und verlässt sie, bevor sie fertig geladen ist, verglichen mit einer leichteren Seite, die viel früher nutzbar wird.
Das ist ein Fall, in dem der Fix nicht zwangsläufig bedeutet, Inhalte zu entfernen, an denen ein Besucher interessiert ist – es geht meistens viel mehr darum, wie diese Bilder ausgeliefert werden (ihre Dateigröße, und ob sie alle sofort laden), als sie komplett zu streichen.
So behebst du es
- Zähle, wie viele Bilder sofort beim Laden der Seite geladen werden, und identifiziere alle, die ungewöhnlich groß in der Dateigröße sind (die Entwicklertools deines Browsers können das für jedes Bild anzeigen).
- Komprimiere große Bilder mit einem kostenlosen Bildkompressionstool, bevor du sie hochlädst – das verkleinert die Dateigröße oft drastisch, ohne sichtbaren Qualitätsverlust.
- Füge Lazy Loading für Bilder hinzu, die weiter unten auf der Seite erscheinen (unterhalb des sichtbaren Bereichs ohne Scrollen), damit sie erst laden, wenn ein Besucher tatsächlich in ihre Nähe scrollt, statt alle auf einmal beim Öffnen der Seite.
- Die meisten modernen Website-Baukästen und CMS-Plattformen unterstützen Lazy Loading über einen einfachen Schalter oder sogar automatisch standardmäßig – prüfe deine Bild- oder Performance-Einstellungen, bevor du es manuell einrichtest.
- Teste die mobile Ladezeit der Seite nach den Änderungen erneut, idealerweise auf einer echten mobilen Verbindung statt im schnellen Büro-WLAN.