Bei jeder auszuliefernden Datei muss der Webbrowser eine gesonderte Anfrage an den zuständigen Webserver senden. Dabei kann es, je nach Auslastung des Servers und der Netzstärke und -qualität, zu Verzögerungen kommen. Darüber hinaus wird mit jedem Request ein großer Overhead an Daten (z.B. Headerinformationen) mitgesendet. Die Lösung liegt bei diesem Problem klar auf der Hand: Reduzierung der HTTP Requests, die an den Server gesendet werden.
Doch wie geht das eigentlich? In der Tat ist es nicht schwierig einige HTTP Requests zu vermeiden. Dazu gibt es das probate Mittel mehrere CSS-Dateien zu einer zentralen Datei zusammenzuführen und genau auf diese Art auch Java Script Dateien zu Zentralisieren. Dies hat den Vorteil, dass keine einzelnen Anfragen pro CSS/Java Script-Datei gesendet werden müssen, jedoch auch den Nachteil, dass Struktur und Übersichtlichkeit bei diesem Verfahren leiden.
Eine weitere Möglichkeit ist das Verwenden von CSS-Sprites. Dies bedeutet, dass Standardbilder zu einem großen Bild konsolidiert und angeordnet werden und die Darstellung über CSS auf den richtigen Ausschnitt verschoben wird. Damit wird bei einer Website mit vielen kleinen Icons eine Vielzahl von Interaktion zwischen dem Browser und dem Webserver verhindert. Mehr zu diesem Thema gibt es im Teil 9 dieser Artikelreihe.
Weitere Beiträge aus dieser Reihe:
- Einleitung: Wie Ladezeiten verkürzt werden können
- Teil 2: Komprimierung von CSS und Java Script
- Teil 3: Komprimierung der auszuliefernden Inhalte mit GZip
- Teil 4: Optimiertes Nutzen von CSS durch Beschränkung in der Strukturtiefe
- Teil 5: Beschränkung der HTTP Requests
- Teil 6: Laden von Elementen auf den Viewport des Nutzers beschränken (intelligentes Nachladen)
- Teil 7: iFrames richtig nutzen (Nachladen externer Inhalte)
- Teil 8: Cachingerfolg erhöhen durch Auslagerungen
- Teil 9: CSS Sprites nutzen
Verwandte Themen:
