INP-zentrierte Bildoptimierung (Leitfaden 2025)

Kurzzusammenfassung

• INP ist jetzt ein stabiles Ranking- und UX-Signal.
• Bild-Dekodierung, Layout-Verschiebungen und lange Aufgaben in der Nähe von Interaktionsfenstern erhöhen den INP.
• Strategie: Kritische Bytes verkleinern und die Dekodierung unkritischer Elemente staffeln.

1. Wie Bilder den INP beeinflussen

(Dekodieren → Rastern → Zusammensetzen; Main-Thread-Planung & Aufgabenwarteschlangen.)

2. Anti-Muster, die den INP beeinträchtigen

• Schwere gleichzeitige Dekodierungen von Hero- und Galeriebildern.
• Späte Ermittlung der Abmessungen (Layout-Verschiebungen).
• Übergroße DPR-Sets (3–4× Verschwendung), die die Dekodierung verzögern.
• Verwendung von GIF / APNG, wo MP4/WEBM kleiner und schneller wären.

3. Messsignale

• Lange Aufgaben >50ms in der Nähe der ersten Eingabe (PerformanceObserver / DevTools).
• Delta zwischen LCP und erster Interaktion.
• Bytes der vor der ersten Eingabe dekodierten Bilder.

4. Taktische Hebel

• Hero-Bild richtig dimensionieren und auf ≤180KB begrenzen (Ziel <150KB, wenn machbar).
• DPR einschränken: nur 1x + 2x für fotografische Assets.
• fetchpriority="high" nur für das endgültige LCP-Bild verwenden.
• Leichtgewichtiger Platzhalter (dominante Farbe / ultra-kleiner Weichzeichner <1KB).
• Galerie-Dekodierung durch loading="lazy" + Hydratisierung nach der Leerlaufzeit aufschieben.

5. Ablauf

1. Basis-RUM (INP p75, LCP p75).
2. Inventarisierung von Hero-/Galeriebildern.
3. Neu kodieren / Abmessungen anpassen.
4. Priorität und Platzhalter anpassen.
5. Erneut messen.

6. Beispiel für optimiertes <picture>

<picture>
  <source type="image/avif" srcset="hero-960.avif 960w, hero-1440.avif 1440w" sizes="(max-width: 900px) 95vw, 1440px" />
  <source type="image/webp" srcset="hero-960.webp 960w, hero-1440.webp 1440w" sizes="(max-width: 900px) 95vw, 1440px" />
  <img src="hero-960.jpg" alt="Produktbeispiel" width="1440" height="720" loading="lazy" decoding="async" />
</picture>

7. Checkliste

• Hero <180KB
• Keine Überdimensionierung >2×
• Minimaler Platzhalter
• Galerie mit Lazy Loading
• DPR begrenzt
• Einzelnes Bild mit hoher Priorität
• INP p75-Verbesserung bestätigt

8. Nächste Schritte

• Erstellen Sie eine Vorher/Nachher-INP-Tabelle, um Verbesserungen mit Stakeholdern zu teilen.
• Instrumentieren Sie das Dekodierungs-Timing (PerformanceObserver), damit Regressionswarnungen automatisch ausgelöst werden.