Schnelle Webseiten

Weshalb laden mit Lacy Loading Seiten mit Fotos und Videos schneller?

Sichtbarkeit im Netz

Schnelle Ladezeiten sind nach wie vor wichtig

Seit kurzem sehen wir in vielen Performance Reports ein klares Muster. Core Web Vitals kippen nicht wegen Servern oder Themes. Sie kippen wegen Medien. Der Grund: Nachdem viele Agenturen ab 2022 den Ladezeiten viel Aufmerksamkeit geschenkt hatten, ist das Thema etwas in Vergessenheit geraten.

Dank Lacy Load laden Bilder, Videos, Karten schneller. Auch dort wo niemand scrollt. Genau hier setzt Lazy Load an. Kein neues Thema. Neu ist seine Relevanz. Google bewertet Ladeverhalten strenger. Mobile Nutzung steigt weiter. Datenvolumen zählt wieder. Für uns bei aretis heisst das: Performance ist kein Nice to have mehr. Sie entscheidet über Sichtbarkeit.

WordPress bringt seit Version 5.5 natives Lazy Loading mit. Bilder erhalten automatisch das Attribut loading=»lazy». Das reicht oft nicht. Plugins ergänzen die Kontrolle. Sie steuern Ausnahmen. Sie binden iFrames ein, setzen Platzhalter. In Kundenprojekten nutzen wir Lazy Load über WP Rocket oder direkt im Theme. Die Entscheidung fällt nach einer Messung.

Mobile Nutzung

Das Ladevolumen steigt.

Denken Sie daran

Schnelle Ladezeiten sind wichtig

Webdesigner tippt auf Tastatur, zwei Monitore zeigen bunte Codezeilen im Aargauer Büro.
Speed

Messung nach Installation

So gehen wir vor

Unser Vorgehen ist klar strukturiert.

  • Hero Bilder laden nie lazy
  • Alle Medien unterhalb des ersten Viewports laden lazy
  • iFrames erhalten Platzhalter mit fixer Höhe
  • width und height stehen immer im Markup
  • Tests laufen mit Lighthouse und WebPageTest
  • Messung vor und nach jeder Anpassung

E-Commerce

Im E Commerce Umfeld zeigt sich ein ähnliches Bild. Häufig sind Kategorie-Seiten mit vielen Produktbildern ausgestattet. Nach Lazy Load sank bei einem konkreten Projekt die mobile Datenmenge um 41 Prozent. Scrollen blieb flüssig. Sichtbarkeit der Produkte blieb erhalten.

Lazy Load funktioniert nur mit Regeln. Zu aggressives Verhalten verschlechtert LCP. Deshalb definieren wir Ausnahmen. Messen gehört immer dazu. Schätzen reicht nicht.

Mehr Infos finden Sie bei web.dev zum Thema Browser level image lazy loading.

Fallende Requests

Reale Kundenprojekte

Projekt Nummer 1

  • Startseite mit 28 Bildern und 2 Videos.
  • Vor der Optimierung lag die übertragene Bildmenge bei 6.1 MB.
  • Nach WebP und Lazy Load blieben 2.2 MB im ersten Viewport.
  • LCP sank von 4.1 s auf 2.5 s. Die Requests in der Startphase fielen von 102 auf 67. Das Ergebnis war stabil auf Mobilgeräten.

Projekt Nummer 2

  • Ein weiteres Projekt aus dem Vereinsumfeld.
  • Viele Galerien. Viele Slider.
  • Vorher INP bei 330 ms. Nach Umstellung auf natives Lazy Loading lag der Wert bei 195 ms.
  • Wir haben bewusst ein schweres Script entfernt. Nicht jedes Plugin verbessert Performance. Manche schaden.

Gerade wenn Sie Werbung schalten, etwa mit Google Ads, ist ein schneller Seitenaufbau wichtig und dienst der Usability. Wir können Sie zu Redesign und Google-Kampagnen beraten.