Ratgeber Direkt Sichtbare Bilder sind mit Lazy Load versehen

Direkt sichtbare Bilder auf deiner Website sollten nicht mit Lazy Load geladen werden. Lazy Load verzögert das Laden von Bildern, bis sie im sichtbaren Bereich erscheinen. Wenn jedoch direkt sichtbare Bilder betroffen sind, kann dies dazu führen, dass diese nicht sofort geladen werden, was die Benutzererfahrung beeinträchtigen kann.

• Schlechtere Nutzererfahrung: Nutzer sehen beim ersten Laden der Seite Platzhalter oder leere Bereiche, bis die Bilder geladen sind.
• Langsame Wahrnehmung der Website: Direkt sichtbare Inhalte sollten schnell verfügbar sein, um einen guten ersten Eindruck zu hinterlassen.
• SEO-Nachteile: Google bewertet die Ladegeschwindigkeit direkt sichtbarer Inhalte, was sich negativ auf dein Ranking auswirken kann.

1. Identifiziere direkt sichtbare Bilder:
   • Öffne deine Website in einem Browser und prüfe, welche Bilder sofort im sichtbaren Bereich (Above-the-Fold) erscheinen.
   • Überprüfe den HTML-Code auf das Attribut loading="lazy" bei diesen Bildern.
2. Entferne Lazy Load für direkt sichtbare Bilder:
   • Bearbeite den HTML-Code und entferne das loading="lazy"-Attribut für diese Bilder. Beispiel:
     Vorher:

     <img src="hero-bild.jpg" loading="lazy" alt="Hero-Bild">

     Nachher:

     <img src="hero-bild.jpg" alt="Hero-Bild">

3. Stelle sicher, dass die Bilder optimiert sind:
   • Komprimiere die Bilder, um ihre Ladezeit zu minimieren, ohne die Qualität merklich zu beeinträchtigen.
   • Verwende Formate wie WebP oder AVIF für effizientere Komprimierung.
4. Implementiere Preloading:
   • Lade wichtige direkt sichtbare Bilder vorab mit dem <link rel="preload">-Tag:

     <link rel="preload" as="image" href="hero-bild.jpg">

5. Teste die Änderungen:
   • Lade deine Website erneut und überprüfe, ob direkt sichtbare Bilder sofort geladen werden.
   • Nutze Tools wie Google PageSpeed Insights, um sicherzustellen, dass die Ladegeschwindigkeit verbessert wurde.
6. Nutze Lazy Load nur für nicht sichtbare Bilder:
   • Wende Lazy Load weiterhin für Bilder an, die erst beim Scrollen sichtbar werden, um die Ladezeit zu optimieren.

Beispiele & Best Practices

• Lazy Load auf allen Bildern: Verwende Lazy Load nur für Bilder, die sich nicht im sichtbaren Bereich befinden.
• Unoptimierte Bilder: Stelle sicher, dass direkt sichtbare Bilder komprimiert und auf die richtige Größe skaliert sind.
• Kein Preloading: Lade wichtige Bilder vorab, um die Ladezeit weiter zu verkürzen.

• Direkt sichtbare Bilder sollten ohne Lazy Load geladen werden, um die Benutzererfahrung zu verbessern.
• Verwende Preloading, um wichtige Inhalte schneller verfügbar zu machen.
• Bilder im sichtbaren Bereich sollten idealerweise in unter 1 Sekunde geladen werden.

• Google PageSpeed Insights
• Web.dev Lazy Loading
• W3C-Dokumentation zu Preloading