« Zurück zu allen Tipps

JavaScript- und CSS-Ressourcen, die das Rendern blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen

Home / Tipps / Above the Fold Optimierung /

Falls Du nur wissen möchtest, wie Du das Problem behebst, findest Du hier die Lösungen.
HTML & PHP Entwickler

Das Problem

Erfahre hier, warum die Ladezeiten deiner Webseite wichtig sind

Wenn Webseiten erstellt werden, ist es eine gute Gepflogenheit den Inhalt der Webseite, das Design und alle aktiven Elemente zu trennen. Dies hat zum einen den Vorteil, dass man als Designer und Entwickler eine gute Übersicht und klare Struktur hat und zum anderen, dass ein Webseitenbesucher einzeln Dateien cachen kann. Cachen steht dabei für das Zwischenspeichern von Dateien auf der Festplatte, so dass die Webseite später schneller geladen werden kann. Das macht Dein Browser von alleine.

Der Nachteil dieser Herangehensweise ist, dass erst alle Dateien heruntergeladen werden müssen, bevor die Webseite angezeigt werden kann. Bei sehr einfachen Webseiten müssen dazu mindestens 3 Dateien heruntergeladen werden: der Inhalt (HTML), das Design (CSS) und die aktiven Elemente (JavaScript). Bei größeren Webseiten können es auch 10 oder 20 solcher Dateien werden. Zusätzlich dazu müssen natürlich auch die Bilder geladen werden.

Die Ladezeit Deiner Webseite kann weiter verzögert werden, falls die Dateien in der falschen Reihenfolge geladen werden. So kann es sein, dass erst Bilder angefordert werden und danach die wichtigen Design-Dateien. Zu guter Letzt gibt es noch die Möglichkeit, dass Daten von externen Servern kommen. Dies ist der Fall z.B. wenn Du Google Analytics in deine Seite integrierst oder wenn du Google Fonts nutzt. Falls die Seiten, die Du eingebunden hast, ihre Daten nur sehr langsam ausliefern, verlängert das Deine Ladezeiten.

Abhilfe schafft hier ein altes Konzept, das ursprünglich aus der Zeitungsbranche kommt: “Above the Fold”. In dem Original spricht man von Above the Fold oder Über dem Knick von dem Teil einer Zeitung, den man sehen kann, wenn die Zeitung in der Auslage in z.B. einem Kiosk liegt. Dieser Inhalt soll natürlich möglichst ansprechen. Für Werbetreibende gilt, dass Werbung auf diesem Teil der ersten Seite teuerer ist als auf anderen Teilen der Zeitung.

In Rahmen des Webdesigns spricht man von der Above-the-Fold-Optimierung, wenn man alle essentiellen Design und aktiven Elemente in den eigentlichen Inhalt integriert. Alle Designinformationen, die Elemente unterhalb des Folds betreffen, werden weiterhin in den externen Dateien ausgelagert. Diese Optimierung ist sehr aufwendig, weshalb sie häufig nicht gemacht wird.

Das Ergebnis der Optimierung ist eine Seite, die schon angezeigt wird, während alle anderen Ressourcen noch im Hintergrund geladen werden. Falls der User schon in dem Above the Fold Teil seine wichtigen Informationen oder Links findet, kann er schnell weiter. Falls er etwas anderes sucht und scrollt, sollten die Informationen in der zusätzlichen Zeit geladen sein.

Die Above the Fold Optimierung durchführen

HTML & PHP Entwickler

Das Konzept der Above the Fold Optimierung ist ein sehr Einfaches. Das kritische CSS und JavaScript sollten aus den jeweiligen Dateien in den <head> kopiert werden. Wichtig ist dabei nur, dass das gesamte kritische CSS und JS kopiert wird. Allerdings muss hierbei eine Abwägung zwischen der Zeit zum Übertragen der zusätzlichen Daten und der eingesparten Zeit der Anfrage gemacht werden. Zudem sollte man bedenken, dass Dateien in kleinen Teilen mit einer Größe von ca. 14 bis 15 kb heruntergeladen werden. Perfekt optimiert ist es, wenn der <head> und der Inhalt über dem Knick in das erste oder die ersten beiden Pakete passt.

 

« Zurück zu allen Tipps