Heute möchten wir darauf eingehen, wie wir die Daten des beliebten Website-Geschwindigkeitstests Pingdom besser nutzen und verstehen können. Du kannst damit eine Wasserfall-Analyse deiner WordPress-Website durchführen. Auf diese Weise kannst du Leistungsprobleme leichter diagnostizieren und ein Problem nicht falsch diagnostizieren.

Wir haben oft gesehen, dass WordPress-User die Daten im Pingdom-Geschwindigkeitstest-Tool falsch interpretieren und dies führt dazu, dass sie ihre Seite manchmal in einen noch schlechteren Zustand als zuvor konfigurieren. Denke daran, dass alle Tools wie diese als Anleitungen verwendet werden sollen. Sie sind niemals zu 100% genau. Wichtig ist, dass du in allen Tests dasselbe Tool verwendest.

Pingdom

Pingdom ist ein Unternehmen mit Sitz in Schweden (jetzt im Besitz von SolarWinds), das eine Vielzahl verschiedener Dienste anbietet, wie z. B. Betriebszeitüberwachung, Seitengeschwindigkeitsüberwachung, Transaktionsüberwachung, Serverüberwachung und Besuchereinblicke (RUM). Wahrscheinlich ist eines der Dinge, für die sie am besten bekannt sind, ihr kostenloses Website Speed Test Tool. Es ist eines der beliebtesten Performance Testing Tools in der WordPress-Community.

Warum ist es so beliebt? Zum einen ist es wahrscheinlich das am einfachsten zu verwendende Geschwindigkeitstest-Tool! Nicht jeder ist ein Web-Performance-Experte und für den typischen WordPress-User können einige der anderen alternativen Tools da draußen tatsächlich ziemlich überwältigend sein. Manchmal ist weniger mehr, wie sie sagen. Schließlich interessierst du dich nur für zwei Dinge: Wie schnell ist deine Website und wie kannst du sie schneller machen.

Pingdom Website-Geschwindigkeitstest
Pingdom Website-Geschwindigkeitstest

Mit Pingdom kannst du die Website-Geschwindigkeit einer Website von 7 verschiedenen Standorten aus (5 Kontinente) strategisch rund um den Globus platziert testen:

  • Asien – Tokyo – Japan
  • Europa – Frankfurt – Deutschland
  • Europa – Großbritannien – London
  • Nordamerika – USA – Washington D.C.
  • Nordamerika – USA – San Francisco
  • Pazifik – Australien – Sydney
  • Südamerika – Brasilien – São Paulo

Notiz: Wir haben festgestellt, dass gelegentlich nicht alle Teststandorte verfügbar sind. Dies ist höchstwahrscheinlich darauf zurückzuführen, dass es zu Wartungszwecken heruntergefahren ist oder von zu vielen Leuten überlastet wurde, die versuchen, Tests durchzuführen. Wenn ein Teststandort, den du bereits verwendet hast, nicht mehr vorhanden ist, überprüfe ihn nochmal in ein bis zwei Stunden. Höchstwahrscheinlich erscheint er wieder.

Der physische Standort, den du auswählst, ist tatsächlich sehr wichtig, da er sich darauf bezieht, wo deine Website tatsächlich gehostet wird. Hier kommt eine kleine Sache namens Netzwerklatenz ins Spiel. Aber darauf werden wir im Folgenden näher eingehen.

Wasserfall-Analyse mit dem Pingdom Geschwindigkeitstest Tool

Eine Webseite besteht aus verschiedenen Elementen wie HTML, JavaScript, CSS, Bildern und Videos. Jede von diesen generiert Anfragen, um das, was du auf deiner Website siehst, zu rendern. Je mehr Anfragen du hast, desto langsamer wird deine Website normalerweise geladen. Das ist nicht immer der Fall, aber es ist die meiste Zeit wahr.

Im Folgenden werden wir dir den Pingdom-Abschnitt aufschlüsseln und ausführlicher die Informationen erklären, welche die gesamte Leistung deiner Website betreffen und wie man eine Wasserfall-Analyse macht.

Pingdom Zusammenfassung

Wenn du deine WordPress-Website über Pingdom laufen lässt, erhältst du eine Leistungsbewertung, eine Gesamtladezeit, die Gesamtseitengröße und die Anzahl der Anfragen, die du auf deiner Website hast. In unserem Beispiel verwenden wir perfmatters.io, eine E-Commerce-Website, auf der Easy Digital Downloads ausgeführt wird. Es wird auf Kinstas rasanten schnellen Servern gehostet.

Wie du sehen kannst, haben wir unseren ersten Test durchgeführt und wir haben eine 88/100 auf Pingdom erzielt und die Gesamtladezeit liegt unter 541 ms. Es lässt uns die Gesamtgröße unserer kombinierten Assets und die Anzahl der Anfragen wissen.

Pingdom Geschwindigkeitstest vor DNS und Cache
Pingdom Geschwindigkeitstest vor DNS und Cache

Wir haben dann einen zusätzlichen Test durchgeführt und nun beträgt unsere Gesamtladezeit 392 ms mit der gleichen Seitengröße und Anzahl der Anfragen! Worum geht es? 🤔 Du kannst dies auch bemerken, wenn du deine Website mehrmals mit dem Pingdom Speed Test Tool ausführst. Größere Websites werden noch größere Unterschiede feststellen.

Es gibt drei Hauptgründe, warum dies geschieht: DNS-Caching, CDN-Caching und WordPress-Caching. Deswegen solltest du immer mehrmals testen. Natürlich können auch externe Aufrufe von Ressourcen und APIs von Drittanbietern dies beeinflussen. Finde weiter unten in unserer Wasserfall-Analyse heraus, warum.

Pingdom Geschwindigkeitstest nach DNS
Pingdom Geschwindigkeitstest nach DNS

Möchtest du einen besseren Pingdom-Score auf deiner WordPress-Website erhalten? Abhängig von deiner Seite und deiner Konfiguration ist es nicht immer möglich, ein perfektes 100/100 zu erzielen, besonders für diejenigen von euch, die E-Commerce-Websites und Marketing-Pixel betreiben. Aber einfach etwas Zeit damit zu verbringen, deine Punktzahl zu verbessern, ist ein guter Anfang. Die Gesamtgeschwindigkeit ist wirklich wichtig.

Und manchmal übertrifft die Usererfahrung einige der Web-Performance-Tricks, die du im Internet liest. Du kannst die Usererfahrung nicht vergessen! Aber sei versichert, wir werden mit dir einige Tipps und Tricks weiter unten teilen, wie wir die oben genannte Seite bekommen haben, also lies weiter!

Verbessere die Seitenleistung

Der Abschnitt Performance Insights, jetzt „Verbessern Sie die Seitenleistung“, wurde 2018 aktualisiert und es wurden einige alte Elemente entfernt und neue hinzugefügt. Dies ist höchstwahrscheinlich darauf zurückzuführen, dass einige der Vorschläge, die sie gemeldet haben, nicht mehr so relevant sind wie früher. Bei der Optimierung der Web-Performance ändern sich die Dinge ständig. Und es kann manchmal mühsam sein, wenn die Leute einfach nach dem perfekten Pingdom-Score jagen.

Pingdom Performance Insights
Pingdom Performance Insights

Wir verlassen jedoch den gesamten Abschnitt in unserem Beitrag (einige alte und neue), da es wichtig ist zu verstehen, wie diese Werte berechnet werden. Diese basieren alle auf den Google PageSpeed Insight-Regeln. Im Allgemeinen solltest du, wenn du diese auf deiner Website verbesserst, eine Verringerung deiner Gesamtladezeiten feststellen.

Hier sind einige der Kategorien, aus denen der Abschnitt zur Verbesserung der Seitenleistung besteht:

Lass uns nun auf einige davon eintauchen und sehen, welche heute noch relevant sind.

Nutze ein Content Delivery Networks (CDN)

Einer der wichtigsten Dienste, die auf Ihrer WordPress-Site heute ein Content Delivery Network (CDN) implementieren sollen. Hierbei handelt es sich um ein Netzwerk von Servern (auch als POPs bezeichnet), die sich auf der ganzen Welt befinden. Sie dienen dazu, Kopien der statischen (und manchmal auch dynamischen) Inhalte deiner WordPress-Website wie Bilder, CSS, JavaScript und Videostreams zu hosten und bereitzustellen.

Wenn Sie ein Kinsta-Kunde sind, schließen wir in alle unsere Hosting-Pakete einen CDN ein. Für die Aktivierung sind einige Klicks erforderlich. Ein paar Vorteile eines CDN sind eine Leistungssteigerung (geringere TTFB- und Netzwerklatenz), niedrigere Bandbreiten- und Hosting-Kosten und sogar SEO-Vorteile.

Kinsta-Kunden können die Optimierung ihrer Seite auch schnell und einfach vorantreiben, indem sie ihren Code mit der im MyKinsta-Dashboard integrierten Funktion zur Code-Minifizierung verkleinern. Damit können Kunden mit einem einfachen Klick die automatische CSS- und JavaScript-Minifizierung aktivieren und so ihre Seiten ohne manuellen Aufwand beschleunigen.

Wichtig: Das kürzlich aktualisierte Pingdom-Tool hat derzeit einen Fehler, der jeden CDN-Anbieter korrekt erkennt.

Nutze ein Content Delivery Network (CDN)
Nutze ein Content Delivery Networks (CDN)

Zu den von uns empfohlenen CDN-Drittanbietern gehören:

In unseren eigenen CDN-Geschwindigkeitstests haben wir festgestellt, dass ein CDN die Ladezeiten der Seite in einigen Fällen um mehr als 50% reduzieren kann!

Vermeide den Fehler HTTP 404 (Not Found)

Dieser Abschnitt wurde zuvor als „Vermeidung fehlerhafter Anfragen“ bezeichnet. Und das ist immer relevant! Diese Warnung ist genauso wie es klingt, es ist eine Anfrage, die nicht erfolgreich abgeschlossen werden konnte. Dies ist in der Regel der Fall, wenn du manuell auf ein Asset oder ein Image verweist, das inzwischen gelöscht wurde, was zu einem 404-Fehler führt. Dies wird als ein oranger Kreis in Pingdom zusammen mit einem 404-Status im Antwortheader angezeigt.

Vermeide fehlerhafte Anfragen - 404-Fehler
Vermeide fehlerhafte Anfragen – 404-Fehler

Stelle immer sicher, dass jede Anforderung auf deiner Website mit dem Erfolgsstatus zurückgegeben wird. Dadurch wird sichergestellt, dass keine Anfragen an nicht mehr vorhandene Assets generiert werden.

Minimiere Weiterleitungen

Zu viele Weiterleitungen sind immer etwas, auf das du achten musst. Einfache Weiterleitungen wie eine einzige 301-Weiterleitung, HTTP zu HTTPS oder WWW zu Non-WWW (umgekehrt) sind in Ordnung. Und oft werden diese in bestimmten Bereichen deiner Website benötigt. Alles hat jedoch einen Preis für die Leistung deiner Website. Wenn du beginnst, Weiterleitungen übereinander zu stapeln, musst du wissen, wie sie die Leistung deiner Website beeinflussen. Dies gilt für Seiten- und Postumleitungen, Bildumleitungen und alles.

Dies wird als ein blauer Kreis in Pingdom zusammen mit einem 301 oder 302 im Antwortheader-Status angezeigt.Minimiere Weiterleitungen 301

Wie stark wirken sich Weiterleitungen auf deine Website aus? Lass uns einen kleinen Test machen. Zuerst führen wir einen Geschwindigkeitstest auf unserer Kontaktseite durch: https://perfmatters.io/contact/. Wie du unten sehen kannst, haben wir eine Gesamtladezeit von 417 ms.

Website-Geschwindigkeitstest ohne Weiterleitungen
Website-Geschwindigkeitstest ohne Weiterleitungen

Dann ändern wir die URL ein wenig und führen einen weiteren Geschwindigkeitstest durch, um die Auswirkungen mehrerer Weiterleitungen zu sehen. http://www.perfmatters.io/contact. Wie du siehst, benötigt das Laden derselben Seite 695 ms. Das ist eine Steigerung von 66%. Huch!

Website-Geschwindigkeitstest mit mehreren Weiterleitungen
Website-Geschwindigkeitstest mit mehreren Weiterleitungen

Check unseren ausführlichen Post auf WordPress Weiterleitungen und die besten Methoden für eine schnellere Leistung.

Füge Expires Headers hinzu

Dieser Vorschlag wurde zuvor als Verwende Browser-Caching bezeichnet. Für den Laien heißt das, jedem Skript auf deiner WordPress-Site muss ein HTTP-Cache-Header angehängt sein (oder sollte es). Dies bestimmt, wann der Cache der Datei abläuft. Um dies zu beheben, stelle sicher, dass dein WordPress-Hoster über die richtigen Header-Einstellungen für cache-control und expires verfügt. Kinsta hat diese Header auf allen unseren Servern. Sieh dir an, wie du deinem Server manuell Caching-Header hinzufügst und lies unsere Anleitung zum Hinzufügen von Expires-Headern.

Verwende Browser-Caching - Caching-Header
Verwende Browser-Caching – Caching-Header

Das andere Problem ist, dass du beim Laden von Skripten von Drittanbietern keine Zugriffsrechte zum Hinzufügen der Cache-Header hast, da du keine Kontrolle über deine Webserver hast. Übliche Täter sind das Google Analytics-Skript und Marketingpixel wie Facebook und Twitter. Um dieses Problem zu beheben, kannst du dein Google Analytics-Skript lokal hosten (obwohl dies nicht offiziell unterstützt wird) mit einem Plugin wie Perfmatters. WP Rocket bietet jetzt auch eine Option zum lokalen Hosting deines Facebook-Marketing-Pixels.

Das lokale Verschieben von Skripts kann sich nach den Auswirkungen auf die Leistung deiner Website richten. Der einzige Vorteil ist, dass du die vollständige Kontrolle über die Datei hast und sie von deinem eigenen CDN aus bereitstellen kannst. Dadurch wird auch eine andere DNS-Anfrage eines Drittanbieters entfernt. Beachte jedoch auch, dass diese Dateien möglicherweise bereits in den Browsern der Leute zwischengespeichert werden.

In unserem ausführlichen Beitrag erfährst du, wie du die Leverage-Browser-Caching-Warnung fixieren kannst.

Entferne Abfragezeichenfolgen aus statische Ressourcen

Ein anderes häufiges Problem ist der Umgang mit Abfragezeichenfolgen. Deine CSS- und JavaScript-Dateien haben normalerweise die Dateiversion am Ende ihrer URLs, z. B https://domain.com/file.min.css?ver=4.5.3. Einige Server und Proxyserver können Abfragezeichenfolgen nicht zwischenspeichern. Indem du sie entfernst, kannst du manchmal dein caching verbessern.

Du kannst ein Premium-Plugin wie Perfmatters verwenden, das eine einfache Ein-Klick-Option zum Entfernen von Query-Strings hat.

Oder du kannst den folgenden Code manuell in die Datei functions.php deines Themes einfügen. Eine bessere Alternative wäre, ein kostenloses Plugin wie Code Snippets zu verwenden, um den Code hinzuzufügen. Auf diese Weise musst du dein Theme nicht direkt bearbeiten.

function remove_query_strings() {
   if(!is_admin()) {
       add_filter('script_loader_src', 'remove_query_strings_split', 15);
       add_filter('style_loader_src', 'remove_query_strings_split', 15);
   }
}

function remove_query_strings_split($src){
   $output = preg_split("/(&ver|\?ver)/", $src);
   return $output[0];
}
add_action('init', 'remove_query_strings');

Wenn sie beispielsweise ein Update ausgeben und style.css von ?ver=4.6 auf ?ver=4.7, ändern, wird dies als eine vollständig neue URL behandelt und nicht zwischengespeichert. Wenn du die Abfragezeichenfolgen entfernst und ein Plugin aktualisierst, kann dies dazu führen, dass die zwischengespeicherte Version weiterhin bereitgestellt wird. In einigen Fällen kann dies deine Seite beschädigen, bis die zwischengespeicherte Ressource abläuft oder der Cache vollständig geleert wird.

Einige CDNs können auch Abfragezeichenfolgen zwischenspeichern. Das Kinsta CDN kann und macht dies standardmäßig. Wenn du also ein Kinsta-Client bist, werden Abfragezeichenfolgen bereits in deinen Assets zwischengespeichert.

Entferne Abfragezeichenfolgen aus der Warnung für statische Ressourcen
Entferne Abfragezeichenfolgen aus der Warnung für statische Ressourcen

Lies unser ausführliches Tutorial zum Entfernen von Abfragezeichenfolgen aus statischen Ressourcen.

Wir haben einen ausführlichen Beitrag zum Umgang mit der Warnung Statische Inhalte aus einer cookieloser Domain angeben. Oftmals kannst du diese Warnung ignorieren, da neue Protokolle wie HTTP/2 dies jetzt weniger wichtig machen. Die Kosten für eine neue Verbindung sind in der Regel höher als für das Streaming über die gleiche Verbindung. Zwei Möglichkeiten, dies zu lösen, sind jedoch die Verwendung eines CDN-Anbieters, der die Cookies löscht oder eine separate Domäne und / oder Subdomäne erstellt.

Gib statischen Inhalt von einer cookielos Domain an-Warnung
Gib statischen Inhalt von einer cookielos Domain an-Warnung

Komprimiere Komponenten mit GZIP

Die Warnung „Komponenten mit GZIP komprimieren“ tritt auf, wenn Pingdom ein Asset entdeckt, das nicht mit GZIP komprimiert wurde. GZIP ist eine Komprimierungsmethode, mit der die Größe von textbasierten Dateien wie HTML-Dokumenten und CSS/JS-Dateien reduziert werden kann. Die GZIP-Komprimierung wird auf dem Server aktiviert und komprimiert Webseiten und Assets, bevor sie an einen Besucher gesendet werden. Bei unseren Tests haben wir festgestellt, dass die Aktivierung der GZIP-Komprimierung die Dateigröße einer Anfrage um über 78% reduziert.

Komprimiere Komponenten mit GZIP
Komprimiere Komponenten mit GZIP

Bei Kinsta brauchst du dir keine Gedanken darüber zu machen, GZIP manuell zu aktivieren, denn es ist bereits standardmäßig auf allen unseren Servern aktiviert. Wenn du bemerkst, dass dein Webhost GZIP nicht aktiviert hat, empfehlen wir dir, dich mit dem Support-Team in Verbindung zu setzen, damit es sofort aktiviert wird, da es einen großen Einfluss auf die Geschwindigkeit deiner Seite haben kann. Wenn du nach dem Aktivieren von GZIP auf deinem Server immer noch die „Komponenten mit GZIP komprimieren“ siehst, ist es möglich, dass auf einem Server, der ein externes Asset hostet, das für deine Webseite benötigt wird, GZIP nicht aktiviert ist. Wenn das der Fall ist, kannst du auf deiner Seite nichts tun, um das Verhalten des Servers zu ändern.

Parallelisieren von Downloads über Hostnamen

Diese Warnung resultiert aus einer Beschränkung von HTTP / 1.1 und Webbrowsern, die auf die Anzahl der gleichzeitigen Verbindungen beschränkt sind, die sie zu einem Host herstellen können; Das sind typischerweise 6 Verbindungen. Diese Warnung wird normalerweise auf Websites mit einer großen Anzahl von Anfragen angezeigt. In der Vergangenheit war die einzige Möglichkeit, diese Einschränkung zu umgehen, die Implementierung von Domänen-Sharding. Wenn du jedoch einen Webhost oder einen CDN-Provider verwendest, der HTTP / 2 unterstützt, kannst du dies jetzt ignorieren, da mehrere Ressourcen jetzt parallel über eine einzige Verbindung geladen werden können. Du kannst aber auch unser Tutorial zur Fehlerbehebung bei der Parallelisierung von Downloads über die Hostnamen-Warnung durch Implementierung von Domain-Sharding lesen.

Parallelisieren von Downloads über Hostnamen
Parallelisieren von Downloads über Hostnamen

Spezifiziere einen Cache-Validierer

Diese Warnung bezieht sich auf fehlende HTTP-Caching-Header, die in jeder Antwort des Ursprungsservers enthalten sein sollten, da sie die Länge des Caches validieren und festlegen. Wenn die Header nicht gefunden werden, wird jedes Mal eine neue Anforderung für die Ressource generiert, was die Belastung deines Servers erhöht. Diese Header enthalten last-modified, ETag, Cache-Control, und Expires. Genau wie bei der Leverage-Browser-Caching-Warnung sollten diese Header automatisch von deinem WordPress-Hoster hinzugefügt werden. Wenn du Anfragen von Drittanbietern siehst, kannst du dies nicht tun, da du keine Kontrolle über ihre Webserver hast.

Spezifiziere eine Cache-Validator-Warnung
Spezifiziere eine Cache-Validator-Warnung

Wir haben einen ausführlichen Beitrag darüber, wie man die Spezifiziere einen Cache-Validator Warnung bearbeiten kann:

Spezifiziere eine Variable: Accept-Encoding-Header

Wir haben einen ausführlichen Beitrag darüber, wie man den Specify a Vary (Spezifiziere eine Variable) Accept-Encoding-Header Warnung reparieren kann:. Dies ist ein HTTP-Header und sollte in jeder Antwort des Ursprungsservers enthalten sein, da er dem Browser mitteilt, ob der Client komprimierte Versionen des Inhalts verarbeiten kann oder nicht. Dies wird automatisch auf allen Kinsta-Servern hinzugefügt

Spezifiziere eine Variable: Accept-Encoding-Header Warnung.
Spezifiziere eine Variable: Accept-Encoding-Header Warnung.

Pingdom Antwortcodes

Der nächste Abschnitt in Pingdom Speed Test Tool ist die Antwortcodes. Antwortcodes, auch als HTTP-Statuscodes bezeichnet, sind wie eine kurze Notiz vom Webserver, die oben auf einer Webseite angeheftet wird. Es ist eine Nachricht vom Webserver, die dich darüber informiert, wie es gelaufen ist, als die Anfrage zum Anzeigen der Seite erhalten wurde. Einige häufige sind:

  • 200: „Alles ist OK.“ Dies ist der Code, der geliefert wird, wenn eine Webseite oder Ressource genau so funktioniert, wie es erwartet wird.

    Beispiel für den Pingdom 200-Antwortcode
    Beispiel für den Pingdom 200-Antwortcode

  • 301: „Die angeforderte Ressource wurde dauerhaft verschoben.“ Dieser Code wird übermittelt, wenn eine Webseite oder Ressource dauerhaft durch eine andere Ressource ersetzt wurde. Es wird für die permanente URL-Umleitung verwendet.

    Beispiel für den Pingdom 301-Antwortcode
    Beispiel für den Pingdom 301-Antwortcode

  • Die angeforderte Ressource wurde nicht gefunden.“ Die häufigste Fehlermeldung von allen. Dieser Code bedeutet, dass die angeforderte Ressource nicht existiert und der Server nicht weiß, ob sie jemals existiert hat.

    Beispiel für den Pingdom 404-Antwortcode
    Beispiel für den Pingdom 404-Antwortcode

Weitere Informationen zu den verschiedenen Antwortcodes findest du in unserem ausführlichen Post zu HTTP-Statuscodes.

Inhaltsgröße und Anforderungen nach Inhaltstyp

Die nächsten Abschnitte sind die Inhaltsgröße nach Inhaltstyp und die Anforderungen nach Inhaltstyp. Jede dieser Optionen ist nützlich, um schnell zu erkennen, was auf deiner Webseite am meisten Ressourcen beansprucht. Laut HTTP Archive machen Bilder im Durchschnitt 43% der Gesamtgröße einer durchschnittlichen Webseite aus. Wir sehen auch, dass dies normalerweise auch der Fall ist. Wie du unten auf dieser Seite sehen kannst, ist dies jedoch nicht immer der Fall.

Pingdom Inhaltstyp
Pingdom Inhaltstyp

Zur Optimierung deiner Bilder empfehlen wir dir, unseren ausführlichen Beitrag zu lesen, wie man Bilder für das Web optimiert und über WebP Es gibt viele großartige Tools und Plugins, die deine Bilder weiter komprimieren und sicherstellen, dass sie nicht den Großteil der Seitenladung deiner Website ausmachen. Und in unserem Fall nutzt die Website perfmatters.io die Verwendung von großformatigen Icons anstelle von Bildern. Dies kann eine großartige Strategie sein, die einen großen Unterschied macht. Und natürlich haben wir einige zusätzliche Tipps in unserem Seitengeschwindigkeits-Guide, wie du deine Inhaltsgröße weiter reduzieren kannst.

Inhaltsgröße und Anfragen nach Domain

Der Inhaltsgröße und Anforderungen nach Domain-Bereich ist eine gute Möglichkeit, schnell zu sehen, welche externen Dienste und Skripte auf deiner Website sind. In unserem Beispiel kannst du sehen, dass alle unsere Assets von unserem CDN geladen werden. Dann gibt es die anfängliche HTML-DOC-Last für die Website vom Webserver und einen externen Aufruf für die Google Analytics-Domain. Abhängig von deiner Website hast du möglicherweise mehr externe Dienste, solche, wie Facebook, Twitter, Hotjar, SumoMe, AdRoll, New Relic, CrazyEgg usw.

Pingdom-Anfragen nach Domain
Pingdom-Anfragen nach Domain

Im Allgemeinen kannst du umso weniger externe Anfragen stellen, je besser die externen Dienste sind, da jede externe Dienstleistung eine eigene Latenz, TLS-Handshake-Verzögerungen, DNS-Lookups usw. mit sich bringt. Lies unseren ausführlichen Beitrag zum Identifizieren und Analysieren externer Dienste auf deiner WordPress-Website.

Im Allgemeinen ist es am besten, die Anzahl der Anfragen so weit wie möglich zu reduzieren und die Assets an einem Ort zu speichern, z. B. um sie auf deinen Webserver oder CDN zu verschieben. Ein Beispiel wäre Font Awesome. Anstatt eine Verknüpfung zum externen Skript für Font Awesome herzustellen, lade sie herunter und biete sie direkt an.

Pingdom Wasserfalldiagramm

Und zu guter Letzt haben wir den Bereich Pingdom Speed Test Tool Requests, der ein Wasserfalldiagramm aller einzelnen Anfragen auf deiner Webseite erstellt (wie unten gezeigt). Du kannst dann jede Anfrage analysieren, um zu sehen, was Verzögerungen und Leistungsprobleme auf deiner Website verursacht. Das meinen wir, wenn wir sagen, dass wir eine Wasserfall-Analyse machen. Im Folgenden finden du eine ausführlichere Zusammenfassung und / oder Definition dessen, was jede Statusfarbe bedeutet.

Pingdom Wasserfall-Analyse
Pingdom Wasserfall-Analyse

DNS (Pink)

Also, was ist DNS? Nun, denk daran wie ein Telefonbuch. Es gibt Server namens Domain Name Server, die Informationen über deine Website enthalten und an welche IP sie weitergeleitet werden soll. Wenn du deine Website zum ersten Mal über Pingdom ausführst, führt sie eine neue Suche durch und muss die DNS-Einträge abfragen, um die IP-Informationen zu erhalten. Dies führt zu einer zusätzlichen Suchzeit. Der Standort des DNS-Servers ist ebenfalls wichtig.

DNS verzögert sich in Pingdom
DNS verzögert sich in Pingdom

Wenn du deine Website mehr als einmal über Pingdom ausführst, wird der DNS zwischengespeichert, da er die IP-Informationen bereits kennt und die Suche nicht erneut durchführen muss. Dies ist ein Grund, warum deine Website schneller erscheint, nachdem du sie mehrmals in Pingdom ausgeführt hast.

Wie du auf dem folgenden Bildschirm sehen kannst, war beim 2ten Test die DNS-Lookup beim ersten DOC-Ladevorgang 3.6 ms. Normalerweise sinkt sie auf 0 ms, da die Anforderung bereits zwischengespeichert ist. Dies ist ein Bereich, den viele Leute falsch interpretieren!

Cached DNS in Pingdom
Cached DNS in Pingdom

Außerdem kannst du es weiter optimieren, indem du einen Premium-DNS -Service nutzt, und er bietet viele zusätzliche Vorteile. Das kostenlose DNS unserer Cloudflare ist auch schnell!

Es gibt auch andere Gründe, warum deine Website nach mehreren Tests schneller angezeigt wird. Eine davon ist, wenn du ein Content Delivery Network (CDN) verwendest. Für diejenigen von Euch, die nicht mit einem CDN vertraut sind, handelt es sich um ein Netzwerk globaler Server, die deinen Inhalt (JS, CSS, Bilder usw.) an Orten speichern, die näher beim Besucher liegen. Wenn du deine Website zum ersten Mal über Pingdom laufen lässt, musst du möglicherweise die Assets aus dem CDN-Format neu erfassen. Ein CDN-Cache funktioniert ähnlich wie DNS, sobald er zwischengespeichert ist, ist er dann bei aufeinanderfolgenden Ladevorgängen viel schneller.

Ein weiterer Tipp zur Beschleunigung von DNS ist die Verwendung von DNS-Prefetching. Dies ermöglicht dem Browser, DNS-Lookups auf einer Seite im Hintergrund durchzuführen. Du kannst dies tun, indem du der Kopfzeile deiner WordPress-Site einige Zeilen eines Codes hinzufügst. Siehe unten einige Beispiele.

<!-- Prefetch DNS for external assets -->
 <link rel="dns-prefetch" href="//fonts.googleapis.com">
 <link rel="dns-prefetch" href="//www.google-analytics.com"> 
 <link rel="dns-prefetch" href="//cdn.domain.com">

Oder wenn du WordPress Version 4.6 oder neuer ausführst, möchtest du vielleicht Ressourcenhinweise verwenden. Entwickler können mit dem Filter wp_resource_hints benutzerdefinierte Domänen und URLs für dns-prefetch, preconnect, prefetch oder prerender hinzufügen.

SSL (Lila)

Die lila Statusfarbe steht für die Zeit, die dein Browser für einen SSL / TLS-Handshake benötigt. Wann immer du eine Website über HTTPS ausführst, bedeutet dies, dass ein SSL-Zertifikat involviert ist und aufgrund des Verschlüsselungsprozesses (SSL/TLS handshake) zusätzliche Zeit erforderlich ist. Auf unserer Beispiel-Domain haben wir ein Zertifikat sowohl auf unserem Webserver bei Kinsta als auch auf unserem CDN, KeyCDN. Es gibt also eine SSL-Aushandlungszeit sowohl beim ersten Laden des HTML-Dokuments vom Webserver als auch bei unseren Assets.

SSL Ladezeit in Pingdom
SSL Ladezeit in Pingdom

Während es einen kleinen Overhead für das Ausführen von HTTPS gibt, ist es jetzt sehr vernachlässigbar dank HTTP / 2, welches ein neues Protokoll ist, welches das Web beschleunigt! Aufgrund der Browser-Unterstützung ist es notwendig HTTPS HTTP / 2 zu verwenden. Check unser ultimates Handbuch zu HTTP / 2.

Es ist auch wichtig zu beachten, dass auch in 2018 noch nicht alle Anbieter HTTP / 2 unterstützen. Dies umfasst sowohl die Webhosting-Seite als auch die CDN-Seite. Also, wenn du für Hosting und CDNs einkaufst, stelle sicher, dass beide es unterstützen! Kinsta ist stolz darauf, HTTP / 2 für alle seine WordPress-Kunden zu unterstützen.

Mitte 2018 hat Pingdom sein Tool endlich höher aktualisiert um Chrome 60 oder höher zu verwenden. Du kannst den im Anfrage-Header verwendeten user-agent sehen. Zuvor verwendeten sie Chrome 39 und Chrome hat HTTP / 2 bis Version 49 nicht unterstützt. Wir sind froh zu sagen, dass das Pingdom-Tool jetzt alle Vorteile von HTTP / 2 beim Ausführen von Tests aufweist! 👏

Pingdom HTTP/2 support
Pingdom HTTP/2 support

Verbinden (blaugrün)

Die Verbindungszeit in Pingdom bezieht sich auf die TCP-Verbindung oder die Gesamtzeit, die zum Erstellen einer TCP-Verbindung benötigt wird. Du musst nicht wirklich verstehen, wie das funktioniert, aber das ist einfach eine Kommunikationsmethode zwischen dem Hoster / Client und dem Server, die stattfinden muss.

Pingdom Verbindungszeit
Pingdom Verbindungszeit

Warten (Gelb)

Die Wartezeit in Pingdom bezieht sich eigentlich auf die Time to first Byte (Zeit bis zum ersten Byte), in einigen Tools auch als TTFB bezeichnet. TTFB ist eine Messung, die als Indikator für die Reaktionsfähigkeit eines Webservers oder einer anderen Netzwerkressource verwendet wird. Im Allgemeinen ist alles unter 100 ms akzeptabel und gute TTFB. Wenn du dich dem Bereich von 300-400 ms näherst, hast du möglicherweise eine falsche Konfiguration auf deinem Server oder es ist möglicherweise an der Zeit, auf einen besseren Web-Stack zu aktualisieren.

Wartezeit – TTFB
Wartezeit – TTFB

Der einfachste Weg, um deine TTFB zu verkleinern? Die besten zwei Möglichkeiten sind das effektive WordPress-Caching und ein CDN. Lass uns ein paar Tests durchführen.

TTFB ohne WordPress-Host-Cache

Nachdem wir den Cache auf unserer WordPress-Site geleert haben, haben wir zuerst einen Test durchgeführt. Das bedeutet, dass der Cache erneut geladen werden muss. Wie du sehen kannst, betrug unsere Gesamtladezeit 541 ms und die TTFB (Wartezeit) auf unsere anfängliche Anforderung betrug 185,2 ms.

Pingdom TTFB ohne WordPress-Host-Cache
Pingdom TTFB ohne WordPress-Host-Cache

TTFB mit WordPress-Host-Cache

Wir haben dann den Test erneut durchgeführt. Es wird jetzt direkt vom Cache aus bedient. Wie du sehen kannst, sind unsere Gesamtladezeiten auf 392 ms gefallen und unser durchschnittlicher TTFB beträgt jetzt 52,8 ms! Das ist der Unterschied, den das Caching ausmacht.

Pingdom TTFB mit WordPress-Host-Cache
Pingdom TTFB mit WordPress-Host-Cache

Wenn du eine Website hast, die Besucher in verschiedenen Teilen des Landes oder auf der ganzen Welt bedient, ist der einfachste Weg, deine TTFB drastisch zu reduzieren, ein CDN zu verwenden. Wir haben einen kleinen Test durchgeführt, um den Unterschied zu zeigen.

TTFB ohne CDN

Wir haben zuerst einen Test mit deaktiviertem CDN durchgeführt, und wie du sehen kannst, betrug unsere Gesamtladezeit 1,93 s und unser durchschnittlicher TTFB auf einem Asset lag bei ungefähr 176 ms.

TTFB ohne CDN
TTFB ohne CDN

TTFB mit CDN

Wir haben dann unseren CDN aktiviert und den Test erneut durchgeführt. Wie du sehen kannst, sind unsere Gesamtladezeiten auf 1,21 s gefallen und unser durchschnittlicher TTFB beträgt jetzt 4,6 ms! Was für einen Unterschied ein CDN machen kann.

TTFB mit CDN
TTFB mit CDN

Eine weitere wichtige Sache ist, dass wir den „Pazifik – Australien – Sydney” -Standort ausgewählt haben, um diesen Test durchzuführen. Warum? Weil wir dir die wirkliche Verbesserung zeigen wollten. Unsere WordPress-Website in diesem Beispiel wird von Kinsta in der Google Cloud gehostet und befindet sich in einem zentralen Standort in den USA. Mit dem Test gegen Australien können wir zeigen, wie das CDN-Caching die Geschwindigkeit erhöht und den TTFB reduziert.

Und natürlich ist es auch entscheidend, einen guten WordPress-Host mit einer sorgfältig durchdachten Architektur zu haben, um den TTFB zu senken.

Senden (Orange) und Empfangen (Grün)

Die Sende- und Empfangsstatus in Pingdom brauchen nicht wirklich eine Erklärung. Die Sendezeit ist einfach die Zeit, die der Webbrowser benötigt, um Daten an den Server zu senden. Und die Empfangszeit ist die Zeit, die der Webbrowser benötigt, um Daten vom Server zu empfangen. Beide sind in deinen Tests normalerweise sehr niedrig oder nicht vorhanden.

HTTP-Antwortheader

Du kannst auch auf eine einzelne Anfrage klicken, während du deine Wasserfallanalyse durchführst und die HTTP-Antwortheader siehst. Dies liefert wertvolle Informationen. Auf dem folgenden Bildschirm sehen wir sofort, wie gzip auf dem Webserver aktiviert ist, es wird aus dem Cache bedient (HIT, würde sonst MISS anzeigen), die Cache-Control-Header, Expires-Header, der Browser User-Agent und mehr.

HTTP-Antwortheader
HTTP-Antwortheader

Fallstudie Domänenkonfiguration

Wenn du so weit runter in unserem Wasserfall-Analyse-Post gekommen bist, dann mach dich auf was gefasst. Es ist immer nervig zu sehen, wie Leute Tipps und Fallstudien teilen, aber dann nicht teilen, wie sie dorthin gekommen sind. Im Folgenden findest du unsere genaue Konfiguration für die Fallstudie Domain oben! Fühl dich frei, es zu replizieren.

Architektur

  • Die Fallstudien-Domain (perfmatters.io) wird mit Kinsta auf der Google Cloud Platform in den USA (Council Bluffs, Iowa, USA (us-central1) gehostet. Kinsta bietet derzeit 37 verschiedene Rechenzentren zur Auswahl an. Das Premium Tier-Netzwerk von GCP ist in allen Plänen für eine schnelle Netzwerklatenz enthalten.
  • Kinsta verwendet HTTP / 2, Nginx, MariaDB, die alle zu den schnellen Ladezeiten beitragen.
  • Die Seite verwendet KeyCDN, die den Kinsta CDN antreibt. Kostenlose CDN-Bandbreite ist in allen Hosting-Paketen enthalten.
  • Die Website verwendet kein Caching-Plugin. Kinsta caches alles auf Serverebene was die Dinge erheblich vereinfacht!
  • Die Website verwendet PHP 7.3. Neuere Versionen von PHP haben immer große Leistungsverbesserungen gezeigt. Schaue dir diese PHP-Benchmarks an. Mit Kinsta kannst du mit einem Tastendruck zwischen den beiden wechseln.
Aktualisieren Sie die PHP-Version der WordPress-Site
Aktualisieren Sie die PHP-Version der WordPress-Site

 

WordPress Plugins und Themes

Und hier ist eine Liste der Plugins, die auf der WordPress Ecommerce-Seite verwendet werden und die Leistung beinflussen.

  • Das Premium-Plugin Perfmatters, entwickelt von einem Teammitglied bei Kinsta. Dies beseitigt unnötige HTTP-Anforderungen wie Einbettungen, Emojis und einen Skript-Manager, mit dem bestimmte Skripts pro Seite, pro Post oder pro Website-Basis geladen werden können.
  • Das Premium-Plugin Imagify dient zum Komprimieren von Bildern.
  • Das kostenlose Safe SVG-Plugin wird zum Hochladen von SVG-Bildern auf die WordPress-Site verwendet.
  • Für die Erstellung der EDD-Seite wurde das Premium WordPress-Theme GeneratePress verwendet.

Empfohlene Tutorials zum Weiterlesen:

Zusammenfassung

Wie du sehen kannst, kannst du, wenn du weißt, wie das Pingdom-Geschwindigkeitstest-Tool ein wenig besser funktioniert und was alle Diagramme bedeuten, eine datengesteuerte Entscheidung treffen, wenn es um die Leistung geht. Eine Wasserfallanalyse, wie wir sie nennen, ist entscheidend dafür, wie deine individuellen Assets geladen werden und wie sie von deinem WordPress-Hoster, dem physischen Standort, einem CDN usw. beeinflusst werden. Hast du noch andere tolle Pingdom Tipps?

Wenn du ausführlichere Artikel wie den oben genannten sehen möchtest, lass es uns unten in den Kommentaren wissen!

Brian Jackson

Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.