Ladereihenfolge von Scripts in HTML-Dateien festlegen

Dass der Page-Speed ein Rankingfaktor ist, müsste inzwischen in den meisten Köpfen angekommen sein. Wie man seine WordPress-Installation durch wenige Handgriffe bzw. PlugIns ebenfalls beschleunigen kann, beschrieb ihr vor einige Zeit beispielsweise im Artikel Speed ‘Em Up: WordPress & W3 Total Cache. Dass schnelle Ladezeiten nicht nur (und doch in erster Linie) von schnellen Servern bzw. vom Webspace abhängt, müsste ebenfalls klar sein, sollte man sich mit dem Thema der Beschleunigung seiner Webseite befassen.

Es ist mit WordPress durchaus möglich, seine Seite komplett ohne JavaScripts zu betreiben. Gerade im Bezug auf Social-Network-Features ist es für eine vernünftige Usability sowie auch Nutzung durch die Leser fast unumgänglich Scripte zu verwenden. Facebook führte so nach einigen Wochen der iframe-Nutzung die Möglichkeit ein, beispielsweise den Like-Button asynchron via XFBML-Integration nachzuladen. Für die ebenfalls sehr beliebten Twitter-Buttons via Tweetmeme oder eben von Twitter selbst, fehlte diese Funktion, baute man sie sich mit Hilfe der Dokumentation nicht selbst ein. Mit DiggDigg ist es beispielsweise möglich eine verzögerte Ladereihenfolge einzustellen, zumindest was die eigenen Script der jeweiligen Anbieter angeht. Nicht zu vergessen der aktuelle Google-Analytics-Code, der ebenfalls asynchron geladen wird.

Nutzt man nun ebenfalls Scripte beispielsweise in seinem Header, wie die guten MooTools, weiches Top-Scrollen oder was man eben noch alles als Script einbinden könnte, möchte man wohlmöglich eine andere Ladereihenfolge für den möglichst schnellen Seitenaufbau verwenden. Spätestens wenn ihr eure Seite auf HTML5 aufbaut, wird dies für euch eindeutig ein zu beachtendes Thema werden. Dabei ist es grundsätzlich für WebKit-/Konqueror- (bspw. Safari, Chrome) und Mozilla-Browser (Firefox) nicht sonderlich schwer umzusetzen. Für Mozilla-Browser sollten einige Attribut-Hinweise beachtet werden, bevor man mit einer veralteten Gecko-Engine nicht die gewünschten Ergebnisse beim Testing erzielt.

Üblicherweise würdet ihr die Script-Zeile folgendermaßen einbinden:

<script type="text/javascript" src="js/datei.js"></script>

Nun gibt es zwei nützliche Attribute, die mit async ein asynchrones, nächstmögliches Laden bestimmen und mit defer den Ladevorgang nach dem gesamten Vorgang für die weiteren Elemente vorsehen. Mit dem Attribut defer werden die Scripte in der Reihenfolge geladen, wie sie im Code hinterlegt wurden.

Für HTML5-Codes würden die Scriptzeilen beispielsweise folgendermaßen aussehen:

<script type="text/javascript" async src="js/datei.js"></script>
<script type="text/javascript" defer src="js/datei.js"></script>

Und für XHTML-Dokumente folgendermaßen:

<script type="text/javascript" async="async" src="js/datei.js"></script>
<script type="text/javascript" defer="defer" src="js/datei.js"></script>

Seit dem Microsoft Internet Explorer 4 (IE4) ist das Attribut defer ebenfalls auch für diesen Browser nutzbar. Für den IE9 wird ziemlich sicher auch das Attribut async folgen. Mit diesen einfachen Angaben ist es euch ebenfalls möglich den offiziellen Twitter-Button ohne große Umwege unabhängig vom weiteren Content verzögert bzw. erst nach dem grundsätzlichen Aufbau zu laden. Beachtet bei diesen Methoden nur möglichst, dass ihr Funktionen eurer Seite, die grundlegend für dessen Betrieb unabdingbar sind, nicht erst zu allerletzt geladen werden. Es bietet sich hier an bestimmte Funktionen von anderen, eher vernachlässigbaren zu trennen. So muss das besagte Top-Scroll-Script, sei es noch so klein, mit Sicherheit nicht als erstes oder noch vor dem Content geladen werden.