Schlanke, schnelle Websites: So beschleunigen Sie den Aufbau von Webseiten
HTTP-Requests minimieren
HTTP-Requests minimieren
Auf dieser Seite
Mit Bild
Durch einen langsamen Webseitenaufbau verärgern Sie völlig unnötigerweise die Besucher Ihrer Website. Auch, wer mit multimedialen Effekten klotzt, sollte versuchen, seine Webseiten möglichst schnell zum Anwender zu befördern - schließlich gibt es auch im Zeitalter von DSL noch immer viele Besuchern mit langsamen Verbindungen oder wenig Geduld. Wir geben Ihnen in diesem Beitrag ein paar Tipps, wie Sie Webseiten möglichst schlank und performant gestalten, ohne all zu viele optische und inhaltliche Kompromisse einzugehen.
Mit Bild
Grundsätzlich sollte man als Anbieter im Web beachten, dass das Verschlanken einer Webseite ein sehr diffiziles Geschäft sein kann: Die Beschleunigung der Anzeige einer Webseite läuft sehr oft anderen Vorgaben entgegen, etwa einer reichhaltigen optischen Gestaltung oder auch der Konformität zu den Regeln des W3C.
Man kann das gut mit der Ausstattung eines Fahrrads vergleichen: Wenn ein Fahrrad den Straßenverkehrsregeln genügen soll, muss es mit Licht, Klingel und Schutzblechen ausgestattet sein. Und um die Ausstattung zu komplettieren, kommen ein Seitenständer, ein gut gepolsterter Sattel, Spiegel oder auch ein Gepäckträger dran. Die Tour de France werden Sie mit so einem Fahrrad aber nicht gewinnen können. Ein Rennrad wiederum wird so leicht wie möglich gemacht und kann hinterher zum Brötchenholen kaum noch verwendet werden. Es ist nicht sonderlich bequem und entspricht auch vielen Straßenverkehrsregeln nicht mehr.
Mit Bild
Minimieren der Anzahl der HTTP-Requests
Eine der wichtigsten und effektivsten Regeln für eine performante Webseite: Minmieren Sie die Anzahl von HTTP-Requests beim Laden.
Mit Bild
Das World Wide Web ist ein typisches Client-Server-System. Der charakteristische Vorgang läuft so ab, dass der Client (der Webbrowser) vom Webserver eine Webseite mit all ihren enthaltenen Komponenten (Bilder, Skripte, Animationen, Style Sheets, etc.) anfordert. Der Webserver schickt dem Client dann diese vollständige Seite, die in eine gewisse Anzahl von Datenpaketen zerlegt ist.
Mit Bild
Zur Kommunikation zwischen Client und Server dient im World Wide Web das Protokoll HTTP. (Eine genauere Einführung liefert der Beitrag "Das Hypertext Transfer Protokoll HTTP".) Dieses wird - aufsetzend auf TCP/IP - bei einer Antwort des Webservers (dem so genannten HTTP-Response) u. a. die Nutzlast transportieren (also den Inhalt der Webseite samt Grafiken und multimedialen Elementen etc.). Neben dieser Nutzlast beinhaltet so eine Antwort des Webservers immer auch so genannte Headerfelder. Dies sind Metainformationen über die geschickten Informationen, die im Vergleich zur Nutzlast in der Regel klein sind.
Mit Bild
Etwas anderes ist es mit der Anfrage des Clients (dem so genannten HTTP-Request). Dieser besteht in der Regel ausschließlich aus Headerfeldern (in der Regel wird vom Client keine Nutzlast zum Server transportiert - Ausnahme ist ein Upload von Dateien).
Mit Bild
Insbesondere muss aber jede einzelne Komponente (Datei) in einer Webseite über einen einzelnen HTTP-Request angefordert werden, den der Webserver sequenziell abarbeitet. Der Webbrowser wartet für jeden einzelnen Request dann auf den zugehörigen Response.
Mit Bild
Anzahl der HTTP-Requests reduzieren
Um eine Webseite zu beschleunigen, sollte man die Anzahl der HTTP-Requests für eine einzelne Seite möglichst reduzieren. Das ist die wahrscheinlich effektivste Maßnahme zum Beschleunigen einer Webseite mit vielen verschiedenen Komponenten, wenn ein Besucher eine Seite das erste Mal besucht (also noch keine Dateien von einem vorherigen Besuch im Cache hat).
Mit Bild
Natürlich lässt sich die Anzahl der HTTP-Requests für eine Seite am einfachsten dadurch minimieren, dass man die Anzahl der verwendeten Komponenten in einer Webseite reduziert. Man vereinfacht schlicht und einfach das Design der Webseite (also ganz wenige Bilder, keine Animationen etc.). Aber dies ist bei modernen Seiten nur noch in sehr engen Grenzen möglich und bedeutet auf jeden Fall einen Verlust der Vielfältigkeit der Seite respektive des Designs.
Wenn man also das Design nicht vereinfachen kann, so kann man doch mit einigen Tricks die Anzahl der HTTP-Requests beim Laden der Seite minimieren, ohne die Seite optisch zu reduzieren.
Mit Bild
Image Maps
Wenn Sie beispielsweise mehrere Bilder für Links in einer Webseite brauchen, können Sie mehrere Bilder zu einer einzigen so genannten Image Map zusammenfügen. Dies reduziert zwar in der Regel nicht die Gesamtgröße der übertragenen Bilddaten, aber eine Image Map wird über einen einzelnen HTTP-Request angefordert und nicht über mehrere einzelne, was bei den einzeln angeforderten Bilder der Fall wäre.
So ein Verfahren funktioniert vor allem, wenn die einzelnen Bilder sowieso nebeneinander angezeigt werden sollen, aber die Verbindung mehrerer Einzelbilder zu einem Bild ist nicht darauf beschränkt. Ebenso können Sie über die Verwendung von CSS die Anzahl der verwendeten Bilder in einer Webseite reduzieren. Dazu werden mehrere Bilder in einer Webseite in ein einzelnes Bild zusammengefügt und mittels CSS-Techniken wie den Eigenschaften von background-image und background-position verschiedene Ausschnitte aus dem Bild an bestimmten Positionen in der Webseite angezeigt.
Das Zusammenfassen von einzelnen Dateien zu einer kombinierten Datei ist nicht auf Bilder beschränkt. Das kann man auch auf mehrere Style Sheet- oder Skript-Dateien etc. übertragen. Versuchen Sie, mit möglichst wenigen Dateien auszukommen.
Mit Bild
Ajax-Technologie
Der größte Vorteil der Ajax-Technologie ist, dass nicht jedesmal die komplette Webseite neu vom Server geladen werden muss, wenn Daten verändert wurden. AJAX bietet einen idealen Ansatz, um nur Teile einer Webseite auszutauschen und den Rest der Seite zu erhalten. Sie zahlen an der Stelle zwar möglicherweise den Preis, dass ältere Browser damit nicht zurechtkommen und ein Besucher ohne aktiviertes JavaScript auch nicht unterstützt wird, aber der Effekt ist bei interaktiven Seiten enorm. Und da fast alle großen Webseiten mittlerweile JavaScript und einen halbwegs moderner Browser erfordern, kann man dies bei einer großen Anzahl von Besuchern auch voraussetzen. Die Anzahl der Besucher, bei denen AJAX nicht funktioniert, wird in Zukunft definitiv weiter stark abnehmen.