Above the fold

„Above the fold“ bezeichnet den Bereich einer Website, der nach dem Aufruf ohne Scrollen sichtbar ist. Alles darunter ist „below the fold“. Der Begriff stammt aus dem Zeitungsdruck: Tageszeitungen wurden am Kiosk gefaltet ausgelegt, sichtbar war nur die obere Hälfte der Titelseite — entsprechend wichtig war, was dort stand. Übertragen auf das Web markiert die Falzlinie die untere Kante des Viewports, also des sichtbaren Browserfensters.

Wo die Falzlinie heute verläuft

Der entscheidende Unterschied zur Zeitung: Es gibt keine feste Kante. Wo der Bereich endet, hängt von Bildschirmgröße, Auflösung, Browserfenster, Zoomstufe, Gerätetyp und Orientierung ab. Auf einem Desktop-Monitor stehen mehrere hundert Pixel mehr zur Verfügung als auf einem Smartphone im Hochformat — und da Google seit Abschluss der Umstellung auf Mobile-First-Indexierung die mobile Variante einer Seite als maßgebliche Version bewertet, ist der schmale mobile Ausschnitt der Normalfall, nicht die Ausnahme.

Dazu kommen Elemente, die den nutzbaren Bereich zusätzlich verkleinern, ohne dass sie im Design vorgesehen waren. Der prominenteste ist das Consent-Banner: Seit TTDSG beziehungsweise TDDDG ist für nicht notwendige Cookies eine aktive Einwilligung erforderlich, und viele Consent-Layer belegen auf dem Smartphone den halben Bildschirm. Sticky Header, Cookie-Hinweise und Aktionsleisten zusammen können dazu führen, dass vom eigentlichen Inhalt oberhalb der Falzlinie fast nichts übrig bleibt.

Prüfen lässt sich das ohne Spezialwerkzeug. Die Geräteemulation in den Entwicklertools von Chrome oder Firefox zeigt die Seite in beliebigen Viewport-Größen; PageSpeed Insights liefert zu jeder Messung einen Screenshot des ersten sichtbaren Zustands. Ein früher in Google Analytics verfügbarer Bericht zu Browsergrößen existiert dagegen nicht mehr — in Google Analytics 4 gibt es dafür keine Entsprechung.

Der Zusammenhang mit den Core Web Vitals

Der sichtbare Bereich ist nicht nur ein Gestaltungsthema, er ist messbar. Largest Contentful Paint (LCP), einer der drei Core Web Vitals, misst, wann das größte sichtbare Element im Viewport gerendert ist — in aller Regel ein Bild oder eine Überschrift oberhalb der Falzlinie. Das macht den Above-the-fold-Bereich direkt zum Gegenstand der Performance-Messung.

Daraus folgen zwei sehr konkrete Regeln. Erstens darf das LCP-Element nicht per Lazy Loading verzögert werden — ein loading="lazy" am Hero-Bild ist einer der häufigsten Gründe für schlechte LCP-Werte. Zweitens sollten Schriften, kritisches CSS und das Hauptbild priorisiert geladen werden, während alles unterhalb der Falzlinie warten darf.

Der zweite betroffene Messwert ist Cumulative Layout Shift (CLS). Wenn Werbeplätze, Banner oder nachgeladene Elemente oberhalb der Falzlinie erst spät ihre Größe bekommen, springt der Inhalt darunter weg — genau in dem Moment, in dem jemand zu lesen beginnt. Reservierter Platz über feste Höhen oder aspect-ratio verhindert das. Interaction to Next Paint (INP), seit März 2024 der dritte Core Web Vital anstelle von First Input Delay, betrifft den Bereich indirekt: Die erste Interaktion findet fast immer oben statt, etwa am Menü oder am Consent-Dialog. Wie sich die drei Werte im Zusammenspiel verbessern lassen, beschreibt der Eintrag zu Page Speed ausführlicher, ergänzt um praktische Schritte im Beitrag zur Optimierung der Seitenladezeiten.

Was Google in diesem Bereich abwertet

Foto: shutterstock.com

Google hat den sichtbaren Bereich zweimal ausdrücklich zum Thema gemacht. Im Januar 2012 kam der Page-Layout-Algorithmus, oft „Top Heavy“ genannt: Seiten, die oberhalb der Falzlinie überwiegend Werbung zeigen und den eigentlichen Inhalt nach unten drücken, wurden schlechter bewertet. Im Oktober 2012 folgte eine Aktualisierung desselben Systems. Beides ist längst Bestandteil des Kernalgorithmus und wird nicht mehr separat kommuniziert.

Fortgesetzt wurde die Linie 2017 mit der Abwertung aufdringlicher Interstitials — bildschirmfüllender Overlays, die auf Mobilgeräten den Inhalt verdecken, nachdem jemand aus der Suche gekommen ist. Rechtlich vorgeschriebene Hinweise wie Consent-Dialoge und Altersabfragen sind davon ausgenommen, solange sie den Bildschirm nicht unnötig blockieren.

Ein häufiges Missverständnis: Es geht nicht um Werbung an sich und auch nicht um eine bestimmte Anzahl von Bannern. Es geht darum, ob jemand nach dem Klick aus der Suche das findet, was das Suchergebnis versprochen hat, oder erst an Werbeflächen vorbeiscrollen muss.

Gestaltung: was oben stehen sollte

Aus Sicht der Nutzerführung beantwortet der sichtbare Bereich drei Fragen in wenigen Sekunden: Wo bin ich, was gibt es hier, und wie geht es weiter? Konkret heißt das in den meisten Fällen eine aussagekräftige Überschrift statt eines Slogans, eine erkennbare Navigation und — bei Angebots- oder Produktseiten — den nächsten Schritt in Sichtweite.

Der oft zitierte Rat, alles Wichtige gehöre nach oben, stimmt trotzdem nur zur Hälfte. Scrollen ist seit langem selbstverständlich, und wer erst einmal angefangen hat zu lesen, liest auch weiter. Ein Above-the-fold-Bereich, der komplett vollgestellt wird, um „alles unterzubringen“, wirkt eher abschreckend als hilfreich. Sinnvoller ist ein klarer Einstieg oben und ein sichtbarer Hinweis darauf, dass es weitergeht — etwa dadurch, dass der nächste Abschnitt angeschnitten ist.

Umgekehrt ist eine Startseite, die oberhalb der Falzlinie nur ein Bild zeigt und den gesamten erklärenden Text nach unten schiebt, ein bekanntes Muster mit vorhersehbarer Wirkung: Die Verweildauer sinkt, die Absprungrate steigt. Welche Elemente in welcher Reihenfolge messbar besser funktionieren, lässt sich nicht aus Prinzipien ableiten, sondern nur testen — genau das ist Gegenstand der Conversion-Optimierung, und die gestalterische Seite behandelt unser Bereich User Interface Design.