Max. 1 großes Hero-Bild
Mehrere große Hero-Assets schaden dem LCP.
Das Thema dieser Seite: Im sichtbaren Bereich sollte nur ein großes Hero-Bild laden, damit LCP stabil bleibt.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check zählt große Hero-Assets im Viewport und bewertet, ob zu viele Lade-Bremsen im sichtbaren Bereich liegen.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| 1 großes Hero-Asset | Fokus klar | OK |
| 2 große Assets | LCP verzögert | Warnung |
| 3+ große Assets | Above-the-fold überladen | Kritisch |
Kontext & Problemraum
Slider, Video-Teaser und doppelte Hero-Bilder sorgen dafür, dass der LCP nach hinten rutscht.
| Situation | Symptom | Risiko |
|---|---|---|
| Hero-Slider | Mehrere Bilder laden | LCP steigt |
| Video + Bild | Payload hoch | Mobile Nutzer leiden |
| Mehrfach-Banner | Viele Assets oben | Rendering verzögert |
Entscheidungslogik
| Wenn | Dann | Empfehlung |
|---|---|---|
| Mehr als 1 Hero | Payload zu groß | Auf 1 Asset reduzieren |
| Hero sehr groß | LCP verzögert | Komprimieren |
| 1 Hero Asset | Signal ok | Beibehalten |
Erklärende Details
Above-the-fold sollte so leicht wie möglich bleiben. Ein einziges Hero-Bild mit optimaler Größe reicht meist für den visuellen Eindruck.
<img src="/hero.avif" width="1200" height="700" />| Detail | Warum relevant | Hinweis |
|---|---|---|
| Preload Hero | Früher Download | Nur 1 Bild preladen |
| Slider vermeiden | Mehrere Assets | Statisches Hero nutzen |
| Poster statt Video | Video schwer | Poster initial laden |
Risiken, Grenzen & Einschränkungen
| Grenze | Woran erkennbar | Was tun |
|---|---|---|
| Design-Anforderungen | Mehrere Visuals nötig | Story vereinfachen |
| CMS-Vorgaben | Slider Standard | Template anpassen |
| Mobile View | Hero anders skaliert | Mobile separat optimieren |
LCP Proxy
Hero beeinflusst den LCP.
Große Bilder
Bildgewicht reduzieren.
Render-blockierendes CSS
Critical Path entschärfen.