Webseiten-Performance: JavaScript-Dateien mit Google bündeln

Steigende Anzahl an Interaktionen innerhalb einer Webseite sorgt in der Regel für zusätzliche Stylesheets und JavaScript. Im unglücklichen Fall werden gar Frameworks aka “Schwergewichte” herangezogen. Dabei generiert extern ausgelagerter Code je nach Dateimenge weitere Server-Anfragen und verlangsamt den gesamten Ladevorgang. Google’s Werkzeuge reduzieren die Quantität auf ein Minimum – Resultat: Einziger Request bei beliebig vielen JS-Dateien.

JavaScript only
Dieser Artikel fokussiert sich ausschließlich auf die Performance-orientierte Einbindung der JavaScript-Komponenten. Eine gewinnbringende Integration von Stylesheets ins Projekt wird an dieser Stellen nicht behandelt.

Verlangsamte Ausführung durch JavaScript-Dateien
Je nach Komplexität und Funktionsvielfalt einer Website bindet der Entwickler Handvoll an externen JavaScript-Instanzen ins XHTML-Gerüst ein, um Funktionen zur Laufzeit verfügbar und ausführbar zu machen. Ein alltäglicher Prozess.

So nicht: Zuviele Requests schaden dem Ladevorgang der Seite

Ein Szenario aus dem Alltag: Zwei JavaScript-Frameworks werden geladen, plus ein jQuery-Plugin für die Slideshow, SWFObject für die Flash-Einbindung, dazu kommt noch Google Analytics oder anderes Tracking-Tool auf JavaScript-Basis.

An sich nichts, was man nicht braucht. Wenn da nicht die schmerzende Tatsache wäre, dass jede dieser Module (Modul = Datei) den Browser dazu zwingt, sich mit dem Server zu verbinden, um Daten in Form von JavaScript-Zeilen zum Rechner des Nutzers zu transferieren. Das Gewicht der Files und die Anzahl der Bytes ist an dieser Stelle nicht wirklich kritisch (was sein muss, muss sein). Vielmehr ist die Menge der Anfragen als bedenklich zu betrachten, da Browser je nach Typ eingeschränkt parallele Requests bzw. Downloads ausführen können.

Einbettung einer Gesamtdatei mit JS-Code
Je mehr Dateien von der gleichen Domain in eine Seite eingebunden werden (unabhängig vom Typ), desto länger wird im Browser die Warteschlange zum Abarbeiten, um so langsamer ist die Ausgabe. Die Erkenntnis: Idealerweise steckt der komplette JS-Code in nur einer Datei, die einmalig im XHTML referenziert wird – der Browser stellt dafür nur die einzige Verbindung her und kann nebenbei andere Medien wie z.B. Bilder herunter laden. Bringt einen Performanceschub.

Viele der erfahrenen Entwickler praktizieren diese simple Technik: In der Entwicklungsumgebung aus Gründen der Übersichtlichkeit und der Bequemlichkeit an mehreren Dateien arbeiten. Live kommt lediglich die eine Datei zum Einsatz, die aus den separaten JS-Bibliotheken gewonnen und anschließend minimiert (z.B. mithilfe des JavaScript-Compressor) wurde.

Techniken für die Bündelung der JavaScript-Sourcen
Neben dem händischen Kopiervorgang der Zusammenführung von JS-Fragmenten existieren noch weitere Methoden für das Erzeugen einer zentralen JS-Datei. Eine der bewährten Möglichkeiten ist beispielsweise ein dynamisches Load-Script in PHP, welches Dateinamen als Parameter empfängt und entsprechende JS-Files in kombinierter Form an den Browser ausgibt.

Aber auch Google Labs stellt solch zweckmäßige, installationslose Online-Lösungen öffentlich zur Verfügung, welche weiter unten samt Vorteilen praxisbezogen vorgestellt werden.

1. Google Closure Compiler
Closure Compiler ist ein kostenloser Online-Service von Google mit alleiniger Aufgabe, JavaScript-Input komprimiert zu bündeln. Warum bündeln? Das Tool fasst nicht nur die händisch eingefügten JavaScript-Fragmente zusammen, auch gängige Frameworks (jQuery und Prototype zum Beispiel) und extern abgelegte Quellen lassen sich in der Anwendungsoberfläche auswählen bzw. abrufen und fließen so ins Endergebnis mit ein. Nach diesem Prinzip wären die notwendigen Frameworks und der eigene Code in nur einer Datei vereint.

Nach der erfolgreich abgeschlossenen Kompilierung der Rohdaten steht eine Zeichenwüste zum Kopieren und Download bereit.

Pro

• Zusammenführung mehrerer JS-Dateien (eigene, externe, Frameworks)
• Komprimierung der Größe durch Bereinigung des Codes (minify)

Contra

• Entwickler übernimmt das Hosting, Caching, GZIP und CDN

Eigene JS-Inhalte und bekannte Libs mit Closure Compiler gruppieren

2. AJAX API Loader
Seit neustem verfügt Google über einen neuartigen Dienst namens Autoloader, der mehrere APIs zusammenlegt und in komprimierter Datei zurückgibt. Der Autoloader unterstützt auch GET-Parameter und so werden die zum Laden notwendige Module als URL-Aufruf übergeben, Google fast den Code der APIs in einer Datei zusammen. Der praktische Wizard hilft bei der Bündelung der APIs und der Generierung der kryptischen Adresse.

Doch die Vielfalt der möglichen Module beschränkt sich nicht unbedingt auf Google APIs: Die oben bereits erwähnten Frameworks können auf die gleiche Weise via URL-Aufruf gruppiert geholt werden – als Ergänzung eine Übersicht der auf Google verfügbaren Frameworks: Google AJAX Libraries API. Dazu werden lediglich die Namen und Versionsnummer der gewünschten Module angepasst bzw. ergänzt und als Übergabeparameter definiert. Mehr ist an dieser Stelle nicht notwendig.

In folge dessen können schwergewichtige Bibliotheken (dabei bleibt die Anzahl der Files variabel) mit nur einem Request (welcher jedoch Gold wert ist) ins eigene Projekt inkludiert werden.

Pro

• Zusammenführung mehrerer Frameworks
• Komprimierung der Größe durch Bereinigung des Codes (minify)
• GZIP-Komprimierung während der Übertragung
• Übergabe korrekter Cache-Header
• Anbindung an ein CDN

Contra

• Kein eigenes JS möglich, ausschließlich bei Google verfügbare Frameworks
• Abhängigkeit von Google

Google’s Autoloader kann APIs, aber auch Frameworks verbinden

Fazit
Aktuell berücksichtigt Google die Geschwindigkeit der Webseiten als einen nicht unerheblichen Ranking-Faktor, gibt den Entwicklern aber auch ausgereifte und kostenfreie Werkzeuge für diesen Zweck in die Hände. Die Zusammenführung der JavaScript-Dateien ist eine wichtige Schraube im mächtigen Motor der Performance-Optimierung und darf daher nicht “einrosten”.