{"id":9687,"date":"2020-05-25T07:23:38","date_gmt":"2020-05-25T07:23:38","guid":{"rendered":"https:\/\/www.dotcom-monitor.com\/blog\/2020\/05\/25\/optimieren-web-performance-understanding-waterfall-charts\/"},"modified":"2026-06-15T15:37:05","modified_gmt":"2026-06-15T15:37:05","slug":"optimieren-web-performance-understanding-waterfall-charts","status":"publish","type":"post","link":"https:\/\/www.dotcom-monitor.com\/blog\/de\/optimieren-web-performance-understanding-waterfall-charts\/","title":{"rendered":"Optimieren der Webleistung: Grundlegendes zu Wasserfalldiagrammen"},"content":{"rendered":"<p>Wasserfalldiagramme sind Diagramme, die darstellen, wie Websiteressourcen heruntergeladen, vom Modul analysiert, in einer Zeitleiste, die uns die M\u00f6glichkeit gibt, die Reihenfolge und Abh\u00e4ngigkeiten zwischen Ressourcen zu sehen. Es hilft bei der Identifizierung, wo wichtige Ereignisse w\u00e4hrend des Ladevorgangs passiert sind. Sie k\u00f6nnen den Benutzer auch leicht sehen lassen, wie gut oder schlecht die Leistung ihrer Website ist, zeigt Ihnen genau, was Ihre Website verlangsamt.<\/p>\n<p>Wasserfalldiagramme innerhalb der <a style=\"color: #0000ff;\" href=\"https:\/\/www.dotcom-monitor.com\/de\/\">Dotcom-Monitor-Plattform<\/a> k\u00f6nnen Benutzern dabei helfen, zu erkennen, wo wichtige Ereignisse w\u00e4hrend des Seitenladevorgangs aufgetreten sind. Wasserfalldiagramme lassen uns einen Kaskadeneffekt \u00fcber 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\u00fcgt \u00fcber die Zusammenfassung auf dem Ger\u00e4t mit beschreibenden Visualisierungen von Ger\u00e4testatistiken in Kreisdiagrammen. Benutzer k\u00f6nnen auch das tats\u00e4chliche URL-Ladevideo im Browserfenster ansehen.<\/p>\n<p>Der Screenshot unten ist ein Beispiel eines Wasserfalldiagramms von amazon.com, um vorzustellen, wie Wasserfalldiagramme aussehen. Wie Sie sehen k\u00f6nnen, gibt es viele verschiedene Elemente, die w\u00e4hrend der Ladezeit der Seite ins Spiel kommen. Einige dieser Faktoren sind die folgenden:<\/p>\n<ul>\n<li>Url<\/li>\n<li>Testort<\/li>\n<li>Browser (Chrome, Firefox, Internet Explorer, mobile Browser etc&#8230;)<\/li>\n<li>Verbindung<\/li>\n<li>Anzahl der Tests<\/li>\n<li>Wiederholungsansicht<\/li>\n<\/ul>\n<p><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Waterfall-Chart_Amazon.png\" alt=\"waterfall chart_amazon\" width=\"774\" height=\"946\" \/><\/p>\n<h2 id='in-wasserfalldiagrammen-verwendete-elemente'  id=\"boomdevs_1\">In Wasserfalldiagrammen verwendete Elemente<\/h2>\n<p><strong>Interaktiver Schieberegler<\/strong>: Der interaktive Schieberegler ist ein Indikator f\u00fcr 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\u00f6nnen Sie sehen, dass die hervorgehobenen Elemente in der 531. Millisekunde geladen werden.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Interactive-Slider.png\" alt=\"Interactive Slider\" width=\"1008\" height=\"340\" \/><\/p>\n<p><strong>Ladezeitraster<\/strong>: Der hervorgehobene Bereich unten hei\u00dft Load Time Grid. Es zeigt, wie viel Zeit zum Laden f\u00fcr jedes Element ben\u00f6tigt wird.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Load-Time-Grid-1024x602.png\" alt=\"Load Time Grid\" width=\"800\" height=\"470\" \/><\/p>\n<p><strong>Elementliste<\/strong>: Die Elemente, die auf der Webseite vorhanden sind, werden in der Elementliste angezeigt. Die Erweiterung des Elements kann HTML, CSS, GIF usw. sein.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Element-List-1024x704.png\" alt=\"Element List\" width=\"800\" height=\"550\" \/><\/p>\n<p><strong>Elementleistung<\/strong>: Ein Benutzer kann die Informationen \u00fcber die Leistung jedes Elements erreichen, das im Wasserfalldiagramm vorhanden ist.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Element-Performance-1024x530.png\" alt=\"Element Performance\" width=\"800\" height=\"414\" \/><\/p>\n<p>Wenn der Benutzer auf die Schaltfl\u00e4che f\u00fcr bestimmte Elemente klickt, wird er von einer Leistungsseite begr\u00fc\u00dft, die unten gezeigt wird.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Performance-Page.png\" alt=\"Performance Page\" width=\"956\" height=\"660\" \/>Durch die Analyse der Leistungsseite verf\u00fcgt der Benutzer \u00fcber ein tieferes Wissen \u00fcber die Antwortdetails. Sie k\u00f6nnen die gew\u00fcnschte Option ausw\u00e4hlen und die Maustaste loslassen, um Details anzuzeigen. Der Benutzer kann auch die Leistungsprobleme beobachten, indem er auf den <em>rot markierten Bereich<\/em>achtet, was bedeutet, dass es eine Leistungsausfallperiode gibt.<\/p>\n<p><strong>Ladezeitdetails f\u00fcr einzelne Elemente<\/strong>: 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Load-Time-Details.png\" alt=\"Load Time Details\" width=\"1012\" height=\"673\" \/><\/p>\n<p><strong>Erkl\u00e4rung der Farbcodierung<\/strong>: Innerhalb der Dotcom Monitor-Plattform wird die Darstellung von Lastzeitdetails durch die folgenden Farben definiert:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Color-Coding.png\" alt=\"Color Coding\" width=\"616\" height=\"119\" \/><\/p>\n<p><strong>Navigation Timings<\/strong>: Sie k\u00f6nnen 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).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Navigation-Timings.png\" alt=\"Navigation Timings\" width=\"997\" height=\"750\" \/><\/p>\n<p>Es ist wichtig zu erw\u00e4hnen, dass es innerhalb der Dotcom Monitor-Plattform eine Funktion gibt, dass ein Benutzer das tats\u00e4chliche URL-Ladevideo im Browserfenster ansehen kann (siehe unten).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Load-Video-Capture-1024x572.png\" alt=\"Load Video Capture\" width=\"800\" height=\"447\" \/><\/p>\n<h2 id='optimieren-der-webleistung-durch-grundlegendes-zu-wasserfalldiagrammen'  id=\"boomdevs_2\">Optimieren der Webleistung durch Grundlegendes zu Wasserfalldiagrammen<\/h2>\n<p>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\u00f6ht die Conversion-Raten und f\u00fchrt 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\u00f6glichkeit, zu diagnostizieren, was Ihre Webseiten verlangsamt.<\/p>\n<p>In einem Wasserfalldiagramm, indem Sie eine Gr\u00f6\u00dfe einer Datei suchen, die mehr als 1 MB ist, kann dazu f\u00fchren, 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 <em>Phasen<\/em> seine Website verlangsamen. Im Folgenden werden einige der Phasen vorgestellt:<\/p>\n<ul>\n<li><strong>Empfangen<\/strong>. Die Zeit, die zum Herunterladen von Dateien ben\u00f6tigt wird. Dies ist die erste Phase der Zeitleiste. Gro\u00dfe Dateien, z. B. nicht optimierte Bilder, verz\u00f6gern die Downloadzeit und absorbieren mehr Bandbreite, was zu einer Verz\u00f6gerung auf der Website f\u00fchrt. Die L\u00f6sung f\u00fcr dieses spezifische Problem ist, dass der Benutzer Medien optimieren sollte, indem er die Gr\u00f6\u00dfe der Bilder reduziert, ohne ihre Qualit\u00e4t zu verringern. Um die Bandbreitenverf\u00fcgbarkeit zu erh\u00f6hen, sollte der Benutzer die Bilder auf einem Cloud-Server speichern.<\/li>\n<li><strong>Wartezeit<\/strong>. Die vom Server erfasste Zeit, um eine Antwort zu erzeugen. Wenn die Wartezeit zu gro\u00df ist, kann dies einen \u00fcberlasteten 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\u00fcber hinaus kann das Caching-Dienstprogramm die Wartezeit verringern. In diesem Fall sollte der Benutzer vom Shared Hosting zu dediziertem Hosting wechseln.<\/li>\n<li><strong>Warteschlangenanforderung<\/strong>. Besteht aus bequemen Verbindungen HTTP\/HTTP2, HTTP-Authentifizierung, Ausf\u00fchrung von CSS oder JavaScript, SSL-Verbindungszeit, ist eine wichtige Phase der Zeitleiste.<\/li>\n<li><strong>DNS-Suche<\/strong>. Besteht die Zeit f\u00fcr das DNS zu l\u00f6sen und gibt dem Benutzer einen gro\u00dfen Hinweis, was die Website verlangsamt. Im Allgemeinen verlangsamen die meisten Skripts die Websites aufgrund der DNS-Suche.<\/li>\n<\/ul>\n<p>Wenn der Benutzer die Probleme identifiziert, die seine Webseite mit Hilfe von Wasserfalldiagrammen verlangsamen, kann er beginnen, eine L\u00f6sung f\u00fcr das Problem zu finden. Einige der Probleme und ihre L\u00f6sungen sind unten dargestellt.<\/p>\n<table style=\"height: 349px;\" width=\"751\">\n<tbody>\n<tr>\n<td width=\"317\"><\/td>\n<td width=\"420\"><strong>Probleml\u00f6sung<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"317\">\n<p style=\"text-align: left;\">Link zur Seitenverfolgung<\/p>\n<\/td>\n<td width=\"420\">Deinstallieren oder Entfernen des in Verwendung ist enk- oder entfernten \u00dcberwachungstools<\/td>\n<\/tr>\n<tr>\n<td width=\"317\">Langsame DNS-Suche<\/td>\n<td width=\"420\">Der Benutzer kann ein CDN verwenden<\/td>\n<\/tr>\n<tr>\n<td width=\"317\">Langsames Serverende<\/td>\n<td width=\"420\">Senden Sie eine E-Mail an Ihren Dienstanbieter.<\/td>\n<\/tr>\n<tr>\n<td width=\"317\">Fehler aufgrund von Plugins<\/td>\n<td width=\"420\">Der Benutzer kann die Plugins deinstallieren.<\/td>\n<\/tr>\n<tr>\n<td width=\"317\">Unbenutzte\/sperrige Theme-Anpassung<\/td>\n<td width=\"420\">Der Benutzer kann einen Webentwickler beauftragen<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Auch einAnf\u00e4nger-Benutzer kann schnell verstehen, die spezifischen Gr\u00fcnde, die ihre Website verlangsamen, indem sie die Wasserfall-Charts. Lange Balken bedeuten beispielsweise, dass das zugeh\u00f6rige Element zu viel Zeit zum Laden ben\u00f6tigt, roter Text bedeutet einen Fehler, der Daten abruft, und lange L\u00fccken zwischen Balken bedeuten Zeiten, in denen keine Anforderungen vorhanden sind.<\/p>\n<h2 id='wie-man-websites-schneller-laden-l\u00e4sst'  id=\"boomdevs_3\">Wie man Websites schneller laden l\u00e4sst<\/h2>\n<p>Durch die Verwendung von Wasserfalldiagrammen k\u00f6nnen wir eine gro\u00dfartige Benutzererfahrung erstellen, indem wir eine Webseite schneller laden.<\/p>\n<h3 id='verringern-sie-die-breite-des-wasserfalls'  id=\"boomdevs_4\">Verringern Sie die Breite des Wasserfalls<\/h3>\n<p>Die Website-Leistung kann verbessert werden, indem die Zeit, die zum Herunterladen der Ressourcen ben\u00f6tigt wird, die die Breite des Wasserfalldiagramms verringern.<\/p>\n<p><em><strong>Wenn es lange violette Balken in der Wasserfall-Diagramm .<\/strong><\/em><\/p>\n<p>Purple bedeutet die Zeit, die f\u00fcr die Durchf\u00fchrung einer SSL\/TLS-Aushandlung aufgewendet wird. Falls ein Benutzer st\u00e4ndig mit Violett konfrontiert wird, bedeutet dies, dass die Website nicht f\u00fcr TLS optimiert ist. Der Benutzer muss die TLS-Leistung optimieren.<\/p>\n<p><em><strong>Wenn es viel Orange in der Wasserfall-Diagramm.<\/strong><\/em> Orange bezeichnet die erste TCP-Verbindung f\u00fcr 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\u00e4gt die Breite jeder Anforderung die H\u00e4lfte, da der Webbrowser nicht mit jeder Anforderung neue Verbindungen herstellen wird.<\/p>\n<p><em><strong>Wenn es lange blaue Balken in der Wasserfall-Diagramm .<\/strong><\/em><\/p>\n<p>Blaue Farbe bedeutet Zeit, die f\u00fcr das Herunterladen der Antwort aufgewendet wird. Wenn es einen langen blauen Balken gibt, besteht eine hohe Wahrscheinlichkeit, dass die Ressource zu gro\u00df ist. Das Verringern der Dateigr\u00f6\u00dfe der Datei kann zur L\u00f6sung des Problems beitragen. Ein Benutzer kann die Gr\u00f6\u00dfe durch Bildoptimierung oder HTTP-Komprimierung verringern.<\/p>\n<p><em><br \/>\n<strong>Wenn es zu viel Gr\u00fcn ist, das Wasserfalldiagramm<\/strong><br \/>\n<\/em>. Die gr\u00fcne Farbe bedeutet, dass der Browser darauf wartet, Inhalte zu erhalten. Um das Gr\u00fcn zu reduzieren, sollte der Benutzer den statischen Inhalt in ein CDN verschieben.<\/p>\n<h3 id='verringern-der-h\u00f6he-des-wasserfalldiagramms'  id=\"boomdevs_5\">Verringern der H\u00f6he des Wasserfalldiagramms<\/h3>\n<p>Die Website-Geschwindigkeit kann verbessert werden, indem die Anzahl der Anforderungen verringert wird, die der Browser ausf\u00fchren muss, um die Webseite zu laden, was zu einer Verringerung der H\u00f6he des Wasserfalls f\u00fchrt. Der Benutzer muss alle Inhalte auf jeder Seite \u00fcberpr\u00fcfen und entscheiden, ob er sie wirklich braucht.<\/p>\n<p><em><strong>Wenn zu viele JavaScript\/CSS-Dateien kleiner als 2kb sind.<\/strong><\/em><\/p>\n<p>Der Benutzer muss den Inhalt dieser Dateien direkt in den HTML-Code einbinden, indem er <code>, or <\/code><\/p>\n<p>Schilder.<\/p>\n<p><em><strong>Wenn sich zu viele JavaScript\/CSS-Dateien im Wasserfalldiagramm befinden.<\/strong><\/em><\/p>\n<p>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\u00f6ht.<\/p>\n<p><em><strong>Wenn es zu viele 302 Umleitungen gibt.<\/strong><\/em><\/p>\n<p>Gelbe Zeilen bedeuten Umleitungen, was bedeutet, dass Links auf der Seite f\u00e4lschlicherweise erstellt oder veraltet sind, die unn\u00f6tige Umleitungen erstellen, die die H\u00f6he des Wasserfalls erh\u00f6hen. Die L\u00f6sung besteht darin, diese Links durch direkte Verbindungen zu ersetzen.<\/p>\n<h3 id='erh\u00f6hen-der-renderzeit'  id=\"boomdevs_6\">Erh\u00f6hen der Renderzeit<\/h3>\n<p>Um die Renderzeit zu verbessern, sollte der Benutzer die Reihenfolge der Ressourcenanforderungen optimieren, wodurch die gr\u00fcne Zeile <em>Rendern<\/em> starten nach links verschoben wird.<\/p>\n<p><em><br \/>\n<strong>Wenn zu viele Anforderungen f\u00fcr separate CSS-Dateien<\/strong><br \/>\n<\/em>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.<\/p>\n<p>Wenn ein Benutzer Aufrufe zum Laden von <em><strong>JavaScript-Bibliotheken sieht.<\/strong><\/em><\/p>\n<p>JavaScript enth\u00e4lt kann das Seitenrendering blockieren. Der Benutzer sollte diese auf der Seite nach unten verschieben.<\/p>\n<p><em><br \/>\n<strong>Wenn ein Benutzer externe Schriftarten sieht<\/strong><br \/>\n<\/em>. Solange der Browser die externe Schriftart nicht herunterl\u00e4dt, wird nichts gezeichnet. Der Benutzer sollte die Verwendung externer Schriftarten vermeiden.<\/p>\n<h2 id='erster-besuch-und-wiederholungsbesuch-was-ist-wichtiger'  id=\"boomdevs_7\">Erster Besuch und Wiederholungsbesuch. Was ist wichtiger?<\/h2>\n<p>Basierend auf dem Besuch des Benutzers k\u00f6nnen zwei Arten von Wasserfalldiagrammen erstellt werden: <em>First Visit<\/em> und <em>Repeat Visit<\/em>. Was ist der Unterschied?<\/p>\n<p>Leerer Cache (erste Ansicht): Der Benutzer greift zum ersten Mal auf die Website zu und hat keine zwischengespeicherten Daten. Typische browserbasierte Tools l\u00f6schen den Cache, bevor die Anforderungen gestellt werden. Mit anderen Worten, die Menschen besuchen die Website zum ersten Mal.<\/p>\n<p>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\u00e4lt, die jetzt in einem lokalen Speicher zwischengespeichert werden. Mit anderen Worten, weil die Leute Ihre Website vorher besucht haben, jetzt k\u00f6nnen sie Ihre Bilder haben, CSS in ihrem Browser kassiert, so dass das System nicht viel f\u00fcr sie liefern muss.<\/p>\n<p>In den Screenshots unten k\u00f6nnen Sie sehen, wie unterschiedlich die erste Besuchswasserfall-Diagramm und die Wiederholung Besuch Wasserfall Diagramm sind.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/First-Visit.png\" alt=\"First Visit\" width=\"683\" height=\"894\" \/><\/p>\n<p>Eines der wichtigsten Dinge zu realisieren ist, dass der leere Cache dauert 6,8 Sekunden zu laden, w\u00e4hrend die Wiederholung, die ein zwischengespeicherter Modus ist, dauert 1,9 Sekunden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Repeat-Visit.png\" alt=\"Repeat Visit\" width=\"677\" height=\"95\" \/><\/p>\n<p>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\u00f6nnen, was zu einer k\u00fcrzeren Zeit, um die Website zu laden.<\/p>\n<p>Das Diagramm cached Mode (Repeat View) hat weniger Zeilen, was bedeutet, dass viel weniger Ressourcen geladen wurden. Dies ist ein gutes Beispiel f\u00fcr eine Website, auf der effizientes Caching verwendet wird.<\/p>\n<p>Ohne etwas auf der Website zu \u00e4ndern, w\u00fcrde der wiederholte Besuch schneller reagieren, da die Elemente zwischengespeichert werden. Der erste Besuch w\u00fcrde 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\u00fccksichtigt. Sie k\u00f6nnen anhand von Wasserfalldiagrammen sehen, welches Element den Prozess verlangsamt. Vielleicht verwendet die Website zu viel CPU. Nach der Korrektur k\u00f6nnen sie die Website erneut testen.<\/p>\n<p>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\u00f6tigt wird. Dar\u00fcber 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.<\/p>\n<h5 id='m\u00f6chten-sie-sehen-welche-elemente-ihre-website-verlangsamen-k\u00f6nnten-f\u00fchren-sie-einen-kostenlosen-website-geschwindigkeitstest-durch-und-zeigen-sie-ihre-ergebnisse-anhand-von-wasserfalldiagrammen-und-leistungsberichten-an'  id=\"boomdevs_8\" style=\"text-align: center;\">M\u00f6chten Sie sehen, welche Elemente Ihre Website verlangsamen k\u00f6nnten? F\u00fchren Sie einen <a style=\"color: #0000ff;\" href=\"https:\/\/www.dotcom-tools.com\/website-speed-test\" target=\"_blank\" rel=\"noopener\">kostenlosen Website-Geschwindigkeitstest<\/a> durch und zeigen Sie Ihre Ergebnisse anhand von Wasserfalldiagrammen und Leistungsberichten an.<\/h5>\n<h2 id='verwenden-eines-wasserfalldiagramms-zum-\u00fcberwachen-der-richtigen-cdn-verteilung'  id=\"boomdevs_9\">Verwenden eines Wasserfalldiagramms zum \u00dcberwachen der richtigen CDN-Verteilung<\/h2>\n<p>Ein Content Delivery Network (CDN) ist eine geografisch verteilte Gruppe von Servern, die f\u00fcr die Bereitstellung statischer Inhalte f\u00fcr 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\u00f6rigen Dateien, Audio, Streaming-Video und gro\u00dfe Softwarepakete zu liefern.<\/p>\n<h3 id='cdn-nutzung'  id=\"boomdevs_10\">CDN-Nutzung<\/h3>\n<p>Die Edge-Server eines CDN erh\u00f6hen die Geschwindigkeit, indem sie die L\u00fccke zwischen Website-Ressourcen und seinen Besuchern \u00fcberbr\u00fccken. Anstatt Anforderungen direkt an den Ursprung einer Website zu stellen, stellen Benutzer eine Verbindung zu den verschiedenen CDN-Verteilungsplattformen her, \u00fcber die der Anbieter verf\u00fcgt. Je n\u00e4her eine Anforderung r\u00fcckt, desto mehr Zeit wird eingespart. Dar\u00fcber hinaus bietet das CDN-Hosting eine Dateikomprimierung, die das Allgemeine Surfen verbessert, da kleinere Dateigr\u00f6\u00dfen h\u00f6here Ladegeschwindigkeiten bedeuten.<\/p>\n<h3 id='verwenden-von-wasserfalldiagrammen-zum-\u00fcberwachen-von-cdns'  id=\"boomdevs_11\">Verwenden von Wasserfalldiagrammen zum \u00dcberwachen von CDNs<\/h3>\n<p>Im Screenshot eines Wasserfalldiagramms unten stellt der Bereich \u00dcberwachung URL die Liste aller einzelnen Elemente zusammen mit ihrer Gr\u00f6\u00dfe und Leistung auf der rechten Seite dar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.dotcom-monitor.com\/wp-content\/uploads\/sites\/3\/2020\/05\/Monitoring-URL.png\" alt=\"Monitoring URL\" width=\"708\" height=\"339\" \/><\/p>\n<p>Wenn der Benutzer ein CDN nutzt, k\u00f6nnen viele Dateien und Ressourcen aus dieser einen Quelle stammen \u2013 eine M\u00f6glichkeit, um festzustellen, ob das CDN richtig konfiguriert ist.<\/p>\n<h3 id='ben\u00f6tigen-sie-ein-cdn'  id=\"boomdevs_12\">Ben\u00f6tigen Sie ein CDN?<\/h3>\n<p>Wasserfalldiagramme erm\u00f6glichen es dem Benutzer zu entdecken, wie Latenz die Geschwindigkeit der Website beeinflusst. Wenn Sie weiter zum farbcodierten Diagramm weiter oben im Artikel zur\u00fcckkehren, bedeutet die gelbe Leiste, dass der Webbrowser auf Daten vom Domain Name Server (DNS) wartet. Im Allgemeinen werden 100ms Wartezeit als normal akzeptiert, w\u00e4hrend 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\u00f6\u00dfe zu gro\u00df ist. Dar\u00fcber hinaus kann dies bedeuten, dass die \u00dcbertragungsgeschwindigkeit des Webservers zu langsam ist. Bei diesem spezifischen Problem kann die Verwendung von CDN eine L\u00f6sung sein, um die Wartezeit zu verringern.<\/p>\n<p>Wenn der Benutzer zu lange Wartezeiten hat, um eine Antwort zu erhalten, kann dies au\u00dferdem bedeuten, dass der Inhalt der Website physisch weiter vom Besucher entfernt ist. Um entscheiden zu k\u00f6nnen, ob CDN ben\u00f6tigt wird, muss der Standort des Servers bekannt sein. Dazu kann eine Plattform wie Dotcom-Monitor genutzt werden, um einen Standort zu \u00fcberwachen, der am weitesten von Ihrem Server entfernt ist. \u00dcberpr\u00fcfen Sie das Wasserfalldiagramm und die Zeilen f\u00fcr Anforderungen und Ressourcen. Wenn die Wartezeit mehr als 100 ms betr\u00e4gt, sollte der Benutzer die Verwendung von CDN in Betracht ziehen.<\/p>\n<h5 id=''  id=\"boomdevs_13\"><\/h5>\n<h5 id='testen-sie-die-vollst\u00e4ndige-dotcom-monitor-plattform-30-tage-lang-kostenlos'  id=\"boomdevs_14\" style=\"text-align: center;\">Testen Sie die vollst\u00e4ndige <a style=\"color: #0000ff;\" href=\"https:\/\/userauth.dotcom-monitor.com\/Account\/FreeTrialSignUp?SolutionType=Monitoring\">Dotcom-Monitor Plattform 30 Tage lang kostenlos.<\/a><\/h5>\n","protected":false},"excerpt":{"rendered":"<p>Wasserfalldiagramme sind Diagramme, die darstellen, wie Websiteressourcen heruntergeladen, vom Modul analysiert, in einer Zeitleiste, die uns die M\u00f6glichkeit gibt, die Reihenfolge und Abh\u00e4ngigkeiten zwischen Ressourcen zu sehen. Es hilft bei der Identifizierung, wo wichtige Ereignisse w\u00e4hrend des Ladevorgangs passiert sind. Sie k\u00f6nnen den Benutzer auch leicht sehen lassen, wie gut oder schlecht die Leistung ihrer [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":25971,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[883],"tags":[],"class_list":["post-9687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert"],"_links":{"self":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/9687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=9687"}],"version-history":[{"count":0,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/9687\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/media\/25971"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=9687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=9687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=9687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}