Above the Fold

Above the Fold: CSS Irrsinn oder SEO Gold?

Was bedeutet das Schlagwort "Above the Fold", woher stammt es und welche Bedeutung hat der Begriff für Ihre Website?

Bedeutung und Herkunft

Der aus dem Druckerwesen stammende Begriff "Above the Fold" (über der Falz) definiert die Hälfte einer Zeitung, die für den Kioskbesucher und potentiellen Leser bereits ohne Handlung sichtbar ist.

Mittlerweile wurde die Bezeichnung auf das Internet übertragen und beschreibt in der Webentwicklung den Teil einer Internetseite, der bereits ohne Betätigung des Mausrads angezeigt wird. Der Abschnitt darunter wird entsprechend "Below the Fold" genannt.

Above the Fold
Above the Fold & Below the Fold

Relevanz damals und heute

Welch wichtige Bedeutung die Klassifikation für die Druckbranche hat, dürfte nicht angezweifelt werden. Zeitungen, Zeitschriften und Magazine werden nicht zuletzt wegen der enormen Auswahl vom Interessenten nur überflogen und daher erfährt das Cover auch von den Redaktionen ganz besondere Aufmerksamkeit.

Dies führt zwangsläufig dazu, dass dieses drei Zwecke auf ein Mal erfüllen muss:

  1. Aufmerksamkeit auf sich ziehen
  2. Themenbezug vermitteln
  3. und über die wichtigsten Inhalte der Ausgabe informieren

Während der frühen 2000er, als erstmals vermehrt darauf geachtet wurde, den Aufbau der eigenen Website zu optimieren und so Umsätze zu steigern, wurde das Prinzip "Above the Fold"-Anpassung zu einem der wichtigsten Maßnahmen der zunehmend aufkommenden Internet-Werbeagenturen.

Da dieser Bereich sehr prominent war, versuchte man frei nach dem Motto "Masse statt Klasse", möglichst viele Inhalte, Teaser und Verlinkungen unterzubringen (siehe Screenshot Microsoft 2001), um dem Besucher nichts vorzuenthalten. Diese Praxis gehört zum Glück lange der Vergangenheit an!

Doch auch wenn die Berufskollegen mittlerweile Einsicht hatten und diese schon als Spam zu bezeichnende Praxis ad acta gelegt haben, bedeutet es nicht, dass dies auch für die Bedeutung von "Above the Fold" gilt.

Above the Fold im Druck
Cover der Zeitschriften "Page" und "Bravo"




Microsoft Screenshot 2001
Screenshot microsoft.com von 2001 und heute

Inhaltliche Optimierung im Web

Eine Studie aus dem Jahre 2007 hat ergeben, dass Webseitenbesucher im Schnitt 80% Ihrer Browserzeit im Eingangsscreen einer Seite verbringen.
Der Eingangsbildschirm hat sich folglich zum digitalen Schaufenster entwickelt. Link- und Textlisten mussten emotionalen Bildern, perfekt inszenierten Produktabbildungen und catchy phrases weichen und Teaserkacheln machen dem Besucher das Verweilen, Klicken und Scrollen auf der Seite schmackhaft.

Es scheint also, als wären wir seit einigen Jahren endlich bei dem ursprünglichen Ziel der "Above the Fold" Thematik angekommen.

Microsoft Screenshot 2017
Screenshot microsoft.com 2017


Allerdings hat sich das Verhalten der Nutzer mit der Zeit angepasst.
Chatbeat hat 2013 eine Analyse veröffentlicht, in der beschrieben wird, dass viele Besucher noch vor Abschluss des Ladevorgangs mit dem Scrollen beginnen.

Der Beginn einer Seite wird längst als Ort der Selbstinszenierung, Werbespruch-Sammlung und Platzverschwendung durch nichtssagende Emotionsbilder verstanden. Sticky Menus (Menüs, die beim Scrollen an der oberen Bildschirmkante haften) ermöglichen es zudem, alle Inhalte jederorts zu erreichen.

Laut Chartbeat wird der Teil "Above the Fold" von nur 75% der Besucher und im Schnitt 4 Sekunden lang wahrgenommen, wohingegen im direkt darunter liegende Teil bei fast 100% Sichtungsquote 16 Sekunden verbracht werden.

Bedeutet das nun umzudenken? Jain. Denn auch wenn die Aufmerksamkeit gewandert ist, hat der Teil Above the Fold eine wichtige Bedeutung für Ihre Seite. Er spiegelt Sie selbst wieder und bietet weiterhin eine wunderbare Werbefläche, wenn sie denn originell und abweichend von der Norm gestaltet wird. Statt den Fokus der Gestaltung unter die Falz zu verschieben, sollte er viel mehr ausgeweitet werden, um beide Zwecke zu bedienen.

Das Scrollverhalten von Nutzern
Das Scrollverhalten von Nutzern, analysiert von Chartbeat

Optimierung für Suchmaschinen

Neben dem geänderten Nutzerverhalten hat die Veränderung der Webgestaltung den anderen Nebeneffekt, dass Websites durch die vielen, großen Bilder (und nun auch noch Videos) immer länger laden und die Gesamtgröße der Seiten immer weiter ansteigt.

Für Desktopnutzer mag der Effekt unschön, aber nicht gravierend sein, jedoch gerade für mobile Seitenbesucher werden die langen Wartezeiten zur Qual und das Trafficlimit des Mobilvertrages ist schnell erreicht.

Ladezeit und Gesamtgröße lassen sich durch responsive Designs reduzieren und erhöhen Komfort, Zufriedenheit und Verweildauer deutlich.

Eine neue Vorgehensweise widmet sich aber einem ganz anderen Problem: Nahezu alle Dateien einer Seite müssen geladen werden, bis die Website dem Nutzer angezeigt wird. Wahrscheinlich kennen Sie selbst Seiten, die für einige Sekunden weiß bleiben (sog. Renderzeit), bis sie anzeigt werden, oder die Elemente beim Laden hin und her springen.
Der Lösungsansatz ist simpel: Zuerst werden nur die Daten geladen, die Above the Fold benötigt werden. Die Seite kann bereits gendert werden und die restlichen Daten laden im Hintergrund nach.

Der zuständige Frontend-Entwickler wird nun mit dem Auge zucken, denn technisch gesehen müssen dafür Style-Angaben in den Header (oberster Teil der Seite) geschrieben werden. Eine Praxis, die lange Jahre verpöhnt war und eigentlich gegen die Standards des Webs verstößt. Zudem kann es eine zeitaufwändige Angelegenheit werden, diese Maßnahme für eine fremde, technisch unstrukturierte Seite durchzuführen, da hier sinnbildlich die Spreu vom Weizen getrennt werden muss. Bei einer durchschnittlichen Seite wird man sich mit ca. 1.000 Zeilen CSS-Code befassen.

In Punkto Suchmaschinenoptimierung lohnt sich der Aufwand jedoch alle male. Die Pagespeed Wertung wird von Google seit einiger Zeit als einer der relevantesten Rankingfaktoren gesehen. Seit Kurzem zählt dazu allerdings auch, besonders mobil, die Renderzeit einer Seite und damit die technische Optimierung Above the Fold. Auf diversen Kundenseiten konnten wir durch Above the Fold Optimierungen bis zu 23 Prozentpunkte in der Pagespeedwertung zulegen und das Ranking in Google verbessern.

Wasserfalldiagramm
Ladezeiten aller Website-Komponenten


Pagespeed Wertung für sq-webdesign.de
Pagespeed Wertung für sq-webdesign.de

Ist Ihre Website bereits optimiert?

Wenn Sie Interesse an einer unverbindlichen SEO Analyse Ihrer Webseite haben,
freuen wir uns auf Ihre Nachricht und ein nettes Gespräch.

Kostenlose SEO Analyse anfordern