Website Performance

2 HTTP-Requests verringern

Moderne Webseiten bestehen aus einer Vielzahl von Elementen. Dazu gehören Grafiken ebenso wie CSS- und JavaScript-Dateien. Jedes Mal, wenn eine Webseite aufgerufen wird, löst dies eine Vielzahl an HTTP-Requests aus. Und die Anzahl eben jener HTTP-Requests gilt es zu verringern. Dafür bieten sich ganz unterschiedliche Möglichkeiten an, die in diesem Kapitel vorgestellt werden. An dieser Stelle geht es übrigens ausdrücklich nicht um die technischen Abläufe, die sich hinter HTTP-Requests verbergen. Wenn Sie sich für dieses Thema interessieren, werden Sie beispielsweise auf der Seite http://de.wikipedia.org/wiki/Hypertext_Transfer_Protocol fündig. Entscheidend ist dabei Folgendes zu wissen: Für jedes Element der Seite – also Bild, JavaScript- und CSS-Datei – muss eine neue HTTP-Verbindung zwischen Client und Server geöffnet werden. Da Browser nur eine bestimmte Anzahl an HTTP-Requests parallel öffnen können, müssen diese seriell abgearbeitet werden, was natürlich länger dauert.

2.1 Die Anzahl der Requests verringern

Bei jedem Seitenaufruf sind HTTP-Anfragen die größte Bremse, die sich aber auch am leichtesten lösen lässt. Daher finden Sie die passenden Tipps dazu nicht nur in diesem, sondern auch in den weiteren Kapiteln des Buchs. Das Problem der HTTP-Requests ist schlicht und ergreifend, dass mit diesen sehr viel Zeit verloren geht. So müssen beispielsweise bei jeder Anfrage die Header-Informationen zwischen Client und Server ausgetauscht werden. Der Client schickt diese Informationen an den Server, der sie wiederum zurück an den Client sendet.

Bevor man die Anzahl der HTTP-Requests verringert, sollte man zunächst einmal überprüfen, wie groß deren Anzahl beim Aufruf der eigenen Seite tatsächlich ist. Ein gutes Tool, mit dem sich dieser Aspekt untersuchen lässt, steht kostenlos auf der Seite http://tools.pingdom.com/ zur Verfügung. Dort gibt man den URL der zu überprüfenden Seite an.

Abbildung 2.1: Hier lassen sich u.a. die Requests überprüfen

Als Ergebnis erhält man zunächst einmal u.a. die Gesamtanzahl der Requests. Noch detaillierter kann man sich die Requests im Register Page Analysis im Bereich Request Analysis anzeigen lassen, wo sie nach folgenden Typen sortiert sind:

• Image
• Script
• CSS
• Other
• Plain text
• HTML

In dieser Übersicht können Sie dann beispielsweise sehen, wie viel Requests durch eingebundene Skripte und CSS verursacht werden. Das kann ein erster Ansatzpunkt für eine Optimierung bzw. Reduzierung der Requests sein. Noch deutlicher wird dieser Aspekt, wenn man sich im selben Register den Bereich Requests per Domain anschaut. Dort dürften die meisten Requests sicherlich von Ihrer eigenen Domain stammen. Danach werden die Requests externer Domains aufgeführt. Was hier letztendlich zu sehen ist, hängt davon ab, welche externen Dienste Sie nutzen. Ganz typisch ist beispielsweise der Eintrag www.google-analytics.com, der immer angezeigt wird, wenn man Google Analytics nutzt. Überprüfen Sie, ob tatsächlich alle geschalteten Dienste benötigt werden, die zusätzliche Requests verursachen. Insbesondere sollten jene, die Content-Management-Systeme verwenden, überprüfen, welche installierten Extensions Kontakt „nach außen“ herstellen.

Nach der Analyse geht es um die Reduzierung der HTTP-Requests. Hierfür gibt es verschiedene Möglichkeiten:

• Dateien kombinieren
• Bilder zusammenfassen
• CSS-Sprites verwenden

Diese und weitere Möglichkeiten werden in dem aktuellen und weiteren Kapiteln vorgestellt. Zunächst aber geht es um einen anderen Aspekt: Warum sind viele HTTP-Requests eigentlich problematisch, wo es doch mittlerweile schnelle Onlineverbindungen gibt? Schließlich könnten die verschiedenen Dateien, welche die Requests verursachen, auch parallel heruntergeladen werden. Das funktioniert allerdings aufgrund der Browser-Konfigurationen nicht. Browser können in aller Regel nämlich nur eine sehr begrenzte Anzahl an Dateien parallel herunterladen. Sie erinnern sich an den bereits vorgestellten Web-Dienst http://www.webpagetest.org/? Auf dieser Seite kann man sich die sogenannte Waterfall-Grafik anzeigen lassen. Und diese illustriert, in welcher Reihenfolge die einzelnen Dateien heruntergeladen werden. Anhand dieser Grafiken wird somit der parallele Download der Dateien deutlich.

Abbildung 2.2: Hier sieht man die Download-Reihenfolge

Die Browser begrenzen die Zahl der maximal erlaubten Server-Verbindungen. Im Firefox-Browser sind das standardmäßig sechs parallele Verbindungen. Dasselbe gilt auch für Chrome. Im Internet Explorer ist diese Anzahl sogar auf zwei parallele Downloads begrenzt. Opera ermöglicht den parallelen Download von bis zu acht Dateien.

Wie viele Downloads in Ihrem Browser möglich sind, können Sie überprüfen. Wie das für den Internet Explorer funktioniert, wird auf der Seite http://support.microsoft.com/kb/282402 gezeigt.

Im Firefox-Browser lassen Sie sich zunächst die aktuelle Konfiguration anzeigen.

Der Warnhinweis „Hier endet möglicherweise die Gewährleistung.“ kann mit „Ich werde vorsichtig sein, versprochen!“ übersprungen werden.

Abbildung 2.3: So wird die Konfiguration aufgerufen

Suchen Sie nach dem Eintrag network.http.max-persistent-connections-per-server und klicken Sie diesen doppelt an. Sollten Sie bislang noch keine Änderung an der Konfiguration vorgenommen haben, ist dort der Wert 6 zu sehen.

Abbildung 2.4: Momentan sind sechs parallele Verbindungen möglich

Diesen Wert können Sie anpassen und so den parallelen Download von mehr als sechs Dateien ermöglichen ... und damit das Herunterladen der Seiten möglicherweise beschleunigen. Das Problem dabei: Für die Performance Ihrer eigenen Seite bringt das natürlich nichts, denn schließlich wird sich nur ein Bruchteil Ihrer Besucher in die Tiefen der Browser-Konfiguration begeben. Entscheidend für die Performance sind verschiedene Faktoren, um die es in diesem Kapitel geht:

• Anzahl der HTTP-Requests
• Anzahl der parallelen HTTP-Requests
• Größe der Dateien, die geladen werden sollen

Nicht nur die Browser unterliegen übrigens einer Beschränkung der Requests. Dasselbe gilt auch für Webserver. Bei vielen Servern sind aus Sicherheitsgründen maximal 256 Requests gleichzeitig erlaubt. Wird diese Anzahl durch viele gleichzeitig aktive Benutzer erreicht, ist der Webserver für alle weiteren Anfragen temporär nicht erreichbar.

2.2 Dateien zusammenführen

In den meisten Projekten werden sehr viele externe Dateien in eine Webseite eingebunden. So sind im head-Bereich der Seite oftmals zahllose script- und link-Elemente zu finden, über die jeweils JavaScript- und CSS-Dateien eingebunden werden. Aber auch Bilder und Flash-Filme werden auf diese Weise eingebunden. Das Problem dabei: Jede dieser Dateien verursacht einen zusätzlichen HTTP-Request, was es natürlich zu verhindern gilt. Daher sollten Sie versuchen, die externen Dateien zu bündeln. Fassen Sie also die CSS-Dateien in einer Datei zusammen. Gleiches gilt dann für die JavaScript-Dateien. Das lässt sich natürlich manuell erledigen, es gibt allerdings auch eine automatische Lösung. Das betreffende Skript können Sie sich von der Seite http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html herunterladen. Einsetzen lässt es sich denkbar einfach. Angenommen, Sie binden momentan mehrere JavaScript-Dateien ein.

Das ist ein typisches Bild für Webseiten – oftmals werden sogar noch deutlich mehr Skripte geladen. Dank des genannten Skripts lassen sich diese Einzelaufrufe zusammenfassen. Ein entsprechender Aufruf sähe folgendermaßen aus:

Das Skript lädt also sämtliche angegebenen Dateien, die im javascript-Verzeichnis liegen. Dazu holt es die Dateien, verkettet diese zu einer einzigen Datei, komprimiert letztere und sendet sie an den Client.

Was nun noch fehlt, ist die Konfiguration des Skripts. Öffnen Sie dazu das heruntergeladene Skript in einem Editor. Zunächst werden die beiden Verzeichnisse angegeben, in denen die CSS- und JavaScript-Dateien liegen, die zusammengefasst werden sollen. Das geschieht innerhalb der beiden Variablen $cssdir und $jsdir.?

Ein Problem entsteht, wenn sehr viele Dateien kombiniert und komprimiert werden sollen....