Was ist Above the Fold?
Kurzdefinition
Above the Fold bezeichnet den Inhalt, der auf einer Webseite ohne Scrollen sichtbar ist, und gilt als wertvollster Bereich eines Webseitenlayouts.
The term 'above the fold' originates from newspapers, where the most important headlines were placed above the physical fold of the paper. In web design, it refers to the content visible in the browser viewport before the user scrolls. This area varies based on the user's device, screen size, and browser configuration.
Above-the-fold content is critical for two reasons: first impressions and performance. Users form an opinion about your website within 50 milliseconds, based entirely on what they see above the fold. This content must communicate your value proposition, establish credibility, and encourage scrolling or action.
From a performance perspective, optimizing above-the-fold content is key to good Core Web Vitals scores. Largest Contentful Paint (LCP) typically measures an above-the-fold element — a hero image, headline, or feature graphic. Inlining critical CSS ensures above-the-fold content renders immediately, while below-the-fold content can be lazily loaded.
Modern responsive design means 'above the fold' looks different on every device. A desktop hero section might be a tall banner with text overlay, while the mobile version shows a condensed version with a smaller image. Designing and optimizing for multiple viewport sizes is essential.
Warum es wichtig ist
Above-the-fold content determines whether users stay or leave. Studies show that users spend 80% of their viewing time above the fold. If your value proposition, navigation, and primary CTA aren't visible without scrolling, many visitors won't scroll to find them.
For SEO, Google's LCP metric specifically measures above-the-fold content rendering speed. Slow-loading hero images or complex above-the-fold layouts directly hurt search rankings.
Praxisbeispiele
A SaaS homepage moved their primary CTA from below the fold to above it and saw click-through rates increase by 40%
A landing page optimized their above-the-fold hero image (from 3MB JPEG to 150KB WebP) and improved LCP from 4.5 seconds to 1.2 seconds
A B2B company's above-the-fold content had a corporate stock photo and vague tagline — replacing it with a clear value proposition and product screenshot increased demo requests by 25%
An e-commerce site ensured product images appeared above the fold on mobile by reducing their header height, decreasing the bounce rate on product pages by 12%
Verwandte Begriffe
LCP (Largest Contentful Paint)
LCP misst die Zeit, bis das größte sichtbare Inhaltselement einer Seite — wie ein Hero-Bild oder eine Überschrift — vollständig gerendert ist.
Core Web Vitals
Core Web Vitals sind drei spezifische Metriken von Google, die die reale Nutzererfahrung auf Websites messen: Ladeleistung (LCP), Interaktivität (INP) und visuelle Stabilität (CLS).
Page Speed
Page Speed ist das Maß dafür, wie schnell eine Webseite geladen wird und interaktiv wird, was sich direkt auf die Nutzererfahrung und Suchmaschinen-Rankings auswirkt.
Lazy Loading
Lazy Loading ist eine Technik, die das Laden nicht kritischer Ressourcen wie Bilder unterhalb des sichtbaren Bereichs verzögert, bis sie tatsächlich benötigt werden.
Benötigen Sie Hilfe mit above the fold?
Unser Team hilft Ihnen, dieses Konzept in die Praxis umzusetzen. Fordern Sie eine kostenlose Beratung an, um Ihr Projekt zu besprechen.