öffentlich
Redaktion Druckversion

Schlanke, schnelle Websites: So beschleunigen Sie den Aufbau von Webseiten

Mit einem langsamen Webseiten-Aufbau verärgern Sie Ihre Besucher

3.666665
(3)
Beitrag bewerten
Kommentar schreiben
Stand: 31. August 2007

HTTP-Requests minimieren

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.

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.

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.

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.

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.

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).

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.

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).

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.

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.

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.

Beitrag bewerten

Ihre Wertung:

 

Ergänzend möchte ich noch ein paar Tipps zu Bildern geben:
- Wird keine Animation benötigt, verwendet man statt GIF besser PNG, das in fast allen Fällen besser komprimiert (Ausnahme sind da eigentlich nur ganz kleine Bilder um 100 Bytes).
- Die Kompression von PNG-Bildern lässt sich mit Programmen wie pngout optimieren. pngslim umfasst gleich mehrere derartige Programme für bestmögliche Kompression. Diskussion dazu hier:
- BMP hat im Web nichts verloren.
- Für Fotos nimmt man am ehesten JPEG, für manche Computergrafiken (etwa Knöpfe, Symbole) und auch Comics bietet PNG evtl. die bessere Kompression, insbesondere bei wenigen Farben, obwohl es verlustfrei ist (solange man mit der Qualität des JPEG-Bildes nicht zu stark runtergeht).

Außerdem: Stilanweisungsdateien für verschiedene Zielmedien (etwa screen, print) werden üblicherweise alle sofort geladen und nicht erst bei Bedarf. Daher lassen sich dort auch noch HTTP-Anfragen einsparen, wenn man diese Dateien nicht mit dem (X)HTML-Attribut media="…" referenziert, sondern nur eine einzige Datei einbindet, die die entsprechenden Stilangaben in @media-Blöcken enthält. Auch lassen sich so Stilangaben, die mehrere Medien betreffen (etwa @media screen, projection, handheld) meiner Meinung nach einfacher zusammenfassen.

Heinz

Dieser "Artikel" sollte überarbeitet werden. Momentan ist es nur eine Aufzählung von Ursachen. Wie man dann etwas behebt, wird im Großteil der Punkte nicht aufgeführt.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Downloads zu diesem Beitrag

Newsletter abonnieren