Wenn es um Ladegeschwindigkeit von Webseiten geht, stolpert man häufig über den Begriff „above the fold“. Dies sei zu optimieren.
Doch was ist eigentlich „above the fold“ und wie verbessert man den Wert?
Die Hintergründe von „above the fold“
Tatsächlich kommt der technisch genutzte Begriff aus dem klassischen Print-Journalismus. Üblicherweise sind Tageszeitungen in der Mitte gefaltet; der obere Teil der Zeitung wird ausgestellt, der untere Teil ist nicht sichtbar.
Besonders wichtige Informationen bzw. das Titelthema sind auf der Zeitung „above the fold“ – über der Faltung. Das gleiche Prinzip übernimmt das Webdesign.
In diesem Fall geht es natürlich nicht um das tatsächliche Falten von Inhalten. Aber das Prinzip ist identisch: Man macht sich bewusst, welche Inhalte sichtbar sind, wenn man die Seite aufruft: Was sind quasi die „Titelinhalte“ der einzelnen Seite?
In Folge dessen sorgt man selbst oder mit Hilfe eines Plugins dafür, dass nur die CSS- und JavaScript-Dateien geladen werden, die für die Inhalte „above the fold“ notwendig sind. Somit kann der Inhalt schneller angezeigt werden. Alle weiteren Inhalte für die nicht sichtbaren Bereiche sollen erst verzögert geladen werden.
Umsetzung der Optimierung
So einfach das Prinzip „above the fold“ klingt, so schwierig ist es gerade in WordPress-Webseiten umzusetzen. Auslöser sind hierfür sind die diversen Plugin- und Theme-Autoren. Diese bringen für ihre Erweiterungen eigene CSS- und JavaScript-Dateien mit, um eigene Designs oder Funktionen umzusetzen. Nur in äußersten Ausnahmefällen liegen mehrere Dateien vor, die sich in „sehr wichtig, muss zuerst geladen werden“ und „sekundär, kann später geladen werden“ unterteilen. Stattdessen gibt es nur eine Datei.
Dies bedeutet, dass man nicht die einzelnen Inhalte unterteilen kann in „above the fold“ und „below the fold“ – also außerhalb des initialen Sichtbereichs.
Selbstverständlich kann man mit gehörig Aufwand die einzelne Datei analysieren und wichtige Inhalte vom Rest auslagern. Das wird aber einem zum Nachteil, wenn ein Update für das Plugin oder Theme rauskommt und so wieder die Gesamt-Dateien ausgeliefert werden.
Man kann auch die gesamte Datei verzögert laden – mit dem Nachteil, dass sie vielleicht doch wichtige Informationen beinhaltet, die dann eben anfangs nicht zur Verfügung stehen.
Hilfs-LÖsung Plugins
Einige Plugins zur Ladezeitoptimierung bieten eine automatische Analyse von Inhalten above the fold. Unter Anderem bietet dies Autoptimize oder auch WP Rocket. Sie scannen die Seite und die geladenen Dateien, können diese in Verbindung bringen und erkennen, welche Inhalte wann geladen werden.
Manchmal funktioniert dies besser, mal schlechter. Gerade bei JavaScript-Dateien kann das manchmal Probleme mit sich bringen.
Fazit
„Above the Fold“ ist eine richtige und sinnvolle Denkweise: Inhalte und Dateien erst dann laden, wenn sie benötigt werden.
In WordPress ist man aber immer abhängig von externen Autoren. Wenn man nicht selbst ein Plugin oder Design schreibt, kann man sich mit Automatismen helfen lassen. Häufig kommt man dennoch um Tests nicht herum, die sich aber lohnen können.