Ein Bild, das erst lädt, wenn es fast im Sichtbereich ist, erspart dem Besucher alles unterhalb des Falzes. Wusste der Browser nicht, wie groß es wird, springt die Seite bei seiner Ankunft — und der Leser verliert die Stelle oder tippt auf einen Link, der weitergerutscht ist.

Geben Sie immer Breite und Höhe an

<img src="/img/rack.webp" width="1600" height="900" alt="A server rack" loading="lazy" decoding="async">

Sie sind nicht die Anzeigegröße. Sie sind das Seitenverhältnis, und daraus reserviert der Browser genau den richtigen Platz, während die Datei noch lädt. Mit CSS width:100%;height:auto skaliert das Bild trotzdem ganz normal.

Laden Sie den Seitenkopf niemals verzögert

loading="lazy" am Hero-Bild verzögert das größte Element auf dem Schirm — und genau das ist die eine Kennzahl dafür, wie schnell sich die Seite anfühlt. Die Regel ist einfach: alles oberhalb des Falzes lädt sofort, alles darunter verzögert.
<!-- hero: eager, and asked for early -->
<img src="/img/hero.webp" width="1600" height="900" alt="" fetchpriority="high">

Dasselbe gilt für Einbettungen

Ein iframe nimmt ebenfalls Breite, Höhe und loading="lazy". Eine Video-Einbettung ohne diese Angaben ist oft das schwerste Einzelstück einer Seite — und liegt meist unterhalb des Falzes.

Und für alles, was ein Skript einblendet

Ein Einblend-Effekt beim Scrollen, der bei Deckkraft 0 startet, zeigt jedem, dessen Skript nicht lief, eine leere Karte. Machen Sie den versteckten Zustand zur Ausnahme — vom Skript gesetzt, sobald es läuft —, damit der Inhalt standardmäßig sichtbar ist.

Nachprüfen

Laden Sie die Seite mit gedrosseltem Netz und achten Sie darauf, ob sich nach der Ankunft der Bilder etwas verschiebt. Cumulative Layout Shift in einem Lighthouse-Lauf beziffert dasselbe — siehe Core Web Vitals ehrlich messen.