Im letzten Teil der Artikelserie haben wir uns mit der richtigen Platzierung von Stylesheets (CSS-Dateien) im HTML-Code der Webseite beschäftigt. Heute widmen wir uns dagegen der Platzierung von JavaScript-Dateien. Wie und wo soll man JavaScript-Dateien aus Performance-Sicht einbinden? Neben einer ausführlichen Erklärung gibt es unter anderem auch Best-Practice Tipps speziell für WordPress.
Dieser Artikel ist Teil der Guideline WordPress Performance.
Mit der Einbindung von externen JavaScript-Dateien (Inline JavaScript wird im nächsten Artikel behandelt) gehen zwei entscheidende Probleme einher:
- Externe JavaScript-Dateien am Anfang der HTML-Seite blockieren in den meisten Browsern den parallelen Download von nachfolgenden Ressourcen
- Blockieren das progressive Rendering der Seite (deladene Elemente werden inkrementell, also Stück für Stück, im Browser angezeigt)
JavaScript blockiert den parallelen Download und das progressive Rendering
Ein gutes Beispiel für die obig beschriebenen Probleme findet sich auf der Webseite von Steve Souders, wo innerhalb des HTML-Dokuments eine externe JavaScript-Datei mit einer Verzögerung von 10 Sekunden geladen wird:
Beispiel – JSMiddle (Achtung: Beispielseite mindestens 10 Sekunden betrachten)
Auch die Simulation einer Webseite, wo unmittelbar zu Beginn die JavaScript-Datei und anschließend fünf Bilder im Body der HTML-Datei geladen werden, zeigen die Blockierung des Downloads der anderen Dateien sehr deutlich:
Die JavaScript-Datei unterbindet im Mozilla Firefox das Herunterladen der Bilder solange, bis der JavaScript-Code vollständig heruntergeladen, geparst und gerendert wurde. Erst dann kann das Herunterladen der anderen Komponenten (zu sehen am farbigen Balken) starten.
Das beschriebene Szenario hat einen ganz entscheidenden Nachteil: Werden JavaScript-Dateien ganz am Anfang platziert, dann wird das Herunterladen von alle weiteren Elemente der Webseite und das progressive Rendering blockiert.
Um ebendiesen Effekt zu unterbinden, sollten alle JavaScript-Dateien stets am Ende der Seite geladen werden. Dadurch wird der parallele Download von anderen Ressourcen und das progressive Rendering nicht blockiert, wodurch die anderen Elemente früher auf der Seite angezeigt werden. In unserer Simulation würde dass dann wie folgt aussehen:
Neben dem reinen Effekt, dass die Seite für den Benutzer früher sichtbar ist, wird auch die Seitenladezeit erheblich reduziert, da die JavaScript-Datei keine weiteren Ressourcen mehr vom Download blockiert und der verwendete Browser (Firefox Version 30) den parallelen Download von 6 Komponenten des gleichen Hostnames (Domain) erlaubt. Zur besseren Nachvollziehbarkeit hier noch die Tests der zwei Beispiele auf WebPagetest:
Firefox: JavaScript im Header (vor den Bildern)
Firefox: JavaScript am Ende (nach den Bildern)
Warum blockiert der Browser bei einer externen JavaScript-Datei den parallelen Download von weiteren Elementen?
Diese offensichtliche Frage ist relativ leicht zu beantworten: Die JavaScript Datei blockiert – nicht in allen Browsern wie wir sehen konnten – den Download von weiteren (nachfolgenden) Ressourcen der Webseite, da das Skript unter Umständen Änderungen an der Seite selbst oder den JavaScript-Namespaces durchführen könnte, was Einfluss auf alle nachfolgenden Ressourcen hat. Folgendes Beispiel erklärt das sehr anschaulich:
Beispiel: Eine Webseite lädt insgesamt zwei JavaScript-Dateien: A.js und B.js. B.js ist allerdings auf A.js angewiesen und würde ohne dieser Datei einen JavaScript-Fehler verursachen. Würde der Browser jetzt beim Download von A.js nicht dafür sorgen, dass der Download von B.js blockiert wird, dann könnte es unter Umständen vorkommen, dass B.js bereits vor A.js ausgeführt wird und dadurch einen JavaScript-Fehler verursacht.
JavaScript mit WordPress am Ende laden – Plugins
Wie bereits angedeutet, sollten aus den obig genannten Gründen alle JavaScript-Dateien wenn möglich (beispielsweise wenn keine document.write Aufrufe vorhanden sind) erst im unteren Bereich des HTML-Dokuments geladen werden.
Eine Möglichkeit dies zu realisieren, bietet das Plugin Autoptimize, welches bereits im Artikel Reduzierung von HTTP Requests Anwendung fand. Das Plugin verschiebt die (zusammengefasste) JavaScript-Datei automatisch vor das abschließende BODY-Tag und fügt zusätzlich das SCRIPT DEFER Attribut an.
Möchten Sie das allerdings aktiv verhindern, dann steht Ihnen die Option „Erzwinge JavaScript in <head>“ bereit, wovon aus Performance-Sicht allerdings abzuraten ist.
Das SCRIPT DEFER Attribut, welches im HTML-Code angegeben wird
<script defer src="https://blog-it-solutions.de/script.js" ></script>
teilt dem Browser mit, dass die JavaScript-Datei nicht sofort benötigt wird und erst ausgeführt werden soll, wenn die Seite fertig geparst ist.
Auch wenn JavaScript-Dateien in den Footer verschoben und mit dem DEFER-Attribut versehen werden, bedeutet das nicht zwangsläufig, dass die Dateien erst ganz am Ende geladen werden. Vielmehr bestimmt der genutzte Browser, wann eine JavaScript-Datei geladen wird. Das Wasserfall-Diagramm von WebPagetest für Blog IT-Solutions zeigt diesen Fall ganz deutlich:
Obwohl der Verweis auf die JavaScript-Datei erst im Footer hinterlegt ist, entscheidet der Firefox-Browser, dass die Datei bereits an vierter Stelle geladen werden soll.
Neben Autoptimize können Skripte auch mit anderen Plugins, wie beispielsweise W3 Total Cache (W3TC), daran gehindert werden den weiteren Download von Inhalten zu blockieren. Die Einstellungen in W3TC finden sich unter Performance -> Minify -> JS.
Fazit
Im Vergleich zu CSS-Dateien ist die richtige Platzierung von JavaScript-Dateien etwas komplizierter, da man unter anderem prüfen muss, ob es überhaupt möglich ist, dass eine JavaScript-Datei in den Footer der HTML-Datei verschoben werden kann. Ist es allerdings möglich, dann bietet die Anpassung der Ladereihenfolge eine schöne und schnelle Möglichkeit, die Performance der eigenen WordPress Webseite zu steigern.