Es gibt viele Möglichkeiten, die du als Betreiber einer Webseite hast, wenn es darum geht, Geschwindigkeitstests durchzuführen, um die Performance zu überprüfen. Zuvor haben wir uns das Tool Pingdom genauer angeschaut. Heute wollen wir uns damit beschäftigen, wie du die Daten des beliebten Tools GTmetrix Speed Test besser nutzen und verstehen kannst. Tools wie dieses setzen auf Bewertungssysteme und Scores, zusammen mit Warnungen, was auf deiner Webseite falsch sein könnte. Manchmal können diese regelrecht verwirrend sein. Wenn du dir etwas Zeit nimmst, um zu verstehen, was sie tatsächlich bedeuten, kannst du nicht nur deine Punktzahl erhöhen, sondern auch die Leistung deiner Webseite, was wirklich wichtig ist.

Zu wissen, wie @GTmetrix funktioniert, ist eine unschätzbare Information für Betreiber von WordPress Webseiten! ⏱Click to Tweet

GTmetrix wurde von GT.net, einem Unternehmen mit Sitz in Kanada, als Tool für ihre Hosting Kunden entwickelt, um die Performance deiner Webseite einfach zu bestimmen. Neben Pingdom ist es heute wohl eines der bekanntesten und meistgenutzten Speedtest Tools im Web! Tatsächlich ist der Grund, warum wir dies schreiben, dass wir viele Kinsta-Kunden haben, die uns immer wieder fragen, wie sie die Hinweise, die sie auf ihren GTmetrix-Berichten sehen, befolgen können. Im Vergleich zu anderen Tools für Entwickler ist GTmetrix ziemlich einfach zu bedienen und ein Anfänger kann es ziemlich schnell erlernen. Es nutzt eine Kombination aus Google PageSpeed Insights und YSlow, um Scores und Empfehlungen zu generieren.

GTmetrix Speed Test Tool

GTmetrix Speed Test Tool

GTmetrix Analyse Optionen

Die Basisversion von GTmetrix ist komplett kostenlos und du erhältst Zugang zu einer Reihe von Optionen, indem du dich einfach für einen Account anmeldest. Es gibt auch Premium-Pläne, aber in unserem heutigen Beitrag werden wir die kostenlose Version verwenden. Wenn du einen Account hast, kannst du eine Reihe von zusätzlichen Analyseoptionen nutzen.

Die erste ist die Möglichkeit, den Ort zu wählen, an dem du deine URL testen möchtest. Der physische Standort, den du auswählst, ist tatsächlich sehr wichtig, da er sich darauf bezieht, wo deine Webseite tatsächlich gehostet wird. Je weniger Latenz, desto schneller sind deine Ladezeiten. Derzeit verfügbare Standorte sind:

Du kannst wählen, welchen Browser du verwenden möchtest. Du kannst mit Chrome (Desktop) und Firefox (Desktop) testen. Mobile Versionen sind in ihren Premium-Plänen verfügbar. Du kannst auch die Verbindungsgeschwindigkeit ändern, was bedeutet, dass du verschiedene Verbindungsarten simulieren kannst, um zu sehen, wie sie sich auf deine Seitenladezeiten auswirken.

GTmetrix Test Format Optionen

GTmetrix Test Format Optionen

Zusätzliche Optionen beinhalten die Möglichkeit, ein Video zu erstellen. Dies kann dir bei der Fehlersuche helfen, da du sehen kannst, wie die Seite gerendert wird. Der AdBlock Plus ist ein nettes Feature. Wenn du ein Werbenetzwerk eines Drittanbieters wie z.B. Google Adsense nutzt, kannst du diese Option aktivieren, um die volle Auswirkung von Anzeigen auf deine Ladezeiten zu sehen.

GTmetrix zusätzliche Optionen

GTmetrix zusätzliche Optionen

Weitere Optionen sind das Anhalten des Tests beim Laden (worauf wir später noch eingehen werden), die Möglichkeit, ein Cookie zusammen mit der Anfrage zu senden, HTTP-Authentifizierung zu verwenden, die Möglichkeit, URLs auf eine Whitelist oder Blacklist zu setzen, die Bildschirmauflösung und das Pixelverhältnis des Geräts sowie das Überschreiben des User Agents.

Analyse mit dem GTmetrix Speed Test Tool

Eine Webseite besteht aus verschiedenen Assets, wie HTML, JavaScript, CSS und Bildern. Jedes dieser Elemente erzeugt Anfragen, um das zu rendern, was du auf deiner Webseite siehst. Je mehr Anfragen du hast, desto langsamer wird deine Webseite normalerweise geladen. Das ist nicht immer der Fall, aber meistens ist es so.

Im Folgenden werden wir jeden GTmetrix-Abschnitt aufschlüsseln und genauer erklären, was die Informationen für die Gesamtleistung deiner Webseite bedeuten und was du mit den Empfehlungen anfangen kannst.  Denke daran, dass du dich nicht zu sehr auf die Ergebnisse konzentrieren solltest, sondern eher darauf, die Geschwindigkeit auf deiner Webseite zu verbessern.

GTmetrix Zusammenfassung (Performance Scores und Details)

Wenn du deine WordPress Webseite durch GTmetrix laufen lässt, generiert es einen Leistungsbericht, der deinen „GTmetrix Grade“ und „Web Vitals“ enthält.

Der GTmetrix Grade wird aus zwei Metriken berechnet – Leistung und Struktur.

Im Jahr 2020 führte Google ein standardisiertes Set von Web Performance und User Experience Metriken ein, genannt Web Vitals. Web Vitals besteht aus einer Vielzahl von Metriken, aber die von GTmetrix berücksichtigten sind Largest Contentful Paint (LCP), Total Blocking Time (TBT) und Cumulative Layout Shift (CLS).

In unserem Beispiel verwenden wir unsere Fallstudien-Domain kinstalife.com, die auf Kinsta gehostet wird. In unserem ersten Speedtest verzeichnete deine Webseite die folgenden Werte.

GTmetrix Speed Test für kinstalife.com.

GTmetrix Speed Test für kinstalife.com.

Wir haben dann einen zusätzlichen Test durchgeführt und jetzt ist unsere GTmetrix Note „A“! Woran liegt das? Du wirst das vielleicht auch bemerken, wenn du deine Webseite mehrmals durch das GTmetrix Speed Test Tool laufen lässt. Einer der Gründe, warum das passiert, ist das Caching, sowohl DNS-Caching als auch Server-Caching. Finde heraus warum, weiter unten in unserer Waterfall-Analyse.

Unser zweiter Speed Test mit GTmetrix.

Unser zweiter Speed Test mit GTmetrix.

Die GTmetrix Übersichtsseite enthält auch eine Geschwindigkeitsvisualisierung, die eine Zeitleiste der wichtigsten Ereignisse während eines Seitenaufrufs anzeigt. Im Screenshot unten siehst du TTFB, FCP, LCP, Onload-Zeit, Zeit bis zur Interaktivität und die vollständig geladene Zeit für kinstalife.com.

Unten auf der Übersichtsseite gibt es außerdem die Bereiche "Top-Probleme" und "Seitendetails". Unter "Top-Probleme" siehst du eine Liste mit den wichtigsten Problemen, die behoben werden müssen, während "Seitendetails" eine Aufschlüsselung der Prozentzahlen und der Dateigröße deiner Seite bietet.

Unten auf der Übersichtsseite gibt es außerdem die Bereiche „Top-Probleme“ und „Seitendetails“. Unter „Top-Probleme“ siehst du eine Liste mit den wichtigsten Problemen, die behoben werden müssen, während „Seitendetails“ eine Aufschlüsselung der Prozentzahlen und der Dateigröße deiner Seite bietet.

GTmetrix Top-Themen und Seitendetails.

GTmetrix Top-Themen und Seitendetails.

Leistung

Als nächstes kommt der GTmetrix „Performance“-Tab, der eine Reihe von nützlichen Metriken zeigt, die aus den Lighthouse Leistungsdaten stammen. Zusätzlich zu den LCP, TBT und CLS, die auf der Übersichtsseite angezeigt werden, zeigt der „Performance Metrics“ Bereich auch den Speed Index (SI), Time to Interactive (TTI) und First Contentful Paint (FCP).

GTmetrix Lighthouse Leistungsmetriken.

GTmetrix Lighthouse Leistungsmetriken.

Der Abschnitt „Performance Metrics“ zeigt dir zwar nicht genau, was du verbessern musst, aber er gibt dir einen guten Überblick darüber, welche wichtigen Metriken du verbessern kannst.

Weiter unten auf der Seite zeigt GTmetrix auch ein paar traditionellere „Browser Timing“-Statistiken an, darunter Onload Time, Time to First Byte, Fully Loaded Time, und mehr. In der Vergangenheit waren diese traditionellen Metriken sehr wichtig. Da Google jedoch mit Web Vitals den Weg für standardisierte Metriken geebnet hat, empfehlen wir, stattdessen für diese zu optimieren. In den meisten Fällen wirst du feststellen, dass die Optimierung für Web Vitals auch zu guten Browser Timing Metriken führen wird.

GTmetrix Browser Timing Metriken.

GTmetrix Browser Timing Metriken.

Struktur

Im GTmetrix Tab „Struktur“ kannst du dir spezifische Probleme ansehen, die die Performance deiner Webseite beeinflussen. Diese Seite ist sehr nützlich, da sie dir umsetzbare Informationen wie „Render-Blocking-Ressourcen eliminieren“ und „CSS minifizieren“ bietet, um deine Webseite zu optimieren.

Wir werden versuchen, die häufigsten und beliebtesten Probleme zu behandeln, mit denen wir Betreiber von WordPress Seiten kämpfen sehen. Setze ein Lesezeichen für diesen Beitrag, da wir ihn ständig aktualisieren werden. Generell gilt: Wenn du diese Punkte auf deiner Webseite verbesserst, solltest du eine Steigerung der Performance sehen.

GTmetrix PageSpeed Scores

GTmetrix PageSpeed Scores

Skalierte Bilder anzeigen lassen

Wenn es darum geht, mit Bildern auf deiner Webseite zu arbeiten, solltest du immer versuchen, sie maßstabsgetreu hochzuladen und sie nicht per CSS in der Größe anpassen zu lassen. Wenn du das nicht tust, wirst du mit der Empfehlung, skalierte Bilder zu verwenden, enden. Wenn du WordPress verwendest, passt es standardmäßig die Größe deiner Bilder an, wenn du sie in die Medienbibliothek hochlädst. Diese Einstellungen findest du unter „Einstellungen > Medien“. Du wirst sicherstellen wollen, dass die maximale Breite nahe an der Breite deiner Webseite liegt. Auf diese Weise versucht CSS nicht, dein Bild zu verkleinern, damit es hineinpasst. Du könntest sie auch mit einem Plugin zur Bildoptimierung automatisch verkleinern.

Skalierte Bilder anbieten

Skalierte Bilder anbieten

Inline Small CSS

Das Inlinen deines CSS wird normalerweise nicht empfohlen, da es die Gesamtgröße deiner Seitenanfragen erhöht. Wenn deine Webseite jedoch klein ist, mit minimalen Anfragen, könnte es deine Leistung verbessern.

Inline small CSS

Inline small CSS

Um dein CSS einfach zu inlinen, kannst du ein kostenloses Plugin wie Autoptimize verwenden. Setze einfach ein Häkchen bei der Option „Inline all CSS?“ und stelle dann sicher, dass du die zusätzlichen CSS-Dateien, die du nicht einbindest, ausgeschlossen hast.

Auto-Optimierung von Inline-CSS

Auto-Optimierung von Inline-CSS

Inline Small JavaScript

Genauso wie beim Inlinen von kleinem CSS, gilt das Gleiche für das Inlinen von kleinem JavaScript. Normalerweise wird es nicht empfohlen, da es die Gesamtgröße des Downloads deiner Seitenanfrage erhöht. Wenn deine Webseite jedoch klein ist, mit minimalen Anfragen, könnte es deine Leistung verbessern. Auch hier kannst du die JavaScript-Einstellungen von Autoptimize nutzen.

Inline Small JavaScript

Inline Small JavaScript

Browser Caching ausnutzen

Leverage Browser Caching ist eine sehr häufige Empfehlung, mit der die Leute kämpfen. Das liegt daran, dass du nicht die richtigen HTTP-Cache-Header auf deinem Webserver hast. Siehe unseren ausführlichen Beitrag, wie du die Leverage Browser Caching Warnung beheben kannst. Du kannst dies nur für Ressourcen beheben, die du kontrollierst. Wenn du diese Warnung zum Beispiel bei Werbenetzwerken von Drittanbietern siehst, kannst du nichts tun.

Browser Caching nutzen

Browser Caching nutzen

Ressourcen von einer konsistenten URL bereitstellen?

Wenn du siehst, dass die Ressourcen von einer konsistenten URL angezeigt werden, ist es höchstwahrscheinlich, dass du identische Ressourcen von der gleichen URL angezeigt bekommst. Oftmals kann dies passieren, wenn Query Strings involviert sind. Schaue dir an, wie du Query Strings aus statischen Ressourcen entfernen kannst. Sobald sie weg sind, sollte es nicht mehr zweimal geladen werden müssen.

Ressourcen von einer konsistenten URL bereitstellen.

Ressourcen von einer konsistenten URL bereitstellen.

Parsing von JavaScript aufschieben

JavaScript und CSS sind standardmäßig render-blocking. Das bedeutet, dass sie verhindern können, dass die Webseite angezeigt wird, bis sie heruntergeladen und vom Browser verarbeitet wurden. Das defer-Attribut sagt dem Browser, dass er mit dem Herunterladen der Ressource warten soll, bis das HTML-Parsing abgeschlossen ist. Ein paar einfache Möglichkeiten, dies zu beheben, sind die kostenlosen Autoptimize oder Async JavaScript Plugins. Schau dir auch unseren ausführlichen Beitrag darüber an, wie du Rendering-Blocker in JavaScript und CSS eliminieren kannst.

Parsing von JavaScript aufschieben

Parsing von JavaScript aufschieben

Für eine ausführliche Erklärung, ließ: Wie man das Parsing von Javascript-Warnungen in WordPress verschiebt (4 Methoden).

CSS und JavaScript minimieren

Minification ist im Wesentlichen das Entfernen aller unnötigen Zeichen aus dem Quellcode, ohne dessen Funktionalität zu verändern. Dazu können Zeilenumbrüche, Leerzeichen, Einrückungen, etc. gehören. Auf diese Weise kann es Datenbytes einsparen und das Herunterladen, Parsen und die Ausführungszeit beschleunigen.

CSS und JavaScript minimieren

CSS und JavaScript minimieren

Auch hier ist das kostenlose Plugin Autoptimize großartig für diese Aufgabe. Stelle einfach sicher, dass „Optimize JavaScript Code“ und „Optimize CSS Code“ beide aktiviert sind. Wenn du eine große Webseite hast, möchtest du vielleicht auch mit den erweiterten Einstellungen darunter spielen, da einige die Performance auf deiner Webseite beeinträchtigen könnten. Das Inlinen oder Kombinieren von CSS und JavaScript auf großen Webseiten wird normalerweise nicht empfohlen. Hier kommt die Macht von HTTP/2 ins Spiel.

Autoptimize minimieren von CSS und JavaScript

Autoptimize minimieren von CSS und JavaScript

Bilder optimieren

Laut HTTP Archive, Stand April 2017, machen Bilder im Durchschnitt 66% des Gesamtgewichts einer Webseite aus. Wenn es also darum geht, deine WordPress Seite zu optimieren, sind Bilder bei weitem der erste Ort, an dem du anfangen solltest! Es ist wichtiger als Skripte und Schriftarten.

Bilder optimieren

Bilder optimieren

In einer perfekten Welt sollte jedes Bild komprimiert und optimiert werden, bevor es in WordPress hochgeladen wird. Aber leider ist das einfach nicht realistisch. Aus diesem Grund empfehlen wir die Verwendung eines guten Plugins zur Bildoptimierung. Dieses hilft dir dabei, deine Bilder automatisch zu komprimieren, ihre Größe anzupassen und sicherzustellen, dass sie leichtgewichtig sind und schnell auf deiner Webseite geladen werden. Schau dir unseren ausführlichen Beitrag über die Optimierung von Bildern für das Web an.

Reduziere die anfängliche Server-Reaktionszeit

Bei WordPress ist der Hauptschuldige für langsame anfängliche Server-Antwortzeiten das Fehlen von Seiten-Caching. Ohne Seitencaching verwendet WordPress PHP, um Seiten für jede einzelne Anfrage dynamisch aufzubauen, was bedeutet, dass es schnell mit Anfragen überfordert sein kann. Mit aktiviertem Seitencaching kann deine Webseite vorgenerierte HTML-Dateien auf dem Server speichern, was viel schneller und skalierbarer ist, als wenn PHP jede einzelne Seitenanforderung erfüllen muss.

Reduziere die anfängliche Reaktionszeit des Servers.

Reduziere die anfängliche Reaktionszeit des Servers.

Wenn du auf Kinsta hostest, musst du dir keine Sorgen um das Seitencaching machen, da wir das mit unserer Nginx-Konfiguration für dich übernehmen. Wenn dein WordPress Host kein Seitencaching unterstützt, kannst du ein Caching Plugin wie WP Rocket oder W3 Total Cache installieren. Um die Antwortzeit des Servers noch weiter zu reduzieren, empfehlen wir dir, Cloudflare APO in deine WordPress Seite zu integrieren. Dieser innovative Optimierungsdienst von Cloudflare verteilt die HTML-Seiten deiner Webseite auf der ganzen Welt, was die Server-Antwortzeit global reduzieren kann.

HTML verkleinern

Genau wie CSS und JavaScript kann auch HTML verkleindert werden, um unnötige Zeichen zu entfernen und dir Bytes an Daten zu sparen, um die Ausführungszeit zu beschleunigen.

gtmetrix minify html

HTML verkleinern

Das kostenlose Plugin Autoptimize eignet sich ebenfalls hervorragend dafür. Aktiviere einfach die Option „Optimize HTML Code„.

Autoptimize optimieren des HTML Code

Autoptimize optimieren des HTML Code

GZIP Komprimierung aktivieren

GZIP ist ein Dateiformat und eine Softwareanwendung, die zur Dateikomprimierung und -dekomprimierung verwendet wird. Die GZIP-Kompression wird serverseitig aktiviert und ermöglicht eine weitere Reduzierung der Größe deiner HTML-, Stylesheet- und JavaScript-Dateien. Es funktioniert nicht bei Bildern, da diese bereits auf eine andere Weise komprimiert sind. Einige haben durch die Komprimierung eine Reduzierung von bis zu 70% gesehen. Es ist wahrscheinlich eine der einfachsten Optimierungen, die du machen kannst, wenn es um WordPress geht. Hinweis: Die GZIP-Kompression ist auf allen Kinsta-Servern standardmäßig aktiviert.

Aktiviere GZIP Kompression

Aktiviere GZIP Kompression

Um die GZIP-Kompression im Apache zu aktivieren, füge einfach den folgenden Code zu deiner .htaccess-Datei hinzu.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Wenn du mit NGINX arbeitest, füge einfach das Folgende zu deiner nginx.conf Datei hinzu.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Schau dir auch unseren ausführlichen Beitrag an, wie du die GZIP-Kompression aktivierst.

Weiterleitungen minimieren

Die Minimierung von HTTP-Redirects von einer URL zu einer anderen reduziert zusätzliche RTTs und Wartezeiten für Nutzer. Schau dir unseren Beitrag über WordPress-Weiterleitungen an, in dem wir herausgefunden haben, dass 2 schlechte Weiterleitungen die Ladezeiten einer Webseite um 58% erhöht haben! Schlicht und einfach, WordPress Weiterleitungen verlangsamen deine Webseite. Deshalb lohnt es sich, sich die Zeit zu nehmen, um die Anzahl der Weiterleitungen zu minimieren, die Besucher deiner Webseite durchlaufen.

Weiterleitungen minimieren

Weiterleitungen minimieren

Einen Cache-Validator angeben

Die Empfehlung, einen Cache-Validator anzugeben, erscheint, wenn HTTP-Caching-Header fehlen. Diese sollten in jeder ursprünglichen Serverantwort enthalten sein, da sie sowohl validieren als auch die Länge des Caches festlegen. Wenn die Header nicht gefunden werden, wird es jedes Mal eine neue Anfrage für die Ressource generieren, was die Last auf deinem Server erhöht.  Die Verwendung von Caching Headern stellt sicher, dass nachfolgende Anfragen nicht vom Server geladen werden müssen, was Bandbreite spart und die Performance für den Nutzer verbessert. Denke daran, dass du dies nicht bei Ressourcen von Drittanbietern beheben kannst, die du nicht kontrollierst.

Important

HTTP-Caching-Header werden automatisch auf allen Kinsta-Servern hinzugefügt.

Lege einen Cache Validator fest

Lege einen Cache Validator fest

Es gibt eine Reihe von verschiedenen HTTP-Caching-Headern, die verwendet werden können, um diese Empfehlung zu beheben. Schau dir unseren ausführlichen Beitrag darüber an, wie man einen Cache-Validator festlegt.

Bildabmessungen spezifizieren

Genauso wie du nicht zulassen solltest, dass CSS die Größe deiner Bilder verändert, solltest du auch die Bildabmessungen angeben. Das bedeutet, dass du die Breite und Höhe in deinem HTML-Code angeben solltest.

Nicht korrekt

<img src="https://domain.com/images/image1.png">

Korrekt

<img src="https://domain.com/images/image1.png" width="200" height="100">
Bildabmessungen angeben

Bildabmessungen angeben

Query Strings aus statischen Ressourcen entfernen

Deine CSS- und JavaScript-Dateien haben normalerweise die Dateiversion am Ende ihrer URLs, wie z.B. domain.com/style.css?ver=4.6. Einige Server und Proxyserver sind nicht in der Lage, Query Strings zu cachen, selbst wenn ein cache-control:public Header vorhanden ist. Indem du sie also entfernst, kannst du manchmal dein Caching verbessern. Dies kann ganz einfach mit Code oder kostenlosen WordPress Plugins gemacht werden.

Schau dir unseren ausführlichen Beitrag an, wie du Query Strings aus statischen Ressourcen entfernst. Denke daran, dass du dies nicht bei Ressourcen von Drittanbietern machen kannst, die du nicht kontrollierst.

Abfrage-Strings aus statischen Ressourcen entfernen

Abfrage-Strings aus statischen Ressourcen entfernen

Spezifiziere einen Vary: Accept-Encoding Header

Dies ist ein HTTP-Header und sollte in jeder Ursprungsserver-Antwort enthalten sein, da er dem Browser mitteilt, ob der Client mit komprimierten Versionen des Inhalts umgehen kann oder nicht. Normalerweise, wenn die GZIP-Kompression aktiviert ist, ist dies auch festgelegt. Aber sieh dir unseren ausführlichen Beitrag darüber an, wie man die Empfehlung des specify a vary: accept-encoding Headers beheben kann. Und noch einmal, du kannst dies nicht auf Drittanbieter-Ressourcen beheben.

Spezifiziere einen vary: accept-encoding header

Spezifiziere einen vary: accept-encoding header

GTmetrix Waterfall Diagramm

Das GTmetrix Wasserfall Diagramm zeigt alle einzelnen Anfragen auf deiner Webseite an (wie unten gezeigt). Du kannst dann jede einzelne Anfrage analysieren, um zu sehen, was Verzögerungen und Performance-Probleme auf deiner Webseite verursacht. Unten findest du eine detailliertere Zusammenfassung und eine Definition, was jede der Farben für jede Anfrage bedeutet.

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an
GTmetrix Waterfall Diagramm

GTmetrix Waterfall Diagramm

Blockieren (Braun)

Wenn ein Browser eine Webseite lädt, verhindern JavaScript- und CSS-Ressourcen in der Regel, dass die Webseite angezeigt wird, bis sie vom Browser heruntergeladen und verarbeitet werden. Diese Zeitverzögerung wird im GTmetrix Waterfall Diagramm als Blocking angezeigt. Schau dir unseren ausführlichen Beitrag darüber an, wie du Render-Blocking JavaScript und CSS eliminierst, um mehr Informationen zu erhalten.

blocking

blocking

DNS Lookup (Teal)

Du kannst dir den DNS Lookup wie ein Telefonbuch vorstellen. Es gibt Server, die Domain Name Server genannt werden und die die Informationen über deine Webseite und die IP, zu der sie geroutet werden soll, enthalten. Wenn du deine Webseite zum ersten Mal durch GTmetrix laufen lässt, führt es einen frischen Lookup durch und muss die DNS-Einträge abfragen, um die IP-Informationen zu erhalten. Dies führt zu einer zusätzlichen Suchzeit.

gtmetrix first dns

Wenn du deine Webseite ein zweites Mal durch GTmetrix laufen lässt, speichert es den DNS, weil es die IP-Informationen bereits kennt und die Suche nicht erneut durchführen muss. Das ist ein Grund, warum deine Webseite schneller erscheint, wenn du sie mehrmals durch GTmetrix laufen lässt. Wie du auf dem Bildschirm unten sehen kannst, beträgt die DNS-Lookup-Zeit beim zweiten Test, den wir durchgeführt haben, beim ersten Laden des DOC 0 ms. Dies ist ein Bereich, den viele Leute falsch interpretieren! Wir empfehlen dir, deinen Test mehrmals auszuführen und den Durchschnitt zu nehmen, es sei denn, du willst DNS als Teil deines Berichts, in diesem Fall kannst du den ersten Test nehmen.

Zweiter DNS Lookup

Zweiter DNS Lookup

Das Gleiche gilt für deine Assets (JavaScript, CSS, Bilder), wenn du ein CDN verwendest. Ein CDN-Cache funktioniert ähnlich wie DNS, wenn es einmal gecached ist, ist es dann bei aufeinanderfolgenden Ladungen viel schneller. Ein weiterer Tipp, um DNS zu beschleunigen, ist die Verwendung von DNS Prefetching. Dies erlaubt es dem Browser, DNS-Lookups auf einer Seite im Hintergrund durchzuführen. Du kannst dies tun, indem du einige Codezeilen in den Header deiner WordPress Seite einfügst. Siehe einige Beispiele unten.

<!-- 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 verwendest, möchtest du vielleicht Resource Hints verwenden. Entwickler können den wp_resource_hints Filter verwenden, um eigene Domains und URLs für dns-prefetchpreconnectprefetch oder prerender hinzuzufügen.

Verbinden (Grün)

Die Verbindungszeit in GTmetrix bezieht sich auf die TCP-Verbindung, oder die Gesamtzeit, die benötigt wird, um eine TCP-Verbindung herzustellen. Du musst nicht wirklich verstehen, wie das funktioniert, aber dies ist einfach eine Kommunikationsmethode zwischen dem Host/Client und dem Server, die stattfinden muss.

Verbinden

Verbinden

Senden (Rot)

Die Sendezeit ist einfach die Zeit, die es dauert, bis der Webbrowser Daten an den Server sendet.

Senden

Senden

Warten (Lila)

Die Wartezeit in GTmetrix bezieht sich eigentlich auf die Zeit bis zum ersten Byte, in einigen Tools auch TTFB genannt. TTFB ist eine Messung, die als Hinweis auf die responsive eines Webservers oder einer anderen Netzwerkressource verwendet wird. Generell gilt alles unter 100 ms als akzeptabel und gute TTFB. Wenn du dich dem Bereich von 300-400 ms näherst, könnte etwas auf deinem Server falsch konfiguriert sein oder es könnte an der Zeit sein, auf einen besseren Web-Stack aufzurüsten. Wie du in unserem Test unten sehen kannst, waren es ungefähr 100 ms, was großartig ist.

Warten

Warten

Einige einfache Möglichkeiten, um den TTFB zu reduzieren, sind, sicherzustellen, dass dein Host ein gutes Caching betreibt und ein CDN nutzt. Sieh dir unseren ausführlichen Beitrag über alle Möglichkeiten an, TTFB auf deiner WordPress Seite zu reduzieren.

Empfangen (Grau)

Die Empfangszeit ist einfach die Zeit, die es dauert, bis der Webbrowser Daten vom Server empfängt.

Empfangen

Empfangen

Ereignis-Timings

Jedes Mal, wenn du eine Seite aufrufst, hat es ein Event Timing, in dem Dinge gerendert und geladen werden.

Ereignis-Timing

Ereignis-Timing

HTTP Antwort Header

Du kannst auch auf eine einzelne Anfrage klicken, um zu sehen, wie sie die HTTP-Antwort-Header nennen. Dies liefert wertvolle Informationen. Auf dem Bildschirm unten können wir sofort sehen, ob gzip auf dem Webserver aktiviert ist, ob es über HHVM läuft, ob es aus dem Cache geliefert wird (HIT, würde sonst MISS anzeigen), die cache-control Header, die Serverarchitektur (diese ist nicht immer sichtbar), expires Header, der Browser User-Agent und mehr.

HTTP Antwort Header in GTmetrix

HTTP Antwort Header in GTmetrix

Eine weitere Sache, die du beachten solltest, ist, dass das GTmetrix Tool im Gegensatz zu Pingdom HTTP/2 unterstützt, da es derzeit Chrome 58+ für seine Tests verwendet. Chrome hat HTTP/2 Support in Version 49 hinzugefügt. Behalte das also im Hinterkopf, wenn du dich entscheidest, welches Speedtest Tool du verwenden möchtest.

Video

Um dir zu helfen, visuelle Störungen und Probleme mit der Frontend-Performance zu beheben, enthält die neueste Version von GTmetrix einen „Video“-Tab. Wenn das Video-Feature aktiviert ist, nimmt GTmetrix automatisch ein einbettbares Video auf, das zeigt, wie eine Seite für jeden Performance-Test geladen wird. Diese Funktion ist sehr nützlich, um visuelle Probleme zu debuggen, die nur bei bestimmten Browser- und Bildschirmgrößenkombinationen auftreten.

GTmetrix Videoaufnahme.

GTmetrix Videoaufnahme.

Verlauf

Unter dem Reiter Historie kannst du alle deine vergangenen Speedtests einsehen. Es gibt ein Limit, wie viele in kostenlosen Accounts gespeichert werden. Du kannst auch eine URL überwachen, was dir erlaubt, die Leistung über die Zeit zu verfolgen und Änderungen zu sehen, wenn sie auftreten.

Verlauf

Verlauf

Eine wirklich coole Funktion ist, dass du deine vergangenen Berichte auswählen und sie nebeneinander vergleichen kannst. Das kann sehr nützlich sein, vor allem, wenn du Optimierungen auf deiner Webseite durchführst, um zu sehen, ob es Verbesserungen gibt. Denke daran, dass du manchmal auch überoptimieren kannst.

Berichte in GTmetrix vergleichen

Berichte in GTmetrix vergleichen

Fallstudie Domain Konfiguration

Wenn du bis hierher in unserem GTmetrix-Tiefgang gekommen bist, dann wirst du dich freuen. Es ist immer ärgerlich, wenn Leute Tipps und Fallstudien teilen, aber dann nicht sagen, wie sie dorthin gekommen sind. Unten findest du unsere exakte Konfiguration für die oben verwendete Domain! Du kannst es gerne replizieren.

Architektur

WordPress Plugins

Und hier ist eine Liste der Plugins, die auf der WordPress Seite verwendet werden.

Empfohlene Tutorials für weitere Lektüre:

Zusammenfassung

Wie du siehst, kann dir das Wissen, wie das GTmetrix Speed Test Tool funktioniert und was all die Diagramme bedeuten, dabei helfen, eine datengetriebene Entscheidung zu treffen, wenn es um die Performance geht. Eine Waterfall Analyse, wie wir es nennen, ist entscheidend, um zu wissen, wie deine einzelnen Assets geladen werden. Und denk daran, wenn es darum geht, es mit Pingdom zu vergleichen, es sind unterschiedliche Tools und so ist es besser, bei dem einen oder anderen zu bleiben, da sie Dinge unterschiedlich berechnen. Hast du noch andere tolle GTmetrix Tipps?

 

Wenn du mehr solche Artikel sehen möchtest, lass es uns unten in den Kommentaren wissen!


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Skalierbarkeit, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an