LCP: Das wichtigste sichtbare Element
Der Largest Contentful Paint misst vereinfacht, wann das grösste sichtbare Inhaltselement gerendert ist. Auf vielen Landingpages ist das ein Hero-Bild. Eine unnötig grosse Datei, langsame Serverantwort oder falsche Ladepriorität verzögern diesen Zeitpunkt.
Was beim Hero hilft
- Abmessungen auf den realen Viewport begrenzen
- WebP oder ein anderes effizientes Format nutzen
- Das LCP-Bild nicht mit Lazy Loading verzögern
- Bei Bedarf mit
fetchpriority="high"priorisieren - Responsive Varianten mit
srcsetbereitstellen
CLS: Platz reservieren
Cumulative Layout Shift beschreibt unerwartete Verschiebungen. Fehlen Bildabmessungen, weiss der Browser vor dem Download nicht, wie viel Platz vorgesehen ist. Text und Buttons springen nach unten, sobald das Bild erscheint. width und height oder CSS aspect-ratio reservieren den richtigen Raum.
INP und Rechenarbeit
Sehr grosse Bilder benötigen nicht nur Netzwerkbandbreite, sondern auch Speicher und Decodierzeit. Auf schwächeren Smartphones kann das die Reaktionsfähigkeit beeinträchtigen. Die korrekte Pixelgrösse reduziert diese Arbeit. Ein 5000-Pixel-Bild in einer 400-Pixel-Card ist deshalb auch dann ineffizient, wenn die Datei stark komprimiert wurde.
| Problem | Typische Ursache | Lösung |
|---|---|---|
| Langsamer LCP | Schweres Hero | Skalieren, komprimieren, priorisieren |
| Layout springt | Keine Abmessungen | Breite/Höhe oder Seitenverhältnis setzen |
| Mobile Downloads gross | Eine Desktop-Datei für alle | srcset und sizes verwenden |
| Zu viele Requests sofort | Alle Bilder eager | Unterhalb des Folds lazy laden |
Komprimierung ist nur ein Teil: Gute Core Web Vitals entstehen aus Dateigrösse, Abmessungen, Priorität, HTML-Markup, Hosting und Cache-Strategie.
Praktische Reihenfolge
- Identifiziere das LCP-Element mit Browser-Entwicklertools oder PageSpeed Insights.
- Erzeuge passende Bildabmessungen und moderne Formate.
- Setze responsive Quellen und reserviere das Seitenverhältnis.
- Lade nur Bilder unterhalb des Folds verzögert.
- Messe erneut auf realistischen mobilen Bedingungen.