Technic Blog

Technik BlogMake websites faster

19. April 2018 Tanja Schraffl

Page Speed Monitoring

Die Ursachen von Performance-Problemen auf der Website zu finden, ist eine komplexe und zeitaufwändige Aufgabe. Die Analyse ist sehr schwierig, da eine Reihe von Faktoren die Ladezeit einer Website auf dem Weg vom Server zum Nutzer beeinflussen. In den meisten Fällen ist dies eine hoffnungslose Aufgabe, wenn wichtige Metriken auf verschiedenen Ebenen nicht verfügbar sind. netsensor PageSpeed Monitoring hilft, die Nadel im Heuhaufen zu finden. Die aussagekräftigen Metriken im Page Speed Test zeigen, ob die Ursache im Content Delivery Network, bei eingebetteten Objekten von Drittanbietern oder auf Applikationsebene liegt.

Test Szenario

Der Page Speed Test wird automatisch mit der headless Version von Google/Chrome, dem derzeit beliebtesten Browser, durchgeführt. Die virtuelle Fenstergröße beträgt 1366×768 Pixel, die häufigste Bildschirmauflösung von Browsersystemen. Die Belastung der Prüfsysteme wird ständig überwacht, um fehlerhafte Prüfergebnisse zu vermeiden. Damit ist sichergestellt, dass die Ergebnisse mit den Ladezeiten eines realen Benutzers vergleichbar sind.

Je nach den möglichen Netzwerkpfaden werden bis zu drei verschiedene Tests pro Testzyklus (5 Minuten) durchgeführt. Der erste Test ermittelt die Ladezeit über den Standardpfad (z. B. CDN) inklusive aller Objekte (Bilder, Javascript) externer Domains. Beim zweiten Test geht es darum, den Einfluss externer Domänen zu eliminieren. Der dritte Test umgeht das Content Delivery Network.

Monitoring Summary

Alle überwachten und geprüften Metriken werden nach dem Test gruppiert und in der Summary angezeigt. Die Prüfungen werden mit Hilfe von konfigurierten Schwellenwerten durchgeführt und geben Auskunft über den Zustand einer Metrik. Je nach Status einer Kennzahl werden Ereignisse ausgelöst und in der Ereignisübersicht aufgelistet. Wenn ein Ereignis eintritt, werden alle Messwerte eines Tests in einem metrischen Protokoll gespeichert. Diese Protokolle werden ein Jahr lang aufbewahrt und bei der Auswahl eines Ereignisses angezeigt. Ereignisse können Eskalationsprozesse wie Benachrichtigungen oder automatische Wiederherstellungsverfahren auslösen.

Es ist auch möglich, die metrischen Protokolle zu speichern, ohne Ereignisse auszulösen (recording). Diese Funktion wird ebenfalls über konfigurierte Schwellwerte gesteuert und dient in erster Linie der nachträglichen Analyse von Anomalien.

Page Load Summary
Page Load History
Load Status

Gibt den Returncode des Tests an. Mögliche Werte:

OK Alle Dateien konnten geladen werden, keine Zeitüberschreitungen bei fehlgeschlagenen Anfragen (Status <= 400)
COMPLETE Mindestens ein Objekt mit Status >= 400 (z.B. Datei nicht gefunden)
TIMEOUT Keine Antwort vom Server innerhalb des definierten Timeouts
ERROR DNS oder sonstiger Fehler

Time To First Byte

Zeit, die damit verbracht wurde, auf die erste Antwort zu warten. Diese Zeit erfasst die Latenzzeit des Hin- und Rückwegs zum Server sowie die Wartezeit, die der Server auf die Antwort wartet.

Eine langsame Zeit bis zum ersten Byte (TTFB) wird durch eine hohe Wartezeit erkannt. Es wird eine TTFB von unter 200ms empfohlen. Ein hoher TTFB zeigt eines von zwei Hauptproblemen:

  • Schlechte Netzwerkbedingungen zwischen Client und Server oder
  • Eine langsam reagierende Serveranwendung

Idealerweise sollten die Metriken für verschiedene Netzwerkpfade nahezu identisch sein. Wenn dies der Fall ist und die TTFB dennoch hoch ist, muss die Anwendung für die Antwortgeschwindigkeit optimiert werden. Dies kann bedeuten, Datenbankabfragen zu optimieren, einen Cache für bestimmte Teile des Inhalts zu implementieren oder die Konfiguration des Webservers zu ändern. Wenn die TTFB im lokalen Test niedrig ist (CDN-Bypass), dann sind die Netzwerke zwischen dem Überwachungsgerät und dem CDN oder zwischen CDN und dem Server das Problem.

Page Loaded

Page Loaded wird nach DOMComplete gemessen, wenn die Verarbeitung der Seite abgeschlossen ist und alle Ressourcen auf der Seite (Bilder, CSS, etc.) das Herunterladen beendet haben. An diesem Punkt hört der Loading Spinner auf sich im Browser zu drehen (entspricht der roten vertikalen Linie im Google/Chrom-Wasserfall-Diagramm). Bitte beachten, dass einige Elemente der Website erst nach Auslösung dieses Ereignisses geladen werden - wie z.B. JavaScript-basierte Image Carousels.

Page Load Timeline

Interactive Metric Charts

Numerische Metriken können in interaktiven Diagrammen dargestellt werden. Die Diagramme sind in zwei Teile gegliedert. Der Darstellungsbereich ermöglicht es, die Metriken zu vergrößern. Der Navigationsbereich unterstützt die Ansicht in der aufgezeichneten Historie.

Page Load Timeline

Page Load Summary

In der Übersicht findet man die wichtigsten Informationen zum Test. Dazu gehören die URL, die Anzahl der Requests für Web-Objekte (Items) zur Darstellung der initialen Ansicht und die Gesamtgröße des Downloads (die Gesamtgröße der Response-Header plus Response-Body, wie sie vom Server geliefert wird). Sofern vorhanden und im Test aufgezeichnet, werden diese Daten auch separat für externe Domains aufgeführt.

Page Load Timeline
DOM Loaded

DOM Loaded entspricht DOMContentLoaded. Der Browser löst dieses Ereignis typischerweise aus, sobald der HTML-Code geparst wurde, der Dokumentbaum erstellt wurde und alle nicht asynchrone Skripte ausgeführt wurden (einschließlich Skripte mit Verzögerung). Dies kann passieren, bevor Ressourcen (Bilder, Iframes, Stylesheets, Fonts, Frames) geladen werden. Die meisten Entwickler kennen dieses Ereignis durch jQuery's ready(), mit dem Sie Callbacks anhängen können, die ausgeführt werden sollen, sobald das Dokument lese- und manipulierbar ist.

Page Loaded

Page Loaded wird gemessen, sobald alle Ressourcen heruntergeladen wurden (einschließlich asynchrone Skripte) und das onLoad-Ereignis ausgelöst wurde. Diese Zeit zeigt an, dass die gesamte Verarbeitung abgeschlossen ist und alle Ressourcen auf der Seite (Bilder, etc.) mit dem Herunterladen fertig sind - mit anderen Worten, der Loading Spinner hat aufgehört, sich zu drehen. Beachten Sie, dass alle Ressourcen keine AJAX-Anfragen und dynamisch hinzugefügte Ressourcen enthalten.

Bei externen Domänen entspricht Page Loaded der Gesamtübertragungszeit aller zugehörigen Objekte dieser Domäne.

Page Item Report

Der Page Item Report zeigt eine Liste aller Requests, die während des Ladens der Seite gestellt wurden. Jeder Request wird in einer eigenen Zeile angezeigt und zeigt alle Metriken detailliert für jedes einzelne Web-Objekt an. Die Anforderungsliste zeigt auch eine Zeitleiste für die verschiedenen Teile jeder Anforderung an. Jeder Zeitleiste wird eine horizontale Position in ihrer Zeile relativ zu den anderen Requests zugewiesen, so dass Sie die Gesamtzeit für das Laden der Seite sehen können. Weitere Informationen über das Web-Objekt und den dazugehörigen HTTP-Request- und Response-Header finden sich in der Detailansicht.

Page Load Timeline
Start

Startzeit jedes Requests relativ zum letzten Load-Ereignis des HTML-Dokuments. Fast gleiche Zeitwerte deuten darauf hin, dass die Requests parallel gesendet wurden. Google/Chrome kann bis zu 6 gleichzeitige Anfragen an eine Domain senden.

DNS

Zeit, die für die Durchführung der DNS-Suche aufgewendet wurde. Jede neue Domain auf einer Seite erfordert einen kompletten Roundtrip, um den DNS-Lookup durchzuführen.

Connect

Zeit, die benötigt wurde, um eine Verbindung aufzubauen, einschließlich TCP-Handshakes und -Versuche sowie die Aushandlung einer SSL-Verbindung. Diese Metrik wird nur angezeigt, wenn eine TCP/IP-Verbindung aufgebaut ist. Wenn die Verbindung für eine andere Anfrage wiederverwendet wird, erscheint diese Metrik nicht in der Zeitachse der Anfrage.

Receive

Zeitaufwand für den Empfang der Antwortdaten.

HTTP Details

Im Popup Window für die HTTP Header werden die Request-URL, die HTTP-Methode und der Response-Statuscode der Ressource angezeigt. Zusätzlich werden die HTTP-Response- und Request-Header mit den Werten sowie alle Query-String-Parameter aufgelistet. In einem speziellen Testmodus enthält der Response Header das Feld Selected-Node. Der Wert bezieht sich auf die IP-Adresse des verarbeitenden Servers. Dies ermöglicht die Korrelation der Ergebnisse mit Server-Logfiles zur weiteren Analyse.

Page Load Summary