PageSpeed

Als ich vor kurzem nach weiteren Optimierungs-Tools gesucht habe, bin ich über das PageSpeed Modul gestolpert. 2011 wurde es erstmals auf der Google I/O Konferenz vorgestellt. Ziel dieses Moduls ist es CSS, JavaScript, HTML und verwendete Bilder zu analysieren und ggf. für einen schnelleren Seitenaufbau zu optimieren. PageSpeed ist für den Apache Webserver in Version 2.2 und 2.4, sowie für den Nginx verfügbar.

Beim Apache Webserver ist das PageSpeed Modul nach einer Installation automatisch aktiviert. Bei dem Nginx sind weit mehr Arbeitsschritte notwendig.

Den Nginx kann man sehr leicht über das Paket-Installations System (Ubuntu) installieren. Sobald man aber weitere Module aktivieren will, muss man den Nginx Webserver von der Quelle her neu kompilieren und das weitere gewünschte Modul im Installationsprozess angeben.

Sobald PageSpeed erfolgreich aktiviert wurde, kann man auf eine Vielzahl von Funktionen zugreifen.
Die aktivieren Module kann man sich mittels folgendem Befehl anzeigen lassen:

nginx -V

Anfragen verringern

Die Performance einer Webseite ist von mehreren Faktoren abhängig:

• Größe der verwendeten Dateien (Bilder, JavaScript, CSS)
• Anzahl der verwendeten Dateien (Bilder, JavaScript, CSS)
• uvm.

Auf einen Punkt mag ich aber näher eingehen, da das vorgestellte Modul es sehr gut umsetzt. Es verringert die Verbindungen um die Webseite erfolgreich zu laden. Die Browser können mehrere Dateien gleichzeitig laden, welches sich auf die Geschwindigkeit der Webseite auswirkt.

Die folgende Auflistung zeigt welche Browser wie viele parallele Anfragen absetzen können.

Das PageSpeed Modul kann sehr gut Dateien zusammenfassen, womit der Browser Anfragen spart und die Webseite schneller macht.

Verschiedene Hintergrundbilder werden zu einer Datei erstellt und die Positionen in der CSS Datei neu berechnet. Unterschiedliche CSS Dateien werden zu einer Datei zusammengefasst und komprimiert. Das gleiche geschieht auch noch mit unterschiedlichen JavaScript Dateien.

Falls kleine JavaScript oder CSS Dateien vorhanden sind, werden diese direkt in die Webseite selber hineingeschrieben, womit wieder eine zusätzliche Anfrage gespart wird.

PageSpeed in Aktion

Bei meiner kleinen Webseite werden ohne dem PageSpeed Service 51 Dateien benötigt (1,28 Sekunden).

Sobald der Service aktiviert wurde und das Modul zum aggregieren der CSS und JavaScript Dateien aktiviert worden ist, werden nur noch 41 Dateien (1,16 Sekunden) angefragt. Neben dem verbinden der Dateien wurden auch Leerzeichen aus den Dateien und HTML Seite entfernt und somit die Dateigröße verringert.
Dies ergab eine Verbesserung der Geschwindigkeit von 10% (0,12 Sekunden).

Weitere Verringerung der Anfragen und somit auch eine schnellere Auslieferung der Webseite kann man erreichen, sobald die verwendeten Hintergrundbilder der Webseite zu einem großen Bild verbindet werden.

Analyse-Tools

Es wurden nun einige Optimierungen vorgenommen. Analyse-Tools zeigen auf, welche man noch beachten sollte. Dazu wurde PageSpeed Insight, ein Online-Tool und Browser Plug-Ins (Firefox, Chrome) veröffentlicht.

Sie zeigen detailliert auf, welche Schritte noch umgesetzt werden können und welche Punkte bereits umgesetzt sind.

Fazit

Das PageSpeed Modul von Google ist eine großartige Funktionserweiterung, welche sich sehr gut auf die Performance der Webseite auswirkt. Parallele Anfragen werden auf das höchste Maß optimiert und die Menge der Daten komprimiert.