Was kommt nach Expires-Headern? Weitere Optimierungen statischer Ressourcen

Mit Expires-Header die Performance von Websites verbessernExpires-Header - In den beiden vorangegangenen Artikeln wurde beschrieben, wie sich die Nutzung eines Far Future Expires Header für statische Ressourcen positiv auf die Ladezeiten einer Website auswirkt. In diesem dritten und letzten Teil sollen weitere Optimierungen vorgestellt werden, die wie die Nutzung einer cookie-freien Domain auf diese Ressourcen angewendet werden können. Sind Cookies für eine Top-Level-Domain gesetzt, werden diese unnötigerweise auch mit statischen Ressourcen ausgeliefert. Dies gilt im übrigen auch dann, wenn Ressourcen über eine eigene Subdomain abgerufen werden. Am folgenden Beispiel ist dies schön zu sehen.

Nutzung einer cookie-freien Domain
Nutzung einer cookie-freien Domain

Um die Übertragung dieser unnötigen Cookie-Daten zu vermeiden, sollten Grafiken, Scripte, Styles etc. unter einer eigenen, cookie-freien Domain ausgeliefert werden. Facebook z. B. hat sich für die Domain fbcdn.net entschieden. Eine Analyse zeigt, dass die Facebook-Ressourcen tatsächlich ohne Cookies ausgeliefert werden.

Nutzung einer cookie-freien Domain
Nutzung einer cookie-freien Domain

Richtet sich die Website an ein internationales Publikum, kann die eigene Domain für statische Ressourcen weiterhin als Basis eines Content-Delivery-Network genutzt werden. Anbieter wie Akamain oder Level 3 bieten eine globale Infrastruktur an Servern, welche statische Inhalte ohne große Latenzen möglichst nah an die jeweligen Besucher meiner Website ausliefert.

Latenz - AustralienRuft ein australischer Nutzer eine Webseite von einem deutschen Server auf, nehmen die Downloads der Inhalte dieser Beispielmessung mit WebPagetest aufgrund der großen Entfernung je nach Größe zwischen 350 und 1600 Millisekunden in Anspruch. Hochgerechnet auf sämtliche Grafiken, Scripte und Styles der Seite, kommen dann schnell 15-20 Sekunden zusammen. Ein Content-Delivery-Network kann diese Zeit verkürzen, indem es die Ressourcen von einem australischen Server ausliefert und die Latenzen dank der geringeren Entfernung deutlich reduziert.

Mehr parallele Downloads durch Subdomains

Werden Resourcen mit dem HTTP/1.1 Protokoll übertragen, empfiehlt dieses maximal 2 parallele Requests pro Domain. Bei heutigen CPUs und Bandbreiten ist diese Beschränkung jedoch eher hinderlich und führt zu unnötigen Verzögerungen, weshalb moderne Browser entgegen dieser Empfehlung bis zu 8 Ressourcen pro Domain parallel behandeln. Doch wie sieht es mit älteren Browsern aus? Die folgende Messung zeigt für einen Internet Explorer 7 die Beschränkung der Downloads der Inhalte einer Webseite als lange Kette von Ressourcen-Paaren.

parallel Downloads vorherEs bietet sich deshalb an, die Anzahl der Domains, unter denen statische Ressourcen ausgeliefert werden zu erhöhen und deren CNAME-Einträge auf die selbe IP zeigen zu lassen. Dieser Trick sorgt dafür, dass die Anzahl der parallelen Downloads mit jener Domain um 2 erhöht wird. Der positive Effekt auf die Ladezeit läßt sich allerdings nicht beliebig steigern. Für jede Domain muss beim ersten Aufruf ein zusätzlicher DNS-Lookup und ein initialer Verbindungsaufbau gemacht werden. Dies führt zu einer entsprechenden Verzögerung. Als Faustregel gilt deshalb eine Verteilung der Requests auf 2 bis 4 Domains. Die Verteilung auf mehrere Subdomains kann man recht einfach lösen, indem man für die verschiedenen Arten von Ressourcen verschiedene Subdomains angibt. So wäre die Auslieferung sämtlicher Grafiken über img.static-domain.net denkbar. Wer einen Schritt weiter gehen möchte, kann jeder Ressource eine von z. B. 4 Subdomains (s1.static-domain.net, s2.static-domain.net, s3.static-domain.net, s4.static-domain.net) algorithmisch zuweisen. Dabei kann der im 2. Teil beschriebene Dateiname mit Hash-Tag auf eine der 4 Subdomains umgerechnet werden. Die Subdomain ist somit pro Ressource immer identisch und führt zu genau einem Request. Die Herausforderung besteht darin, den Algorithmus so zu wählen, dass eine möglichst gleichmäßige Verteilung der Requests über die verschiedenen Subdomains hinweg stattfindet.

... Werden die Ressourcen mit dem HTTP/1.0 Protokoll übertragen, erhöhen ältere Versionen des Internet Explorer und des Firefox die Anzahl der parallelen Downloads...

Die Nutzung dieser Technik birgt am Beispiel einer großen Website wie Facebook allerdings die Gefahr, dass die Dinge über eine längere Zeit aus dem Ruder laufen. Analysiert man die Verteilung der Ressourcen einer Facebook-Seite (andere große Websites liefern ähnliche Ergebnisse), so stellt man fest, dass diese von bis zu 10 verschiedenen Domains abgerufen werden (was aus den bereits beschriebenen Gründen alles andere als ideal ist).

Facebook DomainsEs gibt einen weiteren, recht simplen Ansatz, die Anzahl der parallelen Downloads zu erhöhen. Werden die Ressourcen mit dem HTTP/1.0 Protokoll übertragen, erhöhen ältere Versionen des Internet Explorer und des Firefox die Anzahl der parallelen Downloads. Dies muss allerdings mit dem Preis der limitierten Möglichkeiten des HTTP/1.0 Protokolls bezahlt werden - als größter Nachteil wird in diesem Zusammenhang der Verzicht auf persistente Verbindungen genannt.

Mehr zu diesem Thema findet sich in dem Artikel Roundup on Parallel Connections von Steve Souders. Dies war der letzte von 3 Teilen zur Optimierung statischer Ressourcen mit Expires-Headern, cookie-freier Domain und mehreren parallelen Downloads. Viele der vorgestellten Techniken basieren auf den Best Practices for Speeding Up Your Web Site von Yahoo! und auf den Veröffentlichungen von Steve Souders und werden im Umfeld der 1&1 Shopsysteme erfolgreich eingesetzt.

Informationen über den Gastautoren

Nico Steiner ist Experte für Frontend-Technologien und entwickelt in diesem Bereich Strategien und Lösungen für die 1&1 Shopsysteme, die über 30 Web-Applikationen der Marken 1&1, WEB.DE und GMX umfassen. Sein Aufgabengebiet beinhaltet auch die fachliche Leitung zweier Frontend-Entwickler-Teams mit insgesamt 15 Mitarbeitern. Seine Arbeit ist durch die Vorgaben und Ideen der Webstandards geprägt und deckt nahezu den gesamten Bereich der Frontend-Entwicklung ab. Momentan optimiert er die Zugänglichkeit und Performance der 1&1 Shopsysteme und treibt deren Modularisierung voran.

Werde auch du Gastautor im Webstandard-Blog!

Um Themengebiete wie diese, für die sich die Leser interessieren anbieten zu können, möchten wir über diesem Wege weiterhin anderen Bloggern die Möglichkeit geben, ihr Fachwissen mit unseren Lesern teilen zu können. Voraussetzung ist lediglich, dass sich diese Artikel in den vorhanden Kategorien unseres Blogs untergebracht werden können und der jeweilige Autor über entsprechendes Fachwissen verfügt.

Ähnliche Artikel zum Thema Webseitenoptimierung
  1. Franz 26 Okt 2010, 08:23

    Nachdem ich nun diesen 3-Teiler gelesen habe, werde ich diesbezüglich wohl etwas mehr aktiver werden, denn das Einsparpotential ist unverkennbar.

    Vielen Dank für diese "Einführung"!


  2. Matthias Jakel
    26 Okt 2010, 13:36

    Das Problem der DNS-Lookups bei zu vielen statischen Subdomains könnte aus meiner Sicht gelöst werden, indem man nicht auf eine Domain sondern direkt auf die IP verweist. Dafür benötigt man aber einen Server, der über mehrere verschiedene IPs erreichbar ist.


  3. Theodor 27 Okt 2010, 15:19

    interessanter Artikel - werde mir wohl auch noch die anderen durchlesen.
    Es erfordert zwar alles in allem etwas Arbeit aber für eine schnellere Ladezeit kann man diese Zeit wohl investieren. AJAX ist auf dauer eben auch keine Lösung.


  4. Thomas
    28 Okt 2010, 11:32

    Sehr interessante Artikelserie, hatte mir darüber noch gar keine Gedanken gemacht, werde das bei der nächten Überarbeitung berücksichtigen. Danke auf jeden Fall dafür, gerne mehr davon


  5. Lena 31 Okt 2010, 21:56

    Das nenne ich mal einen wirklich ausführlichen Bericht. Vielen Dank. Da habe ich bei meinem Blog jetzt aber jede Menge zu optimieren.


  6. Mario 03 Nov 2010, 13:46

    Schon interessant, wie ausgeklügelt SEO wird. Bin schon gespannt was noch auf uns zukommen wird.


  7. Voku 10 Nov 2010, 00:47

    HI, habe diesbezüglich vor einiger Zeit auch einen Blog-Beitrag geschrieben ... ggf. hilft das jemanden weiter. :-)

    -> http://suckup.de/blog/2010/07/26/webseiten-beschleunigen/

    Mfg
    Voku


  8. Stephan
    11 Nov 2010, 11:49

    Der Bericht ist Dir wirklich sehr gelungen. Doch leider habe ich gerade festgestellt, dass noch viel Arbeit vor mir liegt. Danke für die sehr hilfreichen Tipps :) ich schaue immer wieder gerne hier vorbei...


  9. Jeffrey 19 Nov 2010, 09:23

    In der Tat ein interessanter Artikel! Danke für der Tips!


  10. Sabine 28 Nov 2010, 14:01

    Vielen Dank auf von mir! Jedoch frage Ich mich ob der User in der Realität überhaupt einen Unterschied spürt..


  11. Chris 28 Nov 2010, 19:48

    Interessanter Artikel, Thematik sehr breit dargestellt.Ich habe mir auch die Seite Steve Souders angeschaut, lohnt sich rein zu schauen, danke für den Hinweis.


  12. Klaus
    05 Jul 2011, 10:48

    Ich kann mich dem Lob nur anschließen.

    Sehr ausführlich und vor allem verständlich geschrieben.

    Ich habe mit meiner Website zwar schon einiges umgesetzt, aber das mit den parallelen Downloads durch Subdomains ist mir bisher durchgegangen.
    Da habe ich doch am Wochenende eine schöne Beschäftigung.

    Herzliche Grüße
    Klaus


  13. jermaine 14 Aug 2011, 19:08

    Dank euren super detaillierten Anweisungen spar ich mir sehr teures Lehrgeld und etlich Nächte des grübelns, nicht das es jetzt einfach wäre aber ihr veranschaulicht es mir nachvollziehbar damit ich schneller den Gedankensprung zur praktischen Anwendung finde.


  14. Maygari 28 Mär 2012, 22:52

    Bald ist SEO eine Wissenschaft für sich. :) Mal sehen was ich da bei meinem eigenen Blog umsetzen kann.


  15. webmaus 06 Jun 2012, 16:26

    Das könnte ich mir auch vorstellen. Alleine aus mathematischer Sicht sind die Algorythmen von Google recht interessant.


  16. Rafael 28 Okt 2012, 14:43

    Und das alles für Google ;-). Man kann wirklich viel machen, damit die Seite deutlich performanter wird. Ein Artikel über mod_pagespeed von Google wäre hier sicherlich auch interessant mit Anbietern, wo das Modul installiert ist.


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage