Performancegewinn durch die Reduzierung der http-Requests
Für den Aufbau einer Webseite muss jedes Bestandteil, sofern es nicht bereits im Cache vorhanden ist, vom Webserver per Serveranfrage (Request) abgerufen werden. Ziel sollte es sein, neben dem Transfervolumen auch die Anzahl der Requests so weit wie möglich zu reduzieren, da jede Anfrage Zeit benötigt und unweigerlich einen gewissen Kommunikations-Overhead mit sich führt.
Im Zeitalter des Breitband-Internets ist man geneigt zu sagen, dass es auf ein paar Requests mehr oder weniger nicht ankommt.
Diese These ist aber so nicht haltbar:
- Es gibt noch Nutzer, die über keinen Breitbandanschluss verfügen.
- Suchmaschinen beziehen auch die Schnelligkeit des Seitenaufbaus vermehrt in die Bewertung mit ein.
Aus diesen Gründen sollte man versuchen, die Webseiten auf maximale Geschwindigkeit zu optimieren, u.a. durch die Reduzierung der Requests.
Die eigentliche Html-Seite ist in diesem Zusammenhang eher unbedeutend. Viel wichtiger ist die Betrachtung der eingebundenen Dateien (Stylesheets, Javascripte, Bilder, Flashes etc.).
Analyse der aktuellen Requests
Zuerst sollte man analysieren, wie viele Requests aktuell für den Aufbau der Webseite notwendig sind und in welcher Reihenfolge die einzelnen Komponenten geladen werden. Hierzu eignet sich beispielsweise das Firefox Add-on Firebug. Nach dessen Aufruf und dem Laden der Webseite werden die Requests, deren Reihenfolge, das übertragene Volumen und die Dauer der Requests übersichtlich dargestellt.
Reduzierung der Requests
Ziel sollte es sein, die Anzahl der Requests auf 10 bis 15 zu reduzieren.
Die wichtigsten Möglichkeiten hierzu sind:
- Zusammenfassung mehrerer Stylesheet-Dateien in eine gemeinsame Datei
- Zusammenfassung der Javascript-Dateien
- Kombination von Bildern mittels css sprites
- evtl. Erzeugung von Image-Maps
Bei der Zusammenfassung sollte man aber intelligent vorgehen. Es ist nicht zielführend, wenn man z.B. alle Javascript-Funktionen in eine große Datei zusammenführt.
Dadurch wird möglicherweise das Transfervolumen unnötig erhöht, in dem Funktionen geladen werden, die auf der aktuellen Webseite überhaupt nicht benötigt werden.
Sinnvoll ist es sicherlich, Funktionen, die (fast) überall benötigt werden, zusammen zu fassen. Spezielle Funktionen, die nur auf einer bestimmten Seite benötigt werden,
sollten auch separat geladen werden.
Sinngemäß die gleiche Aussage gilt natürlich auch für Stylesheets.
Stylesheet- und Javascript-Dateien können darüber hinaus komprimiert werden, um das Transfervolumen zu verringern. Ein leistungsfähiger Code-Kompressor ist z.B. YUICompressor.
Festlegung der Request-Reihenfolge
Wenn man die Anzahl der Requests reduziert hat, ist der nächste Schritt, die Anordnung der Stylesheet- und Javascript-Dateien innerhalb der Webseite zu überarbeiten.
Als Grundregel gilt:
- Stylesheet-Dateien am Beginn einer Seite einbinden
- Javascript-Dateien am Ende einer Seite einbinden
- wechselndes Laden von Stylesheet-Dateien und Javascript-Dateien ist zu vermeiden
Eine Webseite wird schrittweise aufgebaut (gerendert). Damit schon zu einem möglichst frühen Zeitpunkt alle Stylesheet-Informationen verfügbar sind, sollten diese Informationen an den Anfang einer Webseite im <head>-Bereich eingebunden werden. Die Einbindung sollte über das <link>-Tag und nicht als @import erfolgen, da @import-Dateien erst am Ende des Webseitenaufbaus geladen werden. Wenn Stylesheets am Ende geladen werden, erfolgt aber üblicherweise ein nochmaliges Rendering der Webseite.
Moderne Browser ermöglichen den parallelen Download von Dateien. Im Firefox sind es im Standardfall 6 parallele Verbindungen. Der aktuelle Wert ist in der Firefox-Konfiguration (about:config) im Parameter network.http.max-persistent-connections-per-server hinterlegt.
Javascript blockiert hingegen parallele Downloads des Browsers. Des Weiteren unterbricht Javascript das blockweise Rendering. Deshalb sollten Javascript-Dateien möglichst erst am Ende der Webseite geladen werden.
Löschung überschüssiger Inhalte und Referenzen
Zu guter Letzt sollte man auch darauf achten, unnötige Dateien zu entfernen. Scripte, die nirgendwo verwendet werden, sind reine Blindleistung und können entfernt werden.