Ein tiefer Einblick in das GTmetrix Speed Test Tool

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.

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 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:

Dallas, USA
Hongkong, China
London, UK
Mumbai, Indien
Sydney, Australien
São Paulo, Brasilien
Vancouver, Kanada

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.

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.

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
Leistung
Struktur
Wasserfall-Diagramm
Video
Geschichte

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.

GTmetrix Performance ist die Leistungsbewertung aus dem Lighthouse Website Audit Tool
GTmetrix Structure ist eine proprietäre Performance-Kennzahl, die die Gesamtperformance einer Seite misst.

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).

Largest Contentful Paint (LCP) ist die Zeit, die es dauert, bis der größte Teil deiner Seite geladen ist. Bei einigen Webseiten kann das LCP ein großes Heldenbild sein, während sich auf anderen Webseiten das LCP auf den Textkörper beziehen kann.
Total Blocking Time (TBT) ist die Zeit, die eine Seite blockiert wird, bevor ein Nutzer mit ihr interagieren kann. Render-blocking CSS und JS können einen großen Einfluss auf die TBT haben.
Cumulative Layout Shift (CLS) bezieht sich auf die Verschiebung von Elementen, während eine Seite geladen wird. Zum Beispiel kann sich das Layout einer Seite, die eingebettete Tweets enthält, dramatisch verschieben, während die Seite geladen wird.

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 Note – B
GTmetrix Leistung – 85%
GTmetrix Struktur – 83%
LCP – 1.0s
TBT – 0ms
CLS – 0

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.

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.

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).

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Wenn du ein Kinsta-Kunde bist, kannst du die Vorteile der Code-Minifizierung nutzen, die direkt in das MyKinsta-Dashboard integriert ist. So kannst du mit einem einfachen Klick die automatische CSS- und JavaScript-Minifizierung aktivieren und deine Seiten ohne manuellen Aufwand beschleunigen.

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.

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.

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.

Das kostenlose Plugin Autoptimize eignet sich ebenfalls hervorragend dafür. Aktiviere einfach die Option „Optimize 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.

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.

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.

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">

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

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.

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.

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.

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.

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.

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-prefetch, preconnect, prefetch 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.

Senden (Rot)

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

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.

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.

Ereignis-Timings

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

Erste Farbe (Grüne Linie): Der erste Punkt, an dem der Browser irgendeine Art von Rendering auf der Seite durchführt, wie z.B. die Anzeige der Hintergrundfarbe.
DOM Loaded (Blaue Linie): Der Punkt, an dem das DOM (Document Object Model) bereit ist.
Onload (Rote Linie): Wenn die Verarbeitung der Seite abgeschlossen ist und alle Ressourcen auf der Seite (Bilder, CSS, etc.) fertig heruntergeladen sind.
Fully Loaded (Purple Line): Der Punkt, nachdem das Onload-Ereignis ausgelöst wurde und 2 Sekunden lang keine Netzwerkaktivität stattgefunden hat.

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.

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.

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.

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.

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

Die Domain der Fallstudie (perfmatters.io) wird bei Kinsta auf der Google Cloud Platform in den USA (zentraler Standort) gehostet. Kinsta nutzt HTTP/2, NGINX, MariaDB, die alle zu den schnellen Ladezeiten beitragen.
Die Webseite nutzt HHVM. PHP 7.3 ist jetzt bei Kinsta verfügbar, was noch schneller als HHVM ist! Du kannst mit einem Knopfdruck zwischen den PHP-Versionen wechseln.
Deine Webseite nutzt kein Caching Plugin. Kinsta cached alles auf der Serverebene, was die Dinge stark vereinfacht und in den meisten Fällen schneller ist!

WordPress Plugins

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

Das kostenlose CDN Enabler Plugin wird für den Einsatz von KeyCDN verwendet.
Das kostenlose CAOS Plugin wird verwendet, um Google Analytics lokal zu synchronisieren.
Das Premium Perfmatters Plugin wird verwendet, um unnötige HTTP-Anfragen loszuwerden und Dinge wie Emojis und Embeds zu deaktivieren.
Das Premium Gonzalez Plugin wird verwendet, um bestimmte Skripte vom Laden abzuhalten.
Das Premium Imagify Plugin wird verwendet, um Bilder zu komprimieren.

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!

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.