Bilder & Web Performance — der praktische Guide
Bilder sind der größte Performance-Hebel auf den meisten Websites. Wer Largest Contentful Paint, Cumulative Layout Shift und Bandbreite ernst nimmt, fängt hier an.
Die drei Metriken, die zählen
Wann ist das größte sichtbare Element fertig gerendert? In den meisten Fällen ein Bild. Wer den LCP optimiert, hat fast immer einen Performance-Hebel an einem Hero-Bild.
Wie sehr verschieben sich Layout-Elemente während des Ladens? Bilder ohne width/height verursachen Shifts und verschlechtern den Wert direkt.
Wie schnell reagiert die Seite auf User-Klicks? Schwer zu beeinflussen über Bilder direkt — aber riesige Bild-Decoder können den Main-Thread blockieren.
Konkrete Maßnahmen, sortiert nach Wirkung
Die einzige Maßnahme mit zweistelliger Prozent-Wirkung auf den LCP. 25–50% kleinere Dateien bei identischer Wahrnehmung.
Mobil-User laden so nicht das Desktop-Hero. Pro Bild typischerweise 3–4 Varianten in 320, 640, 1280, 1920 px Breite.
Bilder unter dem ersten Bildschirm warten, bis sie wirklich gebraucht werden. Hero-Bilder bekommen loading="eager" plus fetchpriority="high".
Selbst wenn das Bild später per CSS gestreckt wird — die HTML-Attribute reservieren den Platz und verhindern Layout-Shifts.
Smartphone-Fotos schleppen oft 100–500 KB GPS- und Linsen-Metadaten mit. Im Web nicht nötig — Datenschutz-Plus inklusive.