Serie High Performance Websites – Teil 2: Minimieren von HTTP-Requests

Im ersten technischen Teil der High Performance Websites Serie dreht sich alles um die Reduzierung von HTTP-Requests.
Interessant zu wissen ist, dass bei den meisten Webseiten (bei leerem Browser Cache) weniger als 10-20% der Antwortzeit für den eigentlichen Abruf der HTML Dokumente verwendet wird. Im Umkehrschluss werden dann 80-90% der Ladezeit durch HTTP-Requests verbraucht. Durch dieses Verhältnis wird deutlich das die Anzahl der HTTP-Anfragen zur Ladezeit der gesamten Webseite und damit auch zur Gesamtperformance bedeutend beiträgt.
Um unnötige Requests zu vermeiden gibt es mehrere Möglichkeiten, eine davon ist mehrere vereinzelte Bilder zu einem Ganzen zusammenzufassen und mittels Imagemap oder CSS-Sprite in einzelne Links zu unterteilen.
Genauer beleuchtet kann z.B. die Navigationsleiste einer Webseite aus vielen einzelnen Bildern bestehen wodurch für jeden Abruf eines Bildes ein eingener HTTP-Request erzeugt wird. Werden nun diese einzelnen Bilder zusammengefasst entsteht nur noch eine einzige HTTP-Anfrage.
Eine weitere Möglichkeit ist die direkte Einbettung von Bildern in eine HTML oder PHP Seite mittels sog. Inline-Images. Dabei wird direkt im Sourcecode der Seite das „data:“ URI Schema wie folgt verwendet:
HTML URI Schema:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
Siehe auch: http://en.wikipedia.org/wiki/Data_URI_scheme
Bei der Verwendung von Inline-Images ist hervorzuheben das diese nicht Seitenübergreifend gecached werden was bedeutet das jede Seite die das Bild enthält auch um dessen Größe im Cache anwächst.
Leider werden Inline-Images nicht von allen Browsern verarbeitet, dazu gehört unter anderem der Internet Explorer, daher wird diese Variante eher selten benutzt. Imagemaps bzw. CSS-Sprites sind also den Inline-Images vorzuziehen.
Abschließend soll auch noch auf die Kombination von einzelnen JavaScript und Stylesheets hingewiesen werden. Hier ist es empfehlenswert die jeweils voneinander getrennten einzelnen JavaScript und Stylesheet includes zu vereinheitlichen sodass noch jeweils ein gesamtes Script geladen werden muss. Auch diese Maßnahme verringert HTTP-Anfragen.