03. November 2008
Wer Webseiten auf möglichst schnelle Ladegeschwindigkeit hin optimieren will, benötigt spezielle Tools, um die Ladereihenfolge und die Ladezeiten zu protokollieren, denn diese bilden die Grundlage für die Suche nach Performance-Stellschrauben bzw. sie geben Hinweise auf die Ursachen bei Performance-Problemen.
Für den Firefox gibt es den Netzwerk-Reiter in der Firebug-Extension (v1.2.1), welche eben diese Auskünfte liefert. In einem Balkendiagramm werden vertikal die einzelnen Objekte entsprechend der Reihenfolge ihrer Anforderung beim Server aufgelistet, horizontal verläuft die Zeitachse, welche Aufschluss über den Start des Requests und die Zeit bis zum erfolgreichen Abschluss des Ladevorgangs gibt. Nach dem erfolgreichen Seitenaufruf lassen sich für jedes geladene Element Detailinformationen ausgeben, wie etwa den Cache-Status des Objektes, Lebensdauer im Cache ect. abrufen. Kleiner Nachteil: Firebug stellt den Zeitraum zwischen der Serveranfrage und dem erfolgreichen Abschluss des Ladevorgangs undifferenziert dar und gibt keine Auskunft über Latenzzeiten und effektive Ladezeiten.
Für den Safari 3.x übernimmt die Netzwerk-Timeline des Web Inspectors (dem im Safari eingebauten Developer-Tool) diese Aufgabe und unterscheidet farblich zwischen Stylesheets, Grafiken und JavaScript-Dateien. Die Anzeige differenziert aktuell jedoch auch noch nicht zwischen Warte- und effektiven Ladezeiten (Die akutellen Nighty-Builds der Webkit-Engine sind wohl hier schon besser). Wie auch beim Firefox bringt ein Klick auf das jeweilige Objekt weitere Detailinformationen hervor.
Für den Opera-Browser habe ich leider bisher kein solches Tool ausfindig machen können, dafür jedoch – man höre und staune – für den Internet Explorer 6 und 7 ... von AOL. Das Tool nennt sich AOL Pagetest und kann sowohl unter XP als auch unter Vista einfach installiert werden und steht dann im Browser über das Extras-Menü zur Verfügung.
Und bei dem AOL Tool habe ich dann wirklich gestaunt, dieses weist ausgesprochen ausführlich in Zahlen und mit Farbkodierung im Diagramm Latenzzeiten und Ladezeiten gesondert aus - Respekt. Und weil das noch nicht reicht, gibts das Tool gleich noch als Webdienst, der neben dem IE7 und der aktuellen Beta2 des IE8 dem Nutzer auch die Wahl zwischen einem einmaligen Seitenaufruf und wiederholten Aufrufen ermöglicht, um die Auswirkung des clientseitigen Cachings zu berücksichtigen. Ganz großes Kino von AOL.
Dienstag, 04.11.08 (01:50 Uhr)
YSlow für den Firebug sollte aber nicht verschwiegen werden. Damit wird die Analyse erst richtig sinnvoll.
Ebenso ist der Pagedetailer sehr hilfreich.
Dienstag, 04.11.08 (09:22 Uhr)
Hallo Frank,
Du hast natürlich Recht, auch diese Tool sind Gold wert und für ein vollständiges Bild unabdingbar. Mir ging es hier in erster Linie darum, das IE-Tool vorzustellen und die Gegenspieler in den anderen Browsern nochmal zu erwähnen.
Dienstag, 04.11.08 (10:17 Uhr)
Die Nightly-Builds vom Webkit sind nicht nur ein bisschen besser als Safari. Vielmehr wurden die Webdevelopement-Tools komplett überarbeitet, grafisch wie funktionell. So zeigt Webkit nun auch die Dauer des Requests und die Ladezeit der Datei selbst an. Die Dev-Funktionen sid mit denen aus Safari überhaupt nicht mehr zu vergleichen. Kein Wunder: Die Macher wollen aus Webkit den besten Entwicklerbrowser machen. Ich bin daher auch vom Safari auf Webkit umgestiegen.
Dienstag, 04.11.08 (11:11 Uhr)
hi dirk, etsmal alles gute zum geburtstag heute. Jetzt hab ich noch ne kurze Anmerkung zu deinem Beitrag. Ich nutze für den IE seit längerem das Tool HTTPWatch Professional 5.0 und bin damit sehr zufrieden. Es beinhaltet mehrere Filtermöglichkeiten und visualisiert die zeitlichen ladeverlauf auch ganz gut. Solltest du dir evtl. mal ansehen. Das Tool funktioniert sowohl unter Win2000/XP und auch Vista 64Bit. im IE6/7.
Ok soweit von mir. Viele Grüße aus und nach Dresden…
Dienstag, 04.11.08 (12:30 Uhr)
Ein browserunabhängiges Tool (jedoch nur für Windows) stellt die Freeware Fiddler dar.
Einige Highlights:
* Arbeitet als Proxy (eigenständiges Windows Programm) und protokolliert alle HTTP Requests.
* Einzelne Requests können mit dem Request Builder verändert werden und nochmals abgeschickt
* Die Timeline Funktion zeigt, wieviel Zeit welcher Request in Anspruch genommen hat
* über VBScript können Requests automatisch verändert werden am Proxy