MarketingRadar

Above-the-fold oder warum Ladegeschwindigkeit den Webseitenerfolg beeinflusst?

AFT, „above-the-fold-time“  – auch wenn dieser Ausdruck häufig Verwendung für Inhalte von Webseiten Verwendung findet, stammt diese Formulierung ursprünglich aus dem Bereich der Druckerei. Druckerzeugnisse die bspw. in der Mitte gefaltet werden, gewährt lediglich der obere Bereich des Druckerzeugnissen Einblick auf die Inhalte, bspw. bei einer gefalteten Tageszeitschrift. Wer am Kiosk die vorbeilaufenden potentiellen Leser erreich möchte, muss also in diesem Bereich die Aufmerksamkeit der Zielgruppe erreichen. Womit wir dann auch die Brücke von der Offline- zur Online-Welt geschlagen hätten. Denn auch auf Webseiten ist der Bereich „above the fold“ essentiell für eine positive User-Experience.

Zeitschriften - above-the-foldZeitschriften above the fold in der Offline-Welt

Einer der wichtigsten Punkte in diesem Zusammenhang ist die Ladegeschwindigkeit. Daher werden wir m weiteren Verlauf des Artikels näher auf die technischen Aspekte der Umsetzung einer optimierten Ladezeit für den Bereich „above the fold“ eingehen. Dem veränderten Nutzungsverhalten geschuldet, von Desktop hin zu Mobile, gibt je nach Ära verschiedene Ansätze die wir euch nun etwas näher vorstellen werden.

Früher: Warum „above-the-fold“ in der Desktop-Ära anderen Regeln folgte?

Die Ladezeit des oberen Seitenbereichs war aus Gründen der User-Experience schon immer, aber mindestens seit dem Tag wichtig, an dem Google das Thema Ladezeit zum relevanten Rankingfaktor auserkoren hat. Auf dieser „Ablenkung“ des Nutzers basiert die von Google propagierte sogenannte Optimierung des kritischen Rendering Pfads. Auf dieser „Ablenkung“ des Nutzers basiert die von Google propagierte sogenannte Optimierung des kritischen Rendering Pfads. Die Methode besteht darin, dass die Inhalte, die „above-the-fold“ erscheinen müssen, auf spezielle Art und Weise wie möglich schnell zu laden. Das folgende Beispiel soll aufzeigen warum dies so immens wichtig ist.

Webseite - above-the-foldWebseiten – above the fold (oberhalb der Linie) in der Online-Welt

Wie im Beispiel hoffentlich gut zu erkennen ist, ist der „above-the-fold“ Bereich der Webseite oberhalb der Linie, nur ein kleiner Teil der gesamten Webseite. Der inhaltlich (Text, Anzahl der Bilddateien, …) als auch strukturell (HTML, CSS) und funktionell (JavaScript) wesentlich umfangreichere untere Teil der Webseite befindet sich „below-the-fold“, also unterhalb des für den Nutzer initial sichtbaren Bereiches.

Um eine schnelles und nutzerzentriertes und performance-optimiertes Ladeverhalten zu gewährleisten, musst man in der Desktop-Ära folgende Aspekte berücksichtigen:

  • Vermeidung von HTTP-Requests bzw. Elemente, die das Rendering blockieren – Javascripte und Style-Regeln sollten inline implementiert werden, die Bilder – besser als data:image/base64, als per IMG-Tag,
  • Minifizierung der HTML-Datei – alle Kommentare, Zeilenumbrüche etc. sollten entfernt werden, damit die Datei bloß schneller gelesen und dargestellt wird,

Alle Ressourcen, die nicht zum „above-the-fold“ Bereich gehören, werden am Ende der HTML-Datei implementiert und eventuell zeitversetzt geladen.

Heute: Warum „above-the-fold“ in der Mobile-Ära einfach nur schnell sein muss?

Nach dem Paradigmenwechsel zu der MobileFirst-Indexierung nimmt die Ladezeit des above-the fold Bereichs dramatisch an Bedeutung. Warum? Weil die aktuelle Dokumentation von Google über die Aufbereitung und Auslieferung mobiler Webseiten die Planke in jeder Hinsicht sportlich ansetzt. So lautet die Empfehlung, dass „above-the-fold“ Inhalte unter einer Sekunde ausgeliefert und gerendert werden sollten. Dies ermöglicht dem Benutzer eine schnellstmögliche Interaktion mit der Seite. Stellt euch diese Geschwindigkeit nur vor – eine Sekunde, und der sichtbare Bereich muss schon fertig geladen sein! Und das mit der teilweise kläglichen Abdeckung von LTE-Netz, unsägliche Latenzen, usw. usw. 

… denn was nicht gemessen werden kann, kann auch nicht optimiert werden

Entsprechend wird auch die genaue Messung dieser Ladezeit enorm wichtig – denn was nicht gemessen werden kann, kann auch nicht optimiert werden. Auch würde die ATF-Messung die Interpretation vom ladezeitbezogenen Bouncerate viel aussagekräftiger und genauer machen. Eine mögliche Methode wäre hier die sekundengenaue Messung von Bounces mit dem Abgleich der Ladezeit, in welcher der „above-the-fold“ Bereich bereitgestellt wurde. Es gibt jedoch keine Methode der AFT-Messung, die einheitlich und überall angenommen wäre. Wir geben in diesem Artikel einen Überblick über die Sichtweisen auf das Thema und aktuelle Ansätze der AFT-Messung, die wir bei der Recherche nach den vorhandenen Möglichkeiten getroffen haben.

Eine ideale Welt würde in Google Analytics im Rahmen des Ladezeit-Berichts außer PLT (page load time) auch die AFT (above the fold time) darstellen. Wir sind aber noch ein kleines Stückchen von der idealen Welt entfernt.

Wie misst man die „above-the-fold-time“?

eigentlich beginnen die Komplikationen nicht mit der Messung selbst, sondern bereits bei der Definition. Zu dieser Frage gibt es folgende Äußerungen:

Jahr 2011: Erste Annäherung an die Definition und Messung der above-the-fold Ladezeit – Eine Präsentation (PDF) von Jake Brutlag (Google), Zoe Abrams (FB) und Patrick Meenan (jetzt Google, der „Papa“ von webpagetest.org). Der Ansatz der Messung ist: den Ladevorgang per Video aufzunehmen und so die AFT-Messung hinzubekommen. So formulieren die Entwickler, wie sie den „above-the-fold“ Bereich vermessen:

Step 1: Specify an upper bound, the AFT cutoff time, on the page load

  • Function of connection speed/quality, i.e. 45 s for DSL

Step 2: Classify pixels as static or dynamic

  • Static = pixels that change < 5 times and don’t change after AFT cutoff
  • Dynamic = pixels that change ≥ 5 times and keep changing after AFT cutoff
  • Capture video for period > AFT cutoff to identify dynamic pixels with confidence

Step 3: AFT = latest change of a static pixel before the AFT cutoff

Jahr 2012: Speed Index von Webpagetest – funktionierende Messung, basiert auf Video – Die Weiterentwicklung von Patrick Meenan namens Speed Index (April 2012), die seitdem von Webpagetest.org eingesetzt wird.

Jahre 2016-2018: Heuristische und weitestgehend genaue Auswertungen auf Basis von DOM-Elementen – Eine weitere Aussage, sowie eine funktionierende Implementierung, kommen aus Télécom ParisTech, einer Pariser Ingenieurschule, von der Entwicklergruppe hinter Dario Rossi, dem Professor an ParisTech und, Diego da Hora, dem Gewinner des diesjährigen Programmierwettbewerbs. Eine Kurzbeschreibung, sowie zwei Dokumente, A practical method for measuring Web (aft) und Narrowing the gap between QoS metrics and Web QoE using aft metrics, beschreiben das Vorgehen der Entwickler. Die praktische Realisierung ist eine Chrome Erweiterung, die die AFT misst und samt einiger anderen Parametern in die Console ausgibt. Ein sehr gelungenes Mess-Werkzeug, das die Logs auch speichern kann! Die Erweiterung sollte am besten im Developer Mode aus dem GitHub der Entwicklergruppe installiert werden. Das Console-Output der Messung (erfolgt in Millisekunden) sieht wie folgt aus. Die Kommentare sind von uns.

DOM: 3081.00 /* DomContentLoaded */
II_plt: 3090.58 /* ImageIndex von Page Load Time */
II_atf: 3089.87 /* ImageIndex von Above The Fold Time */
OI_plt: 3449.18 /* ObjectIndex von Page Load Time */
OI_atf: 3218.52 /* ObjectIndex von Above The Fold Time */
BI_plt: 3090.58 /* ByteIndex von Page Load Time */
BI_atf: 3089.87 /* ByteIndex von Above The Fold Time */
ATF_img: 1833.80 /* Ladezeit der Bilder von Above The Fold Time */
JS: 4505.00 /* Ladezeit der Javascripte */
CSS: 3819.50 /* Ladezeit der Stylesheets */
PLT: 6248.00 /* Page Load Time, ganze Seite */
ATF: 3819.50 /* Above The Fold Time */

ObjectIndex (Anzahl der geladenen DOM-Elemente), sowie ByteIndex (Anzahl der geladenen Bytes) für Above The Fold Time und Page Load Time wurden als Metriken bereits in der Arbeit von 2016 definiert, als Alternativ-Metriken zum Google’s SpeedIndex. Ihre Plätze auf der schematischen Zeit-Scala sind auf dem folgenden Bild zu sehen:

Das Konzept der Messung von Diego da Hora in Kürze:

We approximate the Approximated Above-the-Fold (AATF) time from the browser itself without requiring image processing. We leverage the browser’s ability to determine the position of objects inside a fully rendered page and the recorded loading times of HTTP requests. First, we detect all the elements of the Webpage and the browser window size. Then, we trace loading time and resource type for all HTTP requests, and determine which objects are rendered „above-the-fold“. To do so, we use simple heuristics to classify resource types between images, JavaScripts (JS), CSS, HTML, etc. For objects that are directly rendered (e.g., of the image class), the coordinates make it obvious whether they are, at least partly, „above-the-fold“.

Fazit – „above-the-fold-time“ ist keine leichte Kost

Wir sehen – eine einfache Lösung, die out-of-the-box funktioniert und womit wir Google Analytics öffnen und die Zahlen sehen, ist aktuell nicht in Sicht. Es gibt jedoch einen praktischen Ansatz, der genau das ermöglicht: die Ladezeiten von „above-the-fold“ Bereich in und mit Google Analytics abzubilden. Daher noch folgendes abschließendes Goodie …

Wie misst man die „above-the-fold-time“ mit Google Analytics?

Das Vorgehen basiert auf dem Reporting von User Timing mit events als custom events in Google Analytics. Die Idee und den Code der Support Routine stammen von Patrick Meenan. So beschreibt er die Eckdaten der Idee und gibt in seinem Artikel praktische Anweisungen zur Implementierung. Zwei nützliche Anleitungen, die das Vorgehen von Patrick Meenan erläutern, sind in den Blogs von ConstantContact und von Dareboost nachzulesen.

Evgeniy Orlov

Evgeniy Orlov ist Senior SEO Consultant bei mediaworx berlin AG. Er hilft Unternehmen schnelle und effektive Seiten zu bauen, die von den Nutzern geliebt und von Google respektiert werden. Die Highlights in seinem Repertoire sind Indexierungsmanagement, Performance Optimierung, Data Mining sowie die Lösung außergewöhnlicher technischer Fragestellungen.

Newsletter-Anmeldung