Inhalte above the Fold priorisieren

Website Ladezeiten testen und optimieren – Teil 2

Der Daumenwert für eine gute Web Performance liegt bei ca. 1-2 Sekunden für den Pageload der Inhalte above the Fold (sichtbarer Bereich ohne zu scrollen) . Wird dieser Wert überschritten, erhört sich die Bouncrate (Absprungrate) signifikant und der User versucht sein Glück woanders. Diese Zeitspanne bezieht sich aber nicht auf eine komplett fertig geladene Website. Sie beziehen sich vielmehr auf die Zeit in der nur ein weißes Browserfenster zu sehen ist. Das Ziel liegt also darin, den Pageload innerhalb von max. 2 Sekunden soweit abgeschlossen zu haben, dass die Inhalte above the Fold fertig geladen sind.

Die wichtigsten Bestandteile above the Fold priorisieren

Javascript und CSS inline setzen – Das Rendern der Inhalte beschleunigen

Wer die Ladezeiten seiner Seite schon getestet hat, hat vermutlich den Hinweis erhalten, das Javascript oder CSS das Rendern der Seite blockieren. Das klingt kompliziert, ist es aber nicht. Eigentlich bedeutet das nur, dass ein CSS oder Javascript geladen werden muss um den Inhalt „above the Fold“ anzeigen zu können und dafür zu lange brauchte.

Angenommen, die Navigation im Head-Bereich wurde mit einem Jquery „garniert“ oder das Hintergrundbild für den Kopfbereich wird über ein CSS eingebunden. Dann müssen diese Scripte – in denen die Teile des Head-Bereichs „schlummern“ – erst vollständig geladen sein um den Head-Bereich anzeigen zu können. Laden sie zu langsam, z.B. weil sie sehr groß sind, wartet der Browser auf diese Scripte und das Rendern der restlichen Inhalte verzögert sich. Um diesem Problem Herr zu werden müssen diese Teile des Scripts oder des CSS inline gesetzt werden. Das heißt, in den Quelltext der Seite vor </head>… und das war’s.

Im Ergebnis könnte das dann ungefähr so aussehen.
Anstatt auf das vollständige laden des CSS oder Javascript zu warten um den Head-Bereich anzuzeigen, werden die wichtigsten „Bruchstücke“ vor dem Rest der Scripte geladen. Der Teil „above the Fold“ kann also ohne weitere Verzögerung angezeigt werden. Es sollten aber nur die Teile des CSS oder Javascript inline gesetzt werden, die „above the Fold“ gebraucht werden.

Den Rest des Stylesheet, also die Teile die nicht für die unmittelbare Anzeige benötigt werden, können ganz nach unten verschoben werden, nach </HTML>.