Einfaches Webseiten Speed-Profiling

Um die Aufbaugeschwindigkeit einer Webseite zumindest grob zu überprüfen sind keine teuren Tools oder Dienste und auch nur wenig Spezialwissen notwendig. Moderne Browser bringen die passenden Werkzeuge oft auch schon von Haus aus mit.

Sowohl Firefox als auch Chrome sollen hier als Beispiel dienen, beide bieten über das Menü die Option Entwicklertools ein oder auszublenden.

  • Im Firefox: Auf den Schriftzug „Firefox“ in der linken oberen Ecke klicken. Mit der Maus über den Menüpunkt „Web-Entwickler“ gehen und im Untermenü dann „Werkzeuge ein/ausblenden“ anklicken.chrome_2
  • Im Chrome: Rechts oben auf das Menüsymbol klicken, danach den Unterpunkt „Tools“ öffnen und dort die „Entwicklertools“ starten.Chrome

 

In beiden Fällen sollte jetzt im unteren Fensterbereich ein neuer Abschnitt aufgetaucht sein mit den Entwicklertools. Im Prinzip unterscheiden sich Firefox und Chrome hier nur bedingt, der Funktionsumfang ist ähnlich, das Design ist im Firefox dunkel und im Chrome hell gehalten. Die Informationen die man daraus entnehmen kann sind aber nahezu identisch.

Im Folgenden sind nur noch Screenshots aus Chrome zu sehen, die Tools im Firefox bedienen sich analog. Abweichungen zwischen den Browsern werden in Klammern aufgeführt.

Um nun die Ladegeschwindigkeit der Webseite zu analysieren wird der Reiter „Network“ (Firefox: „Netzwerkanalyse“) geöffnet. Sollten jetzt noch keine Daten angezeigt werden reicht es die Seite neu zu laden.

chrome_3

Jede Zeile die nun erscheint entspricht einem Element auf der Seite, Text, Bilder und Skripte sind so leicht zu identifizieren. Die Spalten der Anzeige zeigen neben dem Namen und einigen weiteren Informationen zu Typ, Größe, Art der Verbindung und Antwortcodes des Servers unter dem Punkt „Timeline“ die zeitliche Abfolge an in der die Elemente geladen wurden. Geht man mit dem Mauszeiger über einen der Balken (Firefox: Anklicken einer Zeile, im rechten Bereich öffnet sich eine neue Spalte mit den Informationen) erhält man weiteren Informationen wie zum Beispiel die Zeiten für den Verbindungsaufbau (Connecting), das Senden der Anfrage (Sending), Wartezeit bis zu Antwort (Waiting) und die Dauer der Antwort (Receiving).

Betrachtet man die Werte lässt sich schon eine grobe Aussage darüber machen an welcher Stelle Zeit verloren geht.

  • Connecting: Die Zeit die der Browser (Client) braucht um mit dem Server eine Verbindung aufzubauen. Hier wird lediglich dem Server mitgeteilt, das der Client eine Verbindung haben möchte. Daten der Webseite werden zu diesem Zeitpunkt noch nicht übertragen. Die Werte sind hier nicht ganz einfach zu interpretieren, sobald der Verbindungsaufbau aber mehrere 100ms braucht ist vermutlich irgendetwas verkehrt und es sollte weiter untersucht werden was diese Verzögerung verursacht. Leider lässt sich das nicht mehr so einfach mit Bordmitteln erledigen und ein Profi sollte zu Rate gezogen werden.

 

  • Sending: Der Client schickt nun die Anfrage an den Server die beinhaltet was er tun möchte (Anzeigen einer Webseite, Laden eines Bildes, … ) und, sofern es sich um einen Upload handelt, auch noch Nutzdaten. Die gemessene Zeit hängt dabei stark von der Größe der Anfrage und der Bandbreite ab die zu Verfügung steht. In erster Linie ist hierfür der Client verantwortlich, sind die Werte für die übertragene Datenmenge zu hoch, liegt vermutlich ein Problem mit der Internetverbindung vor.

 

  • Waiting: Hier hat der Client keinen Einfluss mehr, der Server verarbeitet die Anfrage bzw. die Daten. Normale Seiten ohne komplexe Inhalte können hier im Bereich bis zu einer Sekunde liegen. Handelt es sich um komplexe Anfragen die z.B. viele Daten aus einer Datenbank anfordern kann sich die Wartezeit auch stark verlängern. In den meisten Fällen sollte die Verzögerung aber kaum spürbar sein. Braucht ein Server ungewöhnlich lange ist vermutlich etwas mit dem Server nicht in Ordnung, die Konfiguration nicht optimal oder die Skripte der Webseite arbeiten ineffizient.

 

  • Receiving: Ist der Server fertig, schickt er die Daten zurück an den Client. Wie auch das Senden ist dieser Prozess abhängig von der Bandbreite und Probleme hier hängen mit hoher Wahrscheinlichkeit mit der Internetverbindung des Clients zusammen.

Sind die Daten an sich unauffällig, der Seitenaufbau erscheint aber trotzdem sehr träge muss das Problem intensiver untersucht werden, das geht ebenfalls nicht mehr nur mit dem Browser und es sollten ein Spezialist damit beauftragt werden.

Um die Daten zu exportieren, um sie beispielsweise einem Experten zu zeigen reicht im Chrome ein Rechtsklick auf eine beliebige Stelle im Anzeigefenster der Entwicklertools und ein Klick auf „Save as HAR with content“ um eine Datei mit den erhaltenen Daten zu erstellen. Der Firefox bietet leider keine Exportfunktion an.