Definition: Was bedeutet „Above-the-Fold“?
Above-the-Fold bezeichnet den Bereich einer Webseite, der ohne Scrollen sofort sichtbar ist. Der Begriff stammt aus der Zeitungswelt: Auf einer zusammengefalteten Zeitung sah man zunächst nur den oberen Teil – den Bereich, der Leserinnen zum Kauf animieren sollte.Im Web ist der Fold der entscheidende erste Eindruck: Innerhalb von wenigen Sekunden entscheiden Nutzerinnen, ob sie bleiben oder abspringen.
Darum ist der Above-the-Fold-Bereich so wichtig
- Erster Eindruck zählt: Nutzer*innen scannen Webseiten in unter 3 Sekunden auf Relevanz.
- SEO-Faktor: Google bewertet User-Signale wie Bounce-Rate und Verweildauer – die häufig stark vom Fold-Bereich beeinflusst werden.
- Conversion-Hebel: Klar formulierte Nutzenversprechen und Call-to-Action-Buttons steigern die Wahrscheinlichkeit einer Interaktion erheblich.
- Performance-Relevanz: Kennzahlen wie Largest Contentful Paint (LCP) betreffen primär Inhalte oberhalb des Folds.
Die 5-Sekunden-Regel für den Fold-Bereich
Dein Above-the-Fold-Bereich sollte in maximal fünf Sekunden beantworten:
- Wer bist du?
Dein Logo und/oder Claim sind sichtbar und klar positioniert. - Was bekomme ich hier?
Ein klares Nutzenversprechen in der H1 und ggf. einer Sub-Headline. - Was soll ich tun?
Deutlich sichtbarer Call-to-Action (z.B. „Jetzt Angebot anfordern“). - Warum sollte ich dir vertrauen?
Trust-Elemente wie Siegel, Kundenlogos, Bewertungen oder Medien-Features. - Wie schnell lädt es?
Kritische Ressourcen (Hero-Bild, Haupt-Headline) sollten in unter 2,5 Sekunden sichtbar sein.
Designer-Tipps für einen starken Above-the-Fold
- Visuelle Hierarchie beachten:
60 % Text / 30 % Bild / 10 % Weißraum als Faustregel für ein ausgewogenes Layout. - Responsive Art Direction:
Nutze<picture>-Tags, um für Mobile andere Bildausschnitte oder Formate zu liefern. - Text-Bild-Verhältnis:
Weniger als 20 % Textanteil im Hero-Artwork halten, um Ladezeiten nicht zu belasten. - Animation sparsam einsetzen:
Leichte CSS- oder Lottie-Animationen nach LCP laden – nicht blockierend einsetzen. - Fokus auf Accessibility:
Headline strukturieren (H1 bleibt H1), kontrastreiche CTAs und sinnvolle Tab-Reihenfolgen berücksichtigen.
Performance und Messung
- Largest Contentful Paint (LCP):
Idealwert: ≤ 2,5 Sekunden
Messen mit: Google PageSpeed Insights oder Chrome DevTools. - Resource-Coverage:
Kritische Ressourcen (CSS, Fonts, Bilder) sollten nicht mehr als 140 kB initial laden. - Scroll- und Sichtbarkeitsanalyse:
Mit Microsoft Clarity oder Hotjar prüfen, ob mindestens 75 % der Nutzer den CTA im Fold sehen.
FAQ
Zählt Above-the-Fold auf Mobile anders?
Ja – da der sichtbare Bereich kleiner ist, sollte Mobile-First-Design den wichtigsten CTA und Kernbotschaften sofort sichtbar machen. Mobile Scroll-Heatmaps sind dafür wichtig.
Ist ein CTA im Fold immer Pflicht?
Bei Landingpages oder Verkaufstexten: Ja. Bei informativen Artikeln reicht oft ein Scroll-Indikator oder ein Intro-Link zur Hauptsektion.
Beeinflusst eine große Hero-Grafik das LCP?
Ja. Verwende WebP/AVIF-Formate, komprimiere Dateien unter 150 kB, setze fetchpriority="high" auf das Hero-Bild und nutze LQIP-Placeholder.
Above-the-Fold braucht ein Upgrade?
X-06 Designs sorgt für beeindruckende erste Sekunden, die bleiben – optisch wie performancetechnisch!