Wasserfalldiagramme sind Diagramme, die darstellen, wie Websiteressourcen heruntergeladen, vom Modul analysiert, in einer Zeitleiste, die uns die Möglichkeit gibt, die Reihenfolge und Abhängigkeiten zwischen Ressourcen zu sehen. Es hilft bei der Identifizierung, wo wichtige Ereignisse während des Ladevorgangs passiert sind. Sie können den Benutzer auch leicht sehen lassen, wie gut oder schlecht die Leistung ihrer Website ist, zeigt Ihnen genau, was Ihre Website verlangsamt.
Wasserfalldiagramme innerhalb der Dotcom-Monitor-Plattform können Benutzern dabei helfen, zu erkennen, wo wichtige Ereignisse während des Seitenladevorgangs aufgetreten sind. Wasserfalldiagramme lassen uns einen Kaskadeneffekt über mehrere Aufgaben sehen, und in wenigen Sekunden kann der Benutzer sehen, wie schlecht/gut die Leistung der Website ist, z. B. wie viele Ressourcen parallele Downloads blockieren oder wie viele Zeilen vorhanden sind. Der Benutzer verfügt über die Zusammenfassung auf dem Gerät mit beschreibenden Visualisierungen von Gerätestatistiken in Kreisdiagrammen. Benutzer können auch das tatsächliche URL-Ladevideo im Browserfenster ansehen.
Der Screenshot unten ist ein Beispiel eines Wasserfalldiagramms von amazon.com, um vorzustellen, wie Wasserfalldiagramme aussehen. Wie Sie sehen können, gibt es viele verschiedene Elemente, die während der Ladezeit der Seite ins Spiel kommen. Einige dieser Faktoren sind die folgenden:
- Url
- Testort
- Browser (Chrome, Firefox, Internet Explorer, mobile Browser etc…)
- Verbindung
- Anzahl der Tests
- Wiederholungsansicht
In Wasserfalldiagrammen verwendete Elemente
Interaktiver Schieberegler: Der interaktive Schieberegler ist ein Indikator für die Leistung jedes Elements in Millisekunden. In der Abbildung unten wird er mit dem Pfeil gezeigt. Der Benutzer kann den interaktiven Schieberegler ziehen, um zu sehen, welches Element geladen wird und zu welchem Zeitpunkt. In diesem Screenshot können Sie sehen, dass die hervorgehobenen Elemente in der 531. Millisekunde geladen werden.
Ladezeitraster: Der hervorgehobene Bereich unten heißt Load Time Grid. Es zeigt, wie viel Zeit zum Laden für jedes Element benötigt wird.
Elementliste: Die Elemente, die auf der Webseite vorhanden sind, werden in der Elementliste angezeigt. Die Erweiterung des Elements kann HTML, CSS, GIF usw. sein.
Elementleistung: Ein Benutzer kann die Informationen über die Leistung jedes Elements erreichen, das im Wasserfalldiagramm vorhanden ist.
Wenn der Benutzer auf die Schaltfläche für bestimmte Elemente klickt, wird er von einer Leistungsseite begrüßt, die unten gezeigt wird.
Durch die Analyse der Leistungsseite verfügt der Benutzer über ein tieferes Wissen über die Antwortdetails. Sie können die gewünschte Option auswählen und die Maustaste loslassen, um Details anzuzeigen. Der Benutzer kann auch die Leistungsprobleme beobachten, indem er auf den rot markierten Bereichachtet, was bedeutet, dass es eine Leistungsausfallperiode gibt.
Ladezeitdetails für einzelne Elemente: Wenn der Benutzer im Wasserfalldiagramm seinen Cursor auf einen bestimmten Balken bewegt, werden ihm Details zur Ladezeit angezeigt, die DnsTime, ConnectTime, SSLTime, RequestTime, FirstByteTime, ResponseTime, StartTime, EndTime, Speed sind, die in einem roten Oval angezeigt werden.
Erklärung der Farbcodierung: Innerhalb der Dotcom Monitor-Plattform wird die Darstellung von Lastzeitdetails durch die folgenden Farben definiert:
Navigation Timings: Sie können als Spalte im Wasserfalldiagramm angezeigt werden, um den Navigationsstart, Den umleitenstart, Redirect End, Fetch Start, Domain Lookup Start, Domain Lookup End, Connect Start, Secure Connection Start, Connect End, Request Start, Response Start, Response End, Unload Event Start, Unload Event End, DOM Loading, DOM Interactive, DOM Content Loaded Event Start, DOM Content Loaded Event End , DOM Complete, Load Event Start und Load Event End mit Farbcodierung (siehe unten im roten Oval).
Es ist wichtig zu erwähnen, dass es innerhalb der Dotcom Monitor-Plattform eine Funktion gibt, dass ein Benutzer das tatsächliche URL-Ladevideo im Browserfenster ansehen kann (siehe unten).
Optimieren der Webleistung durch Grundlegendes zu Wasserfalldiagrammen
Leistung und Geschwindigkeit einer Website spielen eine enorme Rolle. Wenn Ihre Website nicht schnell genug ist, wartet der Benutzer nicht darauf, dass das Laden abgeschlossen ist. Eine schnelle Website erhöht die Conversion-Raten und führt Sie zu guten Leistungen auf Suchmaschinen. Um die Geschwindigkeit Ihrer Website zu verstehen, werden Wasserfalldiagramme verwendet. Wasserfalldiagramme helfen Ihnen, die Problemquelle zu identifizieren und sind eine gute Möglichkeit, zu diagnostizieren, was Ihre Webseiten verlangsamt.
In einem Wasserfalldiagramm, indem Sie eine Größe einer Datei suchen, die mehr als 1 MB ist, kann dazu führen, dass Ihre Website verlangsamt wird. Mit Hilfe der Zeitleiste im Wasserfalldiagramm ist der Benutzer in der Lage, die verschiedenen Phasen der Ressourcenauslastung zu entdecken und zu verstehen, welche Phasen seine Website verlangsamen. Im Folgenden werden einige der Phasen vorgestellt:
- Empfangen. Die Zeit, die zum Herunterladen von Dateien benötigt wird. Dies ist die erste Phase der Zeitleiste. Große Dateien, z. B. nicht optimierte Bilder, verzögern die Downloadzeit und absorbieren mehr Bandbreite, was zu einer Verzögerung auf der Website führt. Die Lösung für dieses spezifische Problem ist, dass der Benutzer Medien optimieren sollte, indem er die Größe der Bilder reduziert, ohne ihre Qualität zu verringern. Um die Bandbreitenverfügbarkeit zu erhöhen, sollte der Benutzer die Bilder auf einem Cloud-Server speichern.
- Wartezeit. Die vom Server erfasste Zeit, um eine Antwort zu erzeugen. Wenn die Wartezeit zu groß ist, kann dies einen überlasteten Netzwerkserver bedeuten oder es kann einen ineffizienten Code geben, der von Softwareentwicklern behoben werden muss, indem die Fehler gefunden und der Code korrigiert wird. Darüber hinaus kann das Caching-Dienstprogramm die Wartezeit verringern. In diesem Fall sollte der Benutzer vom Shared Hosting zu dediziertem Hosting wechseln.
- Warteschlangenanforderung. Besteht aus bequemen Verbindungen HTTP/HTTP2, HTTP-Authentifizierung, Ausführung von CSS oder JavaScript, SSL-Verbindungszeit, ist eine wichtige Phase der Zeitleiste.
- DNS-Suche. Besteht die Zeit für das DNS zu lösen und gibt dem Benutzer einen großen Hinweis, was die Website verlangsamt. Im Allgemeinen verlangsamen die meisten Skripts die Websites aufgrund der DNS-Suche.
Wenn der Benutzer die Probleme identifiziert, die seine Webseite mit Hilfe von Wasserfalldiagrammen verlangsamen, kann er beginnen, eine Lösung für das Problem zu finden. Einige der Probleme und ihre Lösungen sind unten dargestellt.
| Problemlösung |
Link zur Seitenverfolgung | Deinstallieren oder Entfernen des in Verwendung ist enk- oder entfernten Überwachungstools |
| Langsame DNS-Suche | Der Benutzer kann ein CDN verwenden |
| Langsames Serverende | Senden Sie eine E-Mail an Ihren Dienstanbieter. |
| Fehler aufgrund von Plugins | Der Benutzer kann die Plugins deinstallieren. |
| Unbenutzte/sperrige Theme-Anpassung | Der Benutzer kann einen Webentwickler beauftragen |
Auch einAnfänger-Benutzer kann schnell verstehen, die spezifischen Gründe, die ihre Website verlangsamen, indem sie die Wasserfall-Charts. Lange Balken bedeuten beispielsweise, dass das zugehörige Element zu viel Zeit zum Laden benötigt, roter Text bedeutet einen Fehler, der Daten abruft, und lange Lücken zwischen Balken bedeuten Zeiten, in denen keine Anforderungen vorhanden sind.
Wie man Websites schneller laden lässt
Durch die Verwendung von Wasserfalldiagrammen können wir eine großartige Benutzererfahrung erstellen, indem wir eine Webseite schneller laden.
Verringern Sie die Breite des Wasserfalls
Die Website-Leistung kann verbessert werden, indem die Zeit, die zum Herunterladen der Ressourcen benötigt wird, die die Breite des Wasserfalldiagramms verringern.
Wenn es lange violette Balken in der Wasserfall-Diagramm .
Purple bedeutet die Zeit, die für die Durchführung einer SSL/TLS-Aushandlung aufgewendet wird. Falls ein Benutzer ständig mit Violett konfrontiert wird, bedeutet dies, dass die Website nicht für TLS optimiert ist. Der Benutzer muss die TLS-Leistung optimieren.
Wenn es viel Orange in der Wasserfall-Diagramm. Orange bezeichnet die erste TCP-Verbindung für Ihre Website. Nur 2-6 Anforderungen an einen bestimmten Hostnamen sollten eine TCP-Verbindung erstellen. Nach 2-6 Anforderungen werden die vorhandenen Verbindungen wiederverwendet. Wenn ein Benutzer mit viel Orange konfrontiert ist, muss er verstehen, dass die Website keine persistenten Verbindungen verwendet. Wenn eine dauerhafte Verbindung hergestellt wird, beträgt die Breite jeder Anforderung die Hälfte, da der Webbrowser nicht mit jeder Anforderung neue Verbindungen herstellen wird.
Wenn es lange blaue Balken in der Wasserfall-Diagramm .
Blaue Farbe bedeutet Zeit, die für das Herunterladen der Antwort aufgewendet wird. Wenn es einen langen blauen Balken gibt, besteht eine hohe Wahrscheinlichkeit, dass die Ressource zu groß ist. Das Verringern der Dateigröße der Datei kann zur Lösung des Problems beitragen. Ein Benutzer kann die Größe durch Bildoptimierung oder HTTP-Komprimierung verringern.
Wenn es zu viel Grün ist, das Wasserfalldiagramm
. Die grüne Farbe bedeutet, dass der Browser darauf wartet, Inhalte zu erhalten. Um das Grün zu reduzieren, sollte der Benutzer den statischen Inhalt in ein CDN verschieben.
Verringern der Höhe des Wasserfalldiagramms
Die Website-Geschwindigkeit kann verbessert werden, indem die Anzahl der Anforderungen verringert wird, die der Browser ausführen muss, um die Webseite zu laden, was zu einer Verringerung der Höhe des Wasserfalls führt. Der Benutzer muss alle Inhalte auf jeder Seite überprüfen und entscheiden, ob er sie wirklich braucht.
Wenn zu viele JavaScript/CSS-Dateien kleiner als 2kb sind.
Der Benutzer muss den Inhalt dieser Dateien direkt in den HTML-Code einbinden, indem er , or
Schilder.
Wenn sich zu viele JavaScript/CSS-Dateien im Wasserfalldiagramm befinden.
Der Benutzer muss sie mit einem CMS-Plugin oder als Teil eines Build-Prozesses kombinieren. Durch diese Aktion wird die Anzahl der gestellten Anforderungen verringert und die Seitengeschwindigkeit erhöht.
Wenn es zu viele 302 Umleitungen gibt.
Gelbe Zeilen bedeuten Umleitungen, was bedeutet, dass Links auf der Seite fälschlicherweise erstellt oder veraltet sind, die unnötige Umleitungen erstellen, die die Höhe des Wasserfalls erhöhen. Die Lösung besteht darin, diese Links durch direkte Verbindungen zu ersetzen.
Erhöhen der Renderzeit
Um die Renderzeit zu verbessern, sollte der Benutzer die Reihenfolge der Ressourcenanforderungen optimieren, wodurch die grüne Zeile Rendern starten nach links verschoben wird.
Wenn zu viele Anforderungen für separate CSS-Dateien
vorhanden sind. Bevor Browser mit dem Rendern der Seite beginnen, warten sie, bis das gesamte CSS heruntergeladen ist. Der Benutzer sollte diese CSS-Dateien inline oder kombiniert.
Wenn ein Benutzer Aufrufe zum Laden von JavaScript-Bibliotheken sieht.
JavaScript enthält kann das Seitenrendering blockieren. Der Benutzer sollte diese auf der Seite nach unten verschieben.
Wenn ein Benutzer externe Schriftarten sieht
. Solange der Browser die externe Schriftart nicht herunterlädt, wird nichts gezeichnet. Der Benutzer sollte die Verwendung externer Schriftarten vermeiden.
Erster Besuch und Wiederholungsbesuch. Was ist wichtiger?
Basierend auf dem Besuch des Benutzers können zwei Arten von Wasserfalldiagrammen erstellt werden: First Visit und Repeat Visit. Was ist der Unterschied?
Leerer Cache (erste Ansicht): Der Benutzer greift zum ersten Mal auf die Website zu und hat keine zwischengespeicherten Daten. Typische browserbasierte Tools löschen den Cache, bevor die Anforderungen gestellt werden. Mit anderen Worten, die Menschen besuchen die Website zum ersten Mal.
Cached Mode (Wiederholungsbesuch): Der Benutzer greift zum zweiten Mal auf die Website zu und emuliert einen zweiten Besuch aus der Perspektive des Benutzers, der alle Dateien enthält, die jetzt in einem lokalen Speicher zwischengespeichert werden. Mit anderen Worten, weil die Leute Ihre Website vorher besucht haben, jetzt können sie Ihre Bilder haben, CSS in ihrem Browser kassiert, so dass das System nicht viel für sie liefern muss.
In den Screenshots unten können Sie sehen, wie unterschiedlich die erste Besuchswasserfall-Diagramm und die Wiederholung Besuch Wasserfall Diagramm sind.
Eines der wichtigsten Dinge zu realisieren ist, dass der leere Cache dauert 6,8 Sekunden zu laden, während die Wiederholung, die ein zwischengespeicherter Modus ist, dauert 1,9 Sekunden.
Wenn die Website gut funktioniert, wird es der gleiche Fall in Bezug auf den Vergleich von Timings sein, mit leeren Cache dauert mehr Zeit als zwischengespeicherte Version. Der Grund ist beim ersten Besuch, Tools leeren den Cache, bevor die Anforderungen, und beim wiederholten Besuch, das System wird die Dateien, die in einem lokalen Speicher zwischengespeichert werden können, was zu einer kürzeren Zeit, um die Website zu laden.
Das Diagramm cached Mode (Repeat View) hat weniger Zeilen, was bedeutet, dass viel weniger Ressourcen geladen wurden. Dies ist ein gutes Beispiel für eine Website, auf der effizientes Caching verwendet wird.
Ohne etwas auf der Website zu ändern, würde der wiederholte Besuch schneller reagieren, da die Elemente zwischengespeichert werden. Der erste Besuch würde mehr Zeit in Anspruch nehmen als der wiederholte Besuch. Wenn etwas auf der Website nicht stimmt, was die Website verlangsamt, korrigiert der Benutzer sie. Und sie testen die Website erneut. Dabei werden Faktoren wie Geolocation, CDN-Server und PoP (Points of Presence) berücksichtigt. Sie können anhand von Wasserfalldiagrammen sehen, welches Element den Prozess verlangsamt. Vielleicht verwendet die Website zu viel CPU. Nach der Korrektur können sie die Website erneut testen.
Der erste Besuch ist wichtig, da der Benutzer versteht, wie viel Zeit es braucht, um die Bilder und andere Ressourcen herunterzuladen. Der wiederholte Besuch ist auch deshalb wichtig, weil der Benutzer nach dem Zwischenspeichern bewerten sollte, wie viel Zeit zum Laden der verbleibenden Elemente benötigt wird. Darüber hinaus beobachtet der Benutzer, welche Ressourcen zwischengespeichert werden, indem er die Wasserfalldiagramme vom ersten Besuch und Wiederholungsbesuch betrachtet. Auf diese Weise kann ein Benutzer die Leistung der Website und Inhaltsprobleme mit Ressourcen verstehen.
Möchten Sie sehen, welche Elemente Ihre Website verlangsamen könnten? Führen Sie einen kostenlosen Website-Geschwindigkeitstest durch und zeigen Sie Ihre Ergebnisse anhand von Wasserfalldiagrammen und Leistungsberichten an.
Verwenden eines Wasserfalldiagramms zum Überwachen der richtigen CDN-Verteilung
Ein Content Delivery Network (CDN) ist eine geografisch verteilte Gruppe von Servern, die für die Bereitstellung statischer Inhalte für die Endbenutzer optimiert sind. Dieser statische Inhalt kann fast jede Art von Daten sein, aber CDNs werden in der Regel verwendet, um Webseiten und ihre zugehörigen Dateien, Audio, Streaming-Video und große Softwarepakete zu liefern.
CDN-Nutzung
Die Edge-Server eines CDN erhöhen die Geschwindigkeit, indem sie die Lücke zwischen Website-Ressourcen und seinen Besuchern überbrücken. Anstatt Anforderungen direkt an den Ursprung einer Website zu stellen, stellen Benutzer eine Verbindung zu den verschiedenen CDN-Verteilungsplattformen her, über die der Anbieter verfügt. Je näher eine Anforderung rückt, desto mehr Zeit wird eingespart. Darüber hinaus bietet das CDN-Hosting eine Dateikomprimierung, die das Allgemeine Surfen verbessert, da kleinere Dateigrößen höhere Ladegeschwindigkeiten bedeuten.
Verwenden von Wasserfalldiagrammen zum Überwachen von CDNs
Im Screenshot eines Wasserfalldiagramms unten stellt der Bereich Überwachung URL die Liste aller einzelnen Elemente zusammen mit ihrer Größe und Leistung auf der rechten Seite dar.
Wenn der Benutzer ein CDN nutzt, können viele Dateien und Ressourcen aus dieser einen Quelle stammen – eine Möglichkeit, um festzustellen, ob das CDN richtig konfiguriert ist.
Benötigen Sie ein CDN?
Wasserfalldiagramme ermöglichen es dem Benutzer zu entdecken, wie Latenz die Geschwindigkeit der Website beeinflusst. Wenn Sie weiter zum farbcodierten Diagramm weiter oben im Artikel zurückkehren, bedeutet die gelbe Leiste, dass der Webbrowser auf Daten vom Domain Name Server (DNS) wartet. Im Allgemeinen werden 100ms Wartezeit als normal akzeptiert, während 400ms als langsam angesehen werden. Wenn ein Geschwindigkeitsproblem auftritt, kann es als ressource interpretiert werden, die zu viel Zeit zum Herunterladen in Anspruch nimmt oder ihre Größe zu groß ist. Darüber hinaus kann dies bedeuten, dass die Übertragungsgeschwindigkeit des Webservers zu langsam ist. Bei diesem spezifischen Problem kann die Verwendung von CDN eine Lösung sein, um die Wartezeit zu verringern.
Wenn der Benutzer zu lange Wartezeiten hat, um eine Antwort zu erhalten, kann dies außerdem bedeuten, dass der Inhalt der Website physisch weiter vom Besucher entfernt ist. Um entscheiden zu können, ob CDN benötigt wird, muss der Standort des Servers bekannt sein. Dazu kann eine Plattform wie Dotcom-Monitor genutzt werden, um einen Standort zu überwachen, der am weitesten von Ihrem Server entfernt ist. Überprüfen Sie das Wasserfalldiagramm und die Zeilen für Anforderungen und Ressourcen. Wenn die Wartezeit mehr als 100 ms beträgt, sollte der Benutzer die Verwendung von CDN in Betracht ziehen.
Testen Sie die vollständige Dotcom-Monitor Plattform 30 Tage lang kostenlos.
