Websites. High Performance. O Reilly. Deutsche Ausgabe. 14 Profi-Regeln zur Optimierung Ihrer Website. Steve Souders

Transkript

1 14 Profi-Regeln zur Optimierung Ihrer Website Deutsche Ausgabe High Performance Websites O Reilly Steve Souders Deutsche Übersetzung von Peter Klicman

2 First Inhalt Geleitwort Vorwort IX XI A Die Bedeutung der Frontend-Performance Die Performance von Webseiten verfolgen Wo ist die Zeit hin? Die goldene Regel der Performance B HTTP-Übersicht Komprimierung Bedingte GET-Requests Expires Keep-Alive Und noch mehr Regel 1: Weniger HTTP-Requests Imagemaps CSS-Sprites Inline-Images Kombinierte Skripten und Stylesheets Zusammenfassung Regel 2: Verwenden Sie ein Content-Delivery-Netzwerk Content-Delivery-Netzwerke Die Einsparungen Inhalt V

3 3 Regel 3: Fügen Sie Expires-Header ein Expires-Header Max-Age und mod_expires Leerer Cache verglichen mit vollem Cache Mehr als nur Images Versionierte Dateinamen Beispiele Links 4 Regel 4: Komprimieren Sie Komponenten Wie Komprimierung funktioniert Was man komprimiert Die Einsparungen Konfiguration Proxy-Caching Grenzfälle Gzip in Aktion Regel 5: Stellen Sie Stylesheets an den Anfang Progressives Rendering sleep.cgi Leere weiße Seite Flash of Unstyled Content Was muss der Frontend-Ingenieur tun? Regel 6: Stellen Sie Skripten ans Ende Probleme mit Skripten Parallele Downloads Skripten verhindern Downloads Schlimmster Fall: Skripten am Anfang Bester Fall: Skripten am Ende Ins rechte Licht gerückt Regel 7: Vermeiden Sie CSS-Ausdrücke Aktualisierung von Ausdrücken Das Problem umgehen Zusammenfassung VI Inhalt

4 Rechts 8 Regel 8: Lagern Sie JavaScript und CSS in externe Dateien aus Inlining verglichen mit externen Dateien Typische Ergebnisse aus der Praxis Homepages Das Beste beider Welten Regel 9: Reduzieren Sie DNS-Lookups DNS-Caching und TTLs Die Sicht des Browsers DNS-Lookups reduzieren Regel 10: Reduzieren Sie JavaScript Minifizierung Obfuscation Die Einsparungen Beispiele Das Sahnehäubchen Regel 11: Vermeiden Sie Redirects Arten von Redirects Wie Redirects die Performance verschlechtern Alternativen zu Redirects Regel 12: Entfernen Sie doppelte Skripten Doppelte Skripten Doppelte Skripten schaden der Performance Doppelte Skripten vermeiden Regel 13: Konfigurieren Sie ETags Was ist ein ETag? Das Problem mit ETags ETags: hopp oder topp ETags im richtigen Leben Regel 14: Machen Sie Ajax cache-freundlich Web 2.0, DHTML und Ajax Asynchron = sofort? Ajax-Requests optimieren Caching von Ajax in der realen Welt Inhalt VII

5 15 Untersuchung der zehn Top-Sites Seitengewicht, Response-Zeit, YSlow-Wertung Wie die Tests durchgeführt wurden Amazon AOL CNN ebay Google MSN MySpace Wikipedia Yahoo! YouTube Links Index VIII Inhalt

6 First Kapitel 1 KAPITEL 1 Regel 1: Weniger HTTP-Requests Die goldene Performance-Regel, die in Kapitel A erläutert wurde, hat deutlich gemacht, dass nur 10-20% der Response-Zeit für den Endanwender damit zugebracht werden, das angeforderte HTML-Dokument abzurufen. Die restlichen 80-90% der Zeit gehen bei HTTP-Requests für die Komponenten (Images, Skripten, Stylesheets, Flash etc.) drauf, die innerhalb des HTML-Dokuments abgerufen werden. Eine einfache Möglichkeit, die Response-Zeiten zu minimieren, besteht also darin, die Anzahl der Komponenten zu reduzieren und dadurch auch die Anzahl der HTTP-Requests. Die Idee, Komponenten von der Seite zu entfernen, erzwingt einen Kompromiss zwischen Performance und Produktdesign. In diesem Kapitel beschreibe ich Techniken zur Eliminierung von HTTP-Requests, während gleichzeitig der schwierige Kompromiss zwischen Performance und Design vermieden wird. Diese Techniken umfassen Imagemaps, CSS-Sprites, Inline-Images und kombinierte Skripten und Stylesheets. Der Einsatz dieser Techniken reduziert die Response-Zeiten der Beispielseiten um bis zu 50%. Imagemaps In seiner einfachsten Form verknüpft ein Hyperlink die Ziel-URL mit irgendeinem Text. Eine schönere Alternative besteht darin, den Hyperlink mit einem Image zu verknüpfen, beispielsweise in Navigationsleisten und Buttons. Wenn Sie mehrere verlinkte Images auf diese Weise nutzen, können Imagemaps eine Möglichkeit sein, die Anzahl der HTTP- Requests zu reduzieren, ohne das»look and Feel«der Seite zu verändern. Eine Imagemap erlaubt Ihnen, mehrere URLs mit einem einzelnen Image zu verknüpfen. Die Ziel-URL wird basierend auf der Position ausgewählt, an der der Benutzer das Image anklickt. 11

7 Abbildung 1-1 zeigt ein Beispiel mit fünf Images, die in einer Navigationsleiste verwendet werden. Das Anklicken eines Image führt Sie zum damit verknüpften Link. Das kann über fünf separate Hyperlinks und fünf separate Images geschehen. Es ist aber wesentlich effektiver, das über eine Imagemap zu lösen, weil die fünf HTTP-Requests auf nur einen HTTP-Request reduziert werden. Die Response-Zeiten verkürzen sich, weil es weniger HTTP-Overhead gibt. Links Abbildung 1-1: Kandidat für eine Imagemap Sie können das selbst ausprobieren, indem Sie die folgenden URLs besuchen. Klicken Sie jeden Link an, um sich die Roundtrip-Zeiten anzusehen. Ohne Imagemap Mit Imagemap Mit dem Internet Explorer 6.0 über DSL (~900 Kbps) war der Abruf der Imagemap 56% schneller als der Abruf der Navigationsleiste mit separaten Images für jeden Hyperlink (354 Millisekunden gegenüber 799 Millisekunden). Das liegt daran, dass die Imagemap vier HTTP-Requests weniger benötigt. Es gibt zwei Arten von Imagemaps. Serverseitige Imagemaps übertragen alle Klicks an dieselbe Ziel-URL und übergeben dabei die X/Y-Koordinaten des Benutzerklicks. Die Webanwendung bildet die X/Y-Koordinaten auf die entsprechende Aktion ab. Clientseitige Imagemaps sind gängiger, weil sie den Klick des Benutzers in eine Aktion umwandeln, ohne dass eine Backend-Anwendung notwendig wäre. Diese Abbildung wird über den MAP-Tag von HTML erreicht. Der HTML-Code für die Umwandlung der Navigationsleiste aus Abbildung 1-1 in eine Imagemap zeigt, wie das MAP-Tag verwendet wird: <img usemap="#map1" border=0 src="/images/imagemap.gif"> <map name="map1"> <area shape="rect" coords="0,0,31,31" href="home.html" title="home"> <area shape="rect" coords="36,0,66,31" href="gifts.html" title="geschenke"> <area shape="rect" coords="71,0,101,31" href="cart.html" title="warenkorb"> <area shape="rect" coords="106,0,136,31" href="settings.html" title="einstellungen"> <area shape="rect" coords="141,0,171,31" href="help.html" title="hilfe"> </map> Der Einsatz von Imagemaps hat aber auch Nachteile. Die Definition der Bereichskoordinaten ist, wenn sie von Hand erfolgt, lästig und fehlerträchtig, und außer für Rechtecke kaum für andere Formen zu gebrauchen. Die Erzeugung von Imagemaps über DHTML funktioniert im Internet Explorer nicht. 12 Kapitel 1: Regel 1: Weniger HTTP-Requests

8 Rechts Wenn Sie momentan mehrere Images in einer Navigationsleiste oder anderen Hyperlinks verwenden, bietet der Wechsel auf eine Imagemap eine einfache Möglichkeit, die Geschwindigkeit Ihrer Seite zu erhöhen. CSS-Sprites Wie Imagemaps erlauben auch CSS-Sprites die Kombination von Images, sind aber wesentlich flexibler. Das Konzept erinnert mich an ein Ouijabrett (Hexenbrett), bei dem der Zeiger sich über das Brett bewegt und bei verschiedenen Buchstaben anhält. Zum Einsatz von CSS-Sprites werden mehrere Images in einem einzigen Image zusammengefasst, so wie in Abbildung 1-2 zu sehen ist. Das ist unser»ouijabrett«. Abbildung 1-2: CSS-Sprites fassen mehrere Images in einem Image zusammen Der»Zeiger«ist jedes HTML-Element, das Hintergrund-Images unterstützt, wie beispielsweise SPAN oder DIV. Das HTML-Element wird über dem gewünschten Teil des Hintergrund-Image durch die CSS-Property background-position positioniert. Zum Beispiel können Sie das»my«-icon wie folgt als Hintergrund-Image für ein Element verwenden: <div style="background-image: url('a_lot_of_sprites.gif'); background-position: -260px -90px; width: 26px; height: 24px;"> </div> Ich habe das vorige Imagemap-Beispiel an CSS-Sprites angepasst. Die fünf Links sind in einem DIV namens navbar enthalten. Jeder Link ist von einem SPAN umschlossen, der ein einzelnes Hintergrund-Image, spritebg.gif, verwendet, das in der #navbar span-regel definiert ist. Jeder SPAN besitzt eine andere Klasse, die den Offset in das CSS-Sprite über die background-position-property definiert: CSS-Sprites 13

9 <style> #navbar span { width:31px; height:31px; display:inline; float:left; background-image:url(/images/spritebg.gif); }.home { background-position:0 0; margin-right:4px; margin-left: 4px;}.gifts { background-position:-32px 0; margin-right:4px;}.cart { background-position:-64px 0; margin-right:4px;}.settings { background-position:-96px 0; margin-right:4px;}.help { background-position:-128px 0; margin-right:0px;} </style> Links <div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333; width: 180px; height: 32px; padding: 4px 0 4px 0;"> <a href="javascript:alert('home')"><span class="home"></span></a> <a href="javascript:alert('geschenke')"><span class="gifts"></span></a> <a href="javascript:alert('warenkorb')"><span class="cart"></span></a> <a href="javascript:alert('einstellungen')"><span class="settings"></span></a> <a href="javascript:alert('hilfe')"><span class="help"></span></a> </div> Diese Variante ist in etwa gleich schnell wie das Imagemap-Beispiel: 342 Millisekunden gegenüber 354 Millisekunden, aber der Unterschied ist zu klein, um von Bedeutung zu sein. Viel wichtiger ist, dass sie 57% schneller ist als die Variante mit separaten Images. CSS-Sprites Während die Images in einer Imagemap fortlaufend angeordnet sein müssen, gibt es diese Beschränkung bei CSS-Sprites nicht. Die vielen Vorteile (und wenigen Nachteile) von CSS-Sprites werden in Dave Sheas maßgebendem Webartikel»CSS Sprites: Image Slicing s Kiss of Death«erläutert. Einige Vorteile von CSS-Sprites habe ich bereits angesprochen: Sie reduzieren HTTP-Requests, indem sie Images zusammenfassen, und sie sind flexibler als Imagemaps. Ein überraschender Vorteil ist die reduzierte Downloadgröße. Die meisten Leute erwarten, dass das kombinierte Image größer ist als die Summe der separaten Images, weil das kombinierte Image zusätzliche Leerräume enthalten muss. Tatsächlich ist das kombinierte Image aber eher kleiner als die Summe der Einzel-Images, weil sich die Menge des Image-Overheads (Farbtabellen, Formatinformationen etc.) reduziert. Wenn Sie auf Ihren Seiten viele Images für Hintergründe, Buttons, Navigationsleisten, Links etc. verwenden, bieten CSS-Sprites eine eine elegante Lösung, die zu klarem Markup, weniger Images und schnelleren Response-Zeiten führt. 14 Kapitel 1: Regel 1: Weniger HTTP-Requests

10 Rechts Inline-Images Es ist auch möglich, Images ohne zusätzliche HTTP-Requests in Ihre Seiten einzubinden, indem man das data:-url-schema verwendet. Zwar wird dieser Ansatz vom Internet Explorer nicht unterstützt, aber die Einsparungen, die er anderen Browsern bringen kann, machen ihn doch erwähnenswert. Wir sind alle mit URLs vertraut, die das enthalten. Andere umfassen die vertrauten ftp:-, file:- und mailto:-schemata. Aber es gibt noch viele weitere Schemata wie smtp:, pop:, dns:, whois:, finger:, daytime:, news: und urn:, von denen einige offiziell registriert sind, und andere wegen ihrer weiten Verbreitung geduldet werden. Das data:-url-schema wurde 1995 erstmalig vorgeschlagen. Die Spezifikation ( tools.ietf.org/html/rfc2397) besagt (frei übersetzt), dass es»die Einbindung kleiner Datenelemente als direkte Daten erlaubt«. Die Daten sind in der URL selbst im folgenden Format enthalten: data:[<mediatye>][;base64],<daten> Ein Inline-Image eines roten Sterns wird wie folgt angegeben: <IMG ALT="Red Star" SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWW lvrky/fvcpewso9vvfajo+w6o/zl5estlv/8/aaaaaaaaaaaaaaaach5baea AAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBia tt2h1kblqrfijaikywrgmhwaileeads="> Ich habe data: bisher nur für Inline-Images gesehen, aber es kann überall dort verwendet werden, wo eine URL spezifiert wird, auch bei SCRIPT- und A-Tags. Der Hauptnachteil des data:-url-schemas ist, dass es vom Internet Explorer (bis einschließlich Version 7) nicht unterstützt wird. Ein weiterer Nachteil ist die mögliche Größenbeschränkung, aber Firefox 1.5 akzeptiert Inline-Images mit einer Größe von bis zu 100 KByte. Die base64-kodierung erhöht die Größe des Image, so dass sich auch die gesamte Downloadgröße erhöht. Die Navigationsleiste aus den vorigen Abschnitten ist im folgenden Beispiel über Inline- Images implementiert. Inline-Images Weil data:-urls in der Seite eingebettet sind, werden sie nicht über verschiedene Seiten hinweg gecacht. Sie werden das Firmenlogo nicht inlinen wollen, weil jede Seite um die kodierte Größe des Logos anwachsen würde. Eine clevere Lösung besteht darin, CSS zu nutzen und das Image als Hintergrund zu inlinen. Die Platzierung dieser CSS-Regel in einem externen Stylesheet bedeutet, dass die Daten innerhalb des Stylesheets gecacht werden. Im folgenden Beispiel werden die Hintergrund-Images für jeden Links der Navigationsleiste über Inline-Images in einem externen Stylesheet implementiert. Inline-Images 15

11 First Index Numerisch 10 Top US-Websites Anzahl von Skripten und Stylesheets 92 CDN Service-Provider 20 ETags Expires-Header und max-age-direktive 25 Komponenten mit Expires-Header 27 maximale an Clients gesendete TTL-Werte 70 Minifizierung 75 Minifizierung von Inline-Skripten 79 Performance-Zusammenfassung 112 Response-Zeiten 112 Seitengewicht 112 Skripten and Stylesheets 16 Verwendung von gzip 33 wie Performance-Tests durchgeführt wurden 115 YSlow-Wertung No Content, Statuscode AOL Multiple Choices (based on Content-Type), Statuscode Moved Permanently, Statuscode Moved Temporarily (a.k.a. Found), Statuscode See Other (clarification of 302), Statuscode Not Modified, Statuscode 82, Responses Use Proxy, Statuscode , Statuscode (veraltet) Temporary Redirect (clarification of 302), Statuscode 82 A Accept-Encoding 35 Ajax active-requests 106 Beziehung zwischen Web 2.0, DHTML und Ajax 104 Caching-Beispiele Google Docs & Spreadsheets 110 Yahoo! Mail Definition 105 passive Requests 106 Requests optimieren 107 Technologien hinter 106 weit in die Zukunft zeigende Expires-Header 111 Yahoo! UI (YUI) Connection Manager für Ajax 106 Akamai Technologies, Inc. 20 Alias-Direktive 86, 87 Alles Gzipped (Beispiel) 38 Amazon CSS-Sprites 116 Expires-Header 116 Performance-Empfehlungen

12 Anwendungs-Webserver, Nähe zu den Benutzern 19 AOL 204 No Content, Statuscode 122 Beacons 122 DNS-Lookups 122 Expires-Header 121 gzip 121 HTTP-Requests 119 Performance-Empfehlungen Skripten 121 Apache 1.3 mod_gzip-modul 34 Apache 2.x mod_deflate-modul 34 Ausdruckszähler (Beispiel) 56 B Beacons 89 AOL 122 bedingte GET-Requests 3, 8, 9, 97 ETags 9 If-None-Match-Header 9 Beispiele alles gezipped 38 Ausdruckszähler 56 Cache-fähiges externes JS und CSS 63 CDN 22 CSS»Flash of Unstyled Content«45 CSS am Anfang 43 CSS am Anfang 43 CSS am Ende 42 CSS-Sprites 14 doppelte Skripten-10 gecached 94 doppelte Skripten-gecached 93 doppelte Skripten-nicht gecached 93 Dynamisches Inlining 65 Einmal-Ausdrücke 57 Event-Handler 57 Externes JS und CSS 59 Großes Skript minifiziert 79 Großes Skript normal 79 Großes Skript Obfuscated 79 HTML gezipped 38 Image-Beacon 90 Imagemap 12 Inlining von CSS-Images 16 Inlining von Images 15 Inlining von JS und CSS 59 Kein CDN 22 Kein Expires 29 Keine Imagemap 12 Kleines Skript minifiziert 79 Kleines Skript normal 79 Kleines Skript, Obfuscated 79 Kombinierte Skripten 17 Nichts gezipped 38 Post-Onload-Download 64 Separate Skripten 17 Skripten am Anfang 52 Skripten am Anfang verglichen mit am Ende 53 Skripten am Ende 53 Skripten blockieren Downloads 51 Skripten in der Mitte 48 verzögerte Skripten 54 Weit in der Zukunft weisende Expires 29 wo man sie online findet XIII XMLHttpRequest-Beacon 90 Browser, wann sie sich unterschiedlich verhalten 46 BrowserMatch-Direktive 36 C Cache, DNS 72 Cache, leer verglichen mit gefüllt 60 Cache-Control-Header 24, 37 max-age-direktive Top US-Websites 25 Cache-fähiges externesjs und CSS (Beispiel) 63 CDN (Beispiel) 22 CDN (siehe Content Delivery Network) clientseitige Imagemaps 12 CNAMEs (DNS-Aliases) 51, 88 CNN CSS-Sprites 123 Performance-Empfehlungen Text als Image 123 CoDeeN 21 Content Delivery Network (CDN) Akamai Technologies, Inc. 20 CoDeeN 21 CoralCDN 21 Definition 20 Links 146 Index

13 Rechts Globule 21 Limelight Networks, Inc. 20 Mirror Image Internet, Inc. 20 Nachteile 21 SAVVIS Inc. 20 Service-Provider Top US-Websites 20 freie 21 Speedera Networks 20 Verbesserungen der Response-Zeit 21 Vorteile 21 CoralCDN 21 Crockford, Douglas 77 CSS Ausdrücke Aktualisieren 56 Einmal-Ausdrücke 56 Event-Handler 57 Techniken zur Vermeidung von Problemen 56 was für schlechte Performance sorgt 56 Beispiele Ausdruckszähler 56 CSS»Flash of Unstyled Content«45 CSS am Anfang 43 CSS am Anfang 43 CSS am Ende 42 CSS-Sprites 14 dynamisches Inlining Homepages 63 Inline verglichen mit extern Inline-Beispiele 59 leerer verglichen mit gefülltem Cache 60 Nachteile 62 Pageviews 60 Wiederverwendung von Komponenten 61 kombiniert Minifizierung 81 Post-onload-Download 64 Sprites Amazon 116 CNN 123 Google 128 MSN 132 Wikipedia 135 Yahoo! 138 D data: URL-Schema 15 Haupt-Nachteil 15 deflate 32 Komprimierungsgrößen 33 DELETE-Request 7 DHTML Beziehung zwischen Web 2.0, DHTML und Ajax 104 Definition 105 DirectorySlash 87 DNS (Domain Name Service) Aliases 51 Browser-Whitelist-Ansatz 36 Cache 72 Rolle des 68 DNS-Lookups AOL 122 aus Sicht des Browsers Firefox 73 Internet Explorer 72 Caching beeinflussende Faktoren 69 Caching und TTLs von den 10 Top US-Websites an die Clients gesendete, maximale TTL-Werte 70 ebay 125 Keep-Alive 72, 74 MSN 132 MySpace 135 reduzieren 73 Dojo Compressor 77 Größenreduzierungen nach gzip-komprimierung 81 Größenreduzierungen durch 78 Domain Name System (siehe DNS; DNS-Lookups) Doppelte Skripten, 10 gecacht (Beispiel) 94 Doppelte Skripten, gecacht (Beispiel) 93 Doppelte Skripten, Nicht gecacht (Beispiel) 93 Downloads durch Skripten blockierte 51 parallele beschränken 49 Kosten 51 Dynamisches Inlining (Beispiel) 65 Index 147

14 E ebay DNS-Lookups 125 ETags 125 Expires-Header 124 HTTP-Requests 123 IFrames 125 Images 125 Performance-Empfehlungen Skripten 127 Einmal-Ausdrücke (Beispiel) 57 Entity-Tags (siehe ETags) ETags 37, Top US-Websites bedingte GET-Requests 9 Beispiel einer Komponente mit wechselndem ETag 102 Definition 96 ebay 125 Effektivität von Proxy-Caches 99 entfernen 101 Format für Apache 1.3 und 2.x 99 Format füriis 99 MSN 132 Optionen 100 Problem mit 99 YouTube 143 Event-Handler 57 Beispiel 57 Expires-Header 9, 23 30, Top US-Websites 25 alternative 24 Amazon 116 AOL 121 Definition 23 ebay 124 Komponenten 10 Top US-Websites 27 sicherstellen, das Benutzer die neueste Version erhalten 29 leerer verglichen mit vollem Cache 26 mod_expires 25 MSN 131 MySpace 135 Wikipedia 135 YouTube 143 (siehe auch weit in die Zukunft weisende Expires-Header) expression Methode (siehe CSS, Ausdrücke) Externes JS und CSS (Beispiel) 59 F Fasterfox 73 favicons 127 file_get_contents PHP-Funktion 16 fileetag Direktive 101 Firebug 115 Firefox DNS-Lookups 72 doppelte Skripten 93 parallele Downloads 49 Pipelining 10 progressives Rendering 46 verzögerte Skripten 54 Firefox, DNS-Lookups 73 Frontend-Performance 1 6 G Garrett, Jesse James 105, 106 geographisch verteilte Inhalte 19 GET-Requests 7 bedingte (siehe bedingte GET-Requests) Globule 21 Gomez 22 web monitoring services 115 Google CSS-Sprites 128 HTTP-Requests 127 Performance-Empfehlungen SCRIPT DEFER-Attribut 129 Google Docs & Spreadsheets 110 Google Toolbar, Redirects 91 Großes Skript minifiziert (Beispiel) 79 Großes Skript normal (Beispiel) 79 Großes Skript Obfuscated (Beispiel) 79 gzip Top US-Websites 33 AOL 121 Beispiele 38 Links 148 Index

15 Rechts Images und PDF-Dateien 32 Kommandozeilen-Utility 34 Komprimierung Grenzfälle Komprimierungsgrößen 33 konfigurieren Apache 1.3 mod_gzip-modul 34 Apache 2.x mod_deflate-modul 34 Minifizierung 80 mod_gzip-dokumentation 37 MSN 132 Probleme bei IE 36 Proxy-Caching 35 was man komprimiert 32 wie Komprimierung funktioniert 31 Wikipedia 135 gzip (siehe gzip) H HEAD-Request 7 Hewitt, Joe 115 Homepages 63 Hostnamen, Anzahl reduzieren 73 HTML gezipped (Beispiel) 38 HTTP 304-Responses 9 Expires-Header 9 GET-Request 7 GET-Requests bedingte 8, 9 Keep-Alive 9 Komprimierung 8 Persistente Verbindungen 9 Pipelining 10 Responses, komprimieren (siehe gzip) Spezifikation 7, 10 Traffic 3 Übersicht HTTP-Requests AOL 119 Arten von 7 CSS-Sprites ebay 123 Google 127 Imagemaps 11 Client-seitig 12 Nachteile 12 Server-seitig 12 Inline-Images JavaScript und CSS kombiniert MSN 130 MySpace 134 Post-onload Download-Technik 18 Yahoo! 139 Hyatt, David 44 I IBM Page Detailer 115 If-None-Match-Header 9 IFrames ebay 125 MSN 130 Image Map (Beispiel) 12 Image-Beacon (Beispiel) 90 Imagemaps 11 Client-seitige 12 Nachteile 12 Server-seitige 12 Images ebay 125 gzipping 32 Inline Inhalte, geographisch verteilte 19 Inline CSS-Images (Beispiel) 16 Inline-Images Inline-Images (Beispiel) 15 Inlining von JS und CSS (Beispiel) 59 Inodes 99 Internationalisierung 123 Internet Explorer data:-schema 15 DNS-Lookups 72 doppelte Skripten 94 gzip-bugs 36 parallele Downloads 49 Pipelining 10 Probleme mit gzip 36 progressives Rendering 46 verzögerte Skripten 54 XMLHTTP 106 Index 149

16 J JavaScript Abhängigkeiten und Versionierung 94 doppelte Skripten Performance 93 vermeiden 94 dynamisches Inlining Homepages 63 Inline verglichen mit extern Inline-Beispiele 59 leerer verglichen mit vollem Cache 60 Nachteile 62 Pageviews 60 Wiederverwendung von Komponenten 61 Inline-Skripten minifizieren 79 kombiniert Minifizierung Beispiele 78 Definition 75 Einsparungen MSN 132 MySpace 135 Obfuscation 76 Post-onload-Download 64 Script-Management-Modul 94 Tool zum Debugging von Code 115 Überflüssiges entfernen (siehe auch Skripten) JSLint 116 JSMin 77 Größenreduzierungen durch Einsatz von 78 nach gzip-komprimierung 81 K Keep-Alive 9 DNS-Lookups 72, 74 Firefox verglichen mit IE 73 Kein CDN (Beispiel) 22 Keine Expires (Beispiel) 29 Keine Imagemap (Beispiel) 12 Keine Komprimierung (Beispiel) 38 Keynote Systems 22 Kleines Skript minifiziert (Beispiel) 79 Kleines Skript normal (Beispiel) 79 Kleines Skript Obfuscated (Beispiel) 79 Kombinierte Skripten (Beispiel) 17 Komponenten Beispiel mit wechselndem ETag 102 Response-Zeiten überspritzen 41 sicherstellen, dass der Benutzer die neueste Version erhält 29 Stylesheets (siehe Stylesheets) unnötiges neu laden 99 verzögerte 40 weit in die Zukunft weisende Expires-Header wie man sie cacht und validiert bedingte GET-Requests 97 ETags 98 Expires-Header 96 Last-Modified Response-Header 97 wie Server bestimmen, ob eine Komponente übereinstimmt 97 wiederverwenden 61 Komponenten-Webserver, Nähe zu Benutzern 19 Komprimierung deflate (siehe deflate) Einsparungen beim Seitengewicht 38 Grenzfälle Größen bei deflate und gzip 33 HTTP 8 HTTP-Responses (siehe gzip) was man komprimiert 32 wie sie funktioniert 31 L Last-Modified Response-Header 97 Last-Modified-Daten 28 Last-Modified-Header 28 Limelight Networks, Inc. 20 M max-age-direktive Top US-Websites 25 Minifizierung 10 Top US-Websites 75 Definition 75 JavaScript (siehe JavaScript, Minifizierung) Mirror Image Internet, Inc. 20 mod_autoindex 87 mod_deflate-modul 34 Links 150 Index

17 Rechts mod_dir 87 mod_expires 25 mod_gzip_minimum_file_size-direktive 32 mod_gzip-dokumentation 37 mod_gzip-modul 34 mod_rewrite 87 mod_rewrite-modul 86 MSN CSS-Sprites 132 DNS-Lookups 132 ETags 132 Expires-Header 131 gzip 132 HTTP-Requests 130 IFrames 130 JavaScript-Minifizierung 132 Performance-Empfehlungen MySpace DNS-Lookups 135 Expires-Header 135 HTTP-Requests 134 JavaScript-Minifizierung 135 Performance-Empfehlungen N network.http.max-persistent-connectionsper-server, Einstellung 50 New York University 21 Nielson, Jakob 40 Nottingham, Mark 29 O O Reilly, Tim 105 Obfuscation 76 Optimierungs-Alternative 76 OPTIONS-Request 7 P Pageviews 60 parallele Downloads beschränken 49 Kosten 51 Parallelisierung 119 YouTube 141 passive Requests 106 PDF-Dateien, gzipping 32 Performance 10 Top US-Websites wie die Tests durchgeführt wurden 115 bedingte GET-Requests 3 bestimmen, wo die Zeit verbraucht wird 3 Empfehlungen Amazon 116 AOL CNN ebay Google MSN MySpace Wikipedia Yahoo! YouTube Frontend 1 6 gecachte und nicht gecachte Images 3 Profiling 5 prozentueller Anteil der Download-Zeit, 4 Redirects 2 Response-Zeit, Tests 22 Response-Zeit, Verbesserungen durch CDNs 21 Webseite beobachten 1 Zusammenfassung der 10 Top US-Websites 112 Performance, Goldene Regel der 4, 5 Persistente Verbindungen 9 Pipelining 10 PlanetLab 21 PNG-Images 137 Post-Onload Download (Beispiel) 64 Post-Onload Download-Technik 18 POST-Request 7 Preloading 129 Princeton University 21 progressives Rendering 40 Proxy-Caching gzip 35 PUT-Request 7 Index 151

18 R Redirects 2 91 Alternativen ausgehenden Traffic beobachten 90 Rendering, progressives 40 Response-Zeiten 10 Top US-Websites 112 bringing HTTP response closer to user (siehe Content Delivery Networks) für Komponenten ermitteln 41 Größe der HTTP-Response reduzieren (siehe gzip) größter Einfluss auf 49 Tests 22 unnötige HTTP-Requests eliminieren (siehe Expires-Header) weniger HTTP-Requests durchführen (siehe HTTP-Requests) S SAVVIS Inc. 20 Schemata 15 SCRIPT DEFER-Attribut (Google) 129 Seitengewicht, 10 Top US-Websites 112 Separate Skripten (Beispiel) 17 ServerInfoTimeOut-Wert 72 Server-seitige Imagemaps 12 Shea, Dave 14 ShrinkSafe 77 Skripten Abhängigkeiten und Versionierung 94 am Anfang der Seite 52 am Ende der Seite 53 Anzahl bei 10 Top US-Websites 92 AOL 121 doppelte Performance 93 vermeiden 94 Downloads blockierend 51 ebay 127 parallele Downloads Probleme mit 48 Skript-Management-Modul 94 verzögerte 54 Yahoo! 139 (siehe auch JavaScript) Skripten am Anfang (Beispiel) 52 Skripten am Ende (Beispiel) 53 Skripten Anfang verglichen mit Ende (Beispiel) 53 Skripten blockieren Downloads (Beispiel) 51 Skripten in der Mitte (Beispiel) 48 sleep.cgi 40 Speedera Networks 20 Stylesheets 39 47»Flash of unstyled Content«44 vermeiden 46 Anzahl bei 10 Top US-Websites 92 Beispiele für Stylesheet am Ende verglichen mit Anfang CSS am Anfang CSS am Ende 42 leere weiße Seite vermeiden 46 Problem es ans Ende des Dokuments zu stellen 40 T Text als Image 123 Theurer, Tenni 27 TRACE-Request 7 TTLs DNS-Caching und von den 10 Top US-Websites an die Clients gesendete maximale TTL-Werte 70 V verzögerte Komponenten 40 Verzögerte Skripten (Beispiel) 54 visuelles Feedback 40 Vrije Universiteit 21 W Web Beziehung zwischen Web 2.0, DHTML und Ajax 104 Definition 104 Webseiten-Performance 1 weit in die Zukunft weisende Expires (Beispiel) 29 Links 152 Index

19 Rechts weit in die Zukunft weisende Expires-Header 27, 109 Ajax 111 Beispiele 29 Definition 24 gecacht 30 Komponenten Pageviews 26 Werbung, liefern 125 Wikipedia CSS-Sprites 135 Expires-Header 135 gzip 135 Performance-Empfehlungen PNG-Images 137 X XMLHttpRequest 90 XMLHttpRequest-Beacon (Beispiel) 90 Y Yahoo! 1, 4 CSS-Sprites 138 Domains 139 HTTP-Requests 139 Performance-Empfehlungen Skripten 139 zwei das gleiche Image referenzierende URLs 138 Yahoo! Mail Ajax-Caching Beispiel Yahoo! Search 4 Yahoo! Shopping und Akamai s CDN 22 Yahoo! UI (YUI) Connection Manager für Ajax 106 YouTube Etags 143 Expires-Header 143 Parallelisierung 141 Performance-Empfehlungen YSlow 115 Wertung 10 Top US-Websites Definition 113 Index 153