smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Website beschleunigen: 1. Reduzierung von HTTP-Requests

17. September 2012
Stephan
Website beschleunigen - Tipps für eine schnellere Website

In diesem ersten Teil der Artikel-Serie „Website beschleunigen“ geht es um den Aspekt der HTTP-Requests und deren Reduzierung.

Ein Grund warum einige Websites sehr lange Ladezeiten haben, sind eine nicht unbeträchtliche Anzahl an HTTP-Requests, die das Laden einer Website verlangsamen. Denn jede einzelne Datei (HTML, CSS, JavaScript, Grafik etc.), die vom Browser geladen werden soll, muss angefragt und übertragen werden, wodurch immer ein zusätzlicher HTTP-Request entsteht.

In diesem Artikel möchte ich euch nun einige Möglichkeiten aufzeigen, wie ihr eure HTTP-Requests reduzieren und so eure Website schneller machen könnt.

Teile der Artikel-Serie

Zur Übersicht eine Auflistung aller erschienenen Artikel zur Artikel-Serie „Website beschleunigen“:

  1. Reduzierung von HTTP-Requests
  2. Grafiken optimieren
  3. Browser-Caching
  4. Gzip-Komprimierung
  5. Code minimieren & optimieren
  6. Tipps für WordPress
  7. Sonstige Performance-Tipps

HTTP-Requests einer Website analysieren

Um überhaupt zu wissen, wie viele HTTP-Requests die eigene Website zum Laden benötigt, gibt es verschiedene Tools. Ich bevorzuge dabei Firebug für Firefox. Mittels Firebug können wir sehr leicht feststellen, wie viele HTTP-Requests das Laden unserer Website verursacht:

Firebug: Anzahl HTTP-Requests ermitteln

Auf dem Bild ist zu erkennen, dass zum Aufbau der angefragten Website 9 HTTP-Requests (Anfragen) nötig sind. Dabei fällt eine weitere Performance-Bremse auf. Jeder Browser kann zu einem Server nur eine begrenzte Anzahl an gleichzeitigen bzw. parallelen Verbindungen herstellen. In unserem Beispiel-Fall sind das genau 6 gleichzeitige Verbindungen.

Wie dem Bild zu entnehmen ist, werden zu erst die Grafiken 1.jpg bis 5.jpg sowie 7.jpg geladen. Nachdem Grafik 4.jpg und 5.jpg fertig geladen sind, gibt es wieder 2 „freie“ Verbindungen und erst jetzt können die Grafiken 8.jpg als auch 6.jpg geladen werden.

Je mehr HTTP-Requests wir also benötigen, desto langsamer wird der Aufbau unserer Website, da nur eine begrenzte Anzahl an Dateien parallel geladen werden können und die restlichen Dateien in einer Warteschlange warten müssen. Wenn wir nun also unsere Website beschleunigen wollen, ist es ratsam unnötige HTTP-Requests zu vermeiden.

CSS- und JavaScript-Dateien zusammenfassen

Eine Möglichkeit HTTP-Requests zu reduzieren, ist das Zusammenfassen von CSS- bzw. JavaScript-Dateien. Wenn ihr beispielsweise auf allen Webseiten eurer Website ständig die zwei gleichen CSS-Dateien ladet, dann ist es effizienter diese beiden Dateien zusammenzufassen. Dadurch spart ihr euch bereits einen zusätzlichen HTTP-Request.

Das Zusammenfassen könnt ihr grundsätzlich per Hand vornehmen oder ihr nutzt einfach ein Online-Tool wie z.B. refresh-sf.com/yui/.

Angemerkt sei jedoch noch, dass die zusammengefassten Dateien nicht zu groß werden sollten. Ansonsten relativiert sich der Performance-Gewinn duch die Einsparung der HTTP-Requests durch die enorm erhöhte Transfergröße.

CSS-Sprites

Bei CSS-Sprites geht es darum, einzelne Grafiken zu einer großen Grafik zusammenzufassen, um so wiederum HTTP-Resquests einzusparen. Bei CSS-Hover-Effekten hat es sogar den Vorteil, dass kein „Flacker“-Effekt, der manchmal auftritt, mehr entsteht.

Falls ihr z.B. viele Icons auf eurer Website verwendet, können CSS-Sprites eine sinnvolle Lösung zur Reduzierung der HTTP-Requests sein.

Beispiel:

Beispiel für CSS-Sprites

Hier wurden 3 RSS-Feed-Logos, die vorher als einzelne Dateien abgespeichert waren, zu einer Datei zusammengefasst.

Nehmen wir nun an wie haben folgendes HTML-Markup:

<a href="" title="RSS-Feed-Link">RSS-Feed abonnieren</a>

Dann können wir mittels CSS nun unsere 3 Logos positionieren:

a {
	padding: 10px 0 10px 50px;
	background:url('css-sprite.png') no-repeat;
}
a:hover {
	background-position:0 -39px;
}
a:active {
	background-position:0 -78px;
}

Das CSS bewirkt, dass standardmäßig das orangefarbene Logo angezeigt wird. Dagegen wird beim Hovern, das türkisfarbene und beim Klick auf den Link das graufarbene Logo angezeigt.

Ergebnis:

RSS-Feed abonnieren

Alleine hierdurch hätten wir wieder 3 zusätzliche und unnötige HTTP-Requests gespart.

Als CSS-Sprite-Generator kann ich euch spritegen.website-performance.org empfehlen.

Weiterführende Information findet ihr z.B. auf css-tricks.com und webstandard.kulando.de.

Inline Images/Data URIs

Neben CSS-Sprites können auch sogenannte Inline Images bzw. der Einsatz von Data URIs zur Reduzierung von HTTP-Requests beitragen. Grundsätzlich solltet ihr Inline Images aber nur bei kleineren Grafiken einsetzen.

Bei dieser Technik werden die Grafiken mit Base64 kodiert und direkt in den HTML- bzw. CSS-Code eingebettet. Es findet also keine Referenzierung mehr statt.

Nehmen wir z.B. das folgende kleine Info-Logo:

Beispiel für Inline Image

Als erstes kodieren wir unser Icon mit Base-64. Hierfür gibt es einige Online-Tools, wie z.B. webcodertools.com/imagetobase64converter.

Eingebettet in unseren HTML-Code würde es dann wie folgt aussehen:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAASVJREFUOMutkr9KgzEUxX/+hUJxdCl+g5P0AYQOanARdCp0VRwcBYvifhYnQRBEcCgOfYBOgmPkewALXRRcLAp9ACeh4JJIGhMQ9C6Bc3POPbk58MeaigFJBXAMtICag0dAD7iQ9JIVkLQPXAOVzMBP4ETSlQdmIvItMBeRzoASWHf3t40xb9bax28HkmrAE1BNTF1zZxk5WZb0Pu2AowzZE8sImwdOAbxAM0HcAxaBFaCf6O+EAkXUHLt9HEp6dj8QVwEwm7Htlztw52YuB97BMNEbAT1JdWAj0R+GAimLA0ljoJ4ZfhcKXAIf0YWGpFXgAegkAnU+kcQgSL+pA0mdiSRaa/vGmFdgK5HGcHJb0s2PKAciXfe0JWAhWGgX2JV0z3/WF/XlTsmFnv8HAAAAAElFTkSuQmCC" />

Generell muss ich sagen, dass ich diese Technik noch nicht wirklich in meinen Projekten genutzt habe. Das rührt daher, dass man zwar einen HTTP-Request für die jeweilige Grafik einspart, aber dafür das Transfervolumen, also die Dateigröße der HTML- bzw. CSS-Datei stark vergrößert wird. Hier müsst ihr also gegebenenfalls nachmessen und testen, was in eurem Fall effizienter ist.

Weiterführende Informationen zum Thema Inline Image/Data URIs gibt es im Blog von nczonline.net.

Fazit

Um eure Website zu beschleunigen, ist die Reduzierung von unnötigen HTTP-Requests ein sinnvolles und effektives Mittel. Ihr solltet also immer darauf achten, dass ihr nicht zu viele HTTP-Requests zum Laden eurer Website benötigt, damit die Ladezeit eurer Website nicht zu langsam wird.

Habt ihr noch weitere Ergänzungen und Tipps um HTTP-Requests zu reduzieren?

Falls ihr irgendwelche Fragen habt zum Thema, dann schreibt doch einfach ein Kommentar unter diesen Artikel.

Kommentare  
3 Kommentare vorhanden
1 Lamer schrieb am 21. April 2014 um 12:57 Uhr

Base64 lohnt sich bis 12kb ohne Komprimierung und bis 15kb mit Komprimierung. Es entsteht ungefähr 1/3 mehr Traffic. Dafür fällt der Request weg. Allerdings wird das Bild dann auch nicht gecached.

Gruß Lamer

2 Blasko schrieb am 7. November 2014 um 03:05 Uhr

Hi, ich würde gerne wisse wie genau das mit den sprites funktioniert… Zur Info, benutze einen Baukasten wo ich nur Codeschnippsel einfügen kann.

3 Blasko schrieb am 2. März 2015 um 23:24 Uhr

Hallo, hoffe das ich noch eine Antwort bekomme.

Mich interessiert wie groß ein Spriteimage werden darf!?

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!