Wissen

GTmetrix meistern: das unverzichtbare Tool zur Optimierung Ihrer Website

GTmetrix meistern: das unverzichtbare Tool zur Optimierung Ihrer Website

Eine schlecht optimierte Website sorgt für langsames und unangenehmes Surfen bei Ihren Besuchern. Das wirkt sich auf Ihre Verweildauer, die Serverleistung und sogar auf das Suchmaschinenranking Ihrer Website aus. Zum Glück gibt es ein hervorragendes Tool, das Sie bei der Optimierung Ihrer Websites unterstützt: GTmetrix. Wir erklären es Ihnen.

GTmetrix, ein Messwerkzeug

Bevor Sie eine Website optimieren, müssen Sie zunächst ihre Leistung genau messen können. Diese Messungen sollten während des gesamten Optimierungsprozesses wiederholt werden, um die Wirksamkeit der einzelnen Verbesserungen zu überprüfen.

Die Website https://gtmetrix.com/ ist dafür das perfekte Werkzeug. Sie misst die Leistung von Websites aus Sicht der Besucher und liefert Ihnen genaue Hinweise darauf, was sich optimieren lässt.

Wir empfehlen, ein kostenloses Konto anzulegen: Damit können Sie Einstellungen festlegen (Standort des Testservers und Testbrowser), Ihre früheren Ergebnisse wiederfinden und vor allem erhalten Sie Vorrang in den Testwarteschlangen. So sparen Sie bei den zahlreichen Tests, die eine gute Optimierung erfordert, wertvolle Minuten.

Hinweis: Grundsätzlich sollten Sie zuerst die Leistung der meistbesuchten Seiten prüfen. Der erste Test betrifft daher meist die Startseite, den Ankerpunkt der meisten Websites.

Ihren ersten GTmetrix-Test durchführen

Rufen Sie die Startseite der Website auf, geben Sie die URL Ihrer Website ein und klicken Sie auf „Analyze“.

Startseite von GTmetrix

Jetzt müssen Sie nur noch einen Moment warten, bis das Ergebnis erscheint.

GTmetrix-Test des HaiSoft-Blogs vor der Optimierung

In diesem Beispiel hat unsere WordPress-Website keine gravierenden Optimierungsprobleme. Die Note „B“ ist in der Regel akzeptabel. Dennoch wollen wir ein „A“ erreichen und zeigen Ihnen in einem eigenen Artikel, wie das geht. Zunächst konzentrieren wir uns darauf, GTmetrix zu verstehen, denn das ist für eine wirksame Optimierung Ihrer Website unerlässlich.

Ein erster Überblick über GTmetrix

GTmetrix ist hervorragend durchdacht und vermittelt Ihnen auf einen Blick ein genaues Bild davon, wie gut die getestete Website optimiert ist. Gehen wir die einzelnen Bereiche dieser Übersicht durch.

Übersicht einer perfekt optimierten WordPress-Website

Performance Scores

Diese Werte ergeben sich aus der Kombination zahlreicher Tests, die wir im Folgenden genauer erläutern.

  • Der PageSpeed Score basiert auf den Tests von Google. Seine Details werden standardmäßig auf der Seite angezeigt. Dieser Test bewertet direkt die Inhalte, die die Website an die Besucher sendet, also Bilder oder Skripte sowie deren Metainformationen. Die empfohlene Mindestnote ist „B“. Darunter sollten Sie die Optimierung der Website ernsthaft überprüfen. Dieser Wert ist entscheidend: Da er von Google stammt, kann er sich auf Ihr Ranking auswirken – und das ist für jedes Online-Geschäft grundlegend.
  • Der YSlow Score zeigt technischere Optimierungen, zum Beispiel die Anzahl der Anfragen, die Header der gesendeten Dateien (also die Metainformationen, die der Webserver zu den Dateien mitsendet), schlechte Praktiken in den verwendeten Skripten usw. Wie beim PageSpeed Score ist die empfohlene Mindestnote „B“. Darunter sollten Sie die Optimierung der Website ernsthaft überprüfen.

Page Details

  • Fully Loaded Time gibt an, wie lange der GTmetrix-Server gebraucht hat, um die Seite vollständig zu laden. Wählen Sie den GTmetrix-Server, der Ihren Besuchern am nächsten liegt, um einen aussagekräftigeren Wert zu erhalten. Dazu benötigen Sie ein kostenloses GTmetrix-Konto. Idealerweise sollte die Ladezeit unter 3 s liegen. Beachten Sie, dass der GTmetrix-Server die Seite womöglich langsamer lädt als ein echter Besucher mit sehr guter Verbindung in der Nähe Ihres Servers; im Durchschnitt haben Ihre Besucher aber eine Verbindung, die der von GTmetrix recht ähnlich ist. Bei einer WordPress-Website mit allen erdenklichen Optimierungen lag das beste von uns gemessene Ergebnis bei etwa 0,9 s. Viele Faktoren können dieses Ergebnis beeinflussen, etwa WordPress-Crons (geplante Aufgaben, die einmal pro Minute laufen), die Serverlast usw. Führen Sie daher ruhig 2 oder 3 Tests hintereinander durch, um einen verlässlicheren Wert zu erhalten. Und schließlich: Diese Zeit setzt sich aus der Zeit zusammen, die der Server zum Erzeugen der Seite benötigt (sie hängt von der Optimierung der Skripte auf Ihrer Website ab), und der Zeit für die Übertragung der Dateien. Um herauszufinden, wo Sie ansetzen sollten, betrachten Sie vor allem die „TTFB“ (Time to First Byte), auf die wir am Ende des Artikels eingehen.
  • Total Page Size ist die Größe Ihrer Seite in KB oder MB. Für die meisten Websites empfehlen wir weniger als 1 MB, für grafiklastigere Websites höchstens 2 MB. Selbst wenn man alle anderen Verzögerungen vor der Übertragung der Dateien außer Acht lässt, bedeuten 2 MB bei einer ADSL-Verbindung mit 8 Mbit/s bereits 2 Sekunden Ladezeit – im besten Fall. 2 Sekunden pro Seite können schon viel sein, wenn die Navigation auf Ihrer Website viele Klicks erfordert. Fotografie- oder andere Multimedia-Websites können eine Ausnahme bilden und so viel Datenvolumen nutzen, wie für eine hochwertige Darstellung nötig ist; trotzdem ist es besser, Bilder nur bei Bedarf vergrößert zu laden.
  • Requests gibt die Anzahl der Anfragen bzw. Dateien an, die zur Darstellung der Website erforderlich sind. Dieser Faktor kann die Geschwindigkeit Ihrer Website stark beeinflussen. Idealerweise liegt dieser Wert unter 20 Anfragen, toleriert werden maximal 40. Ab 50 Anfragen kann Ihre Website spürbar langsamer werden, vor allem bei langsameren Internetverbindungen. Ab 200 Anfragen verlieren Sie je nach Herkunft Ihrer Dateien in der Regel mehrere lange Sekunden (5 bis 10 s) an Ladezeit, denn manche Ressourcen wie Skripte, Schriftarten oder Stylesheets werden womöglich aus anderen Quellen als Ihrer Website geladen – was idealerweise vermieden werden sollte.

Die PageSpeed- und YSlow-Tests im Detail

Hier stellen wir die häufigsten Optimierungsprobleme vor. Damit erhalten Sie eine solide Grundlage, um die wichtigsten Optimierungsprobleme von Websites zu verstehen. Diese Liste ist jedoch nicht vollständig: Betrifft Ihr Problem einen anderen Test, liefert GTmetrix kurze Erklärungen (auf Englisch) zu jedem Test, wenn Sie die entsprechende Zeile aufklappen. Außerdem finden Sie recht leicht Ressourcen (oft Foren), die seltenere Fehler beschreiben, auf die Sie stoßen könnten.

PageSpeed im Detail

Beispiel für PageSpeed-Details

Hier die Punkte, die am häufigsten auftreten, und wie Sie sie beheben.

  • Serve scaled images: Sie senden Bilder, die größer sind als ihre Anzeigegröße. Sie müssen die Bilder Ihrer Website verkleinern oder Vorschaubilder in verschiedenen Größen erzeugen, damit sie unabhängig von der Bildschirmgröße des Besuchers im passenden Maßstab ausgeliefert werden.
  • Optimize images: Die Bildkomprimierung ist PageSpeed nicht stark genug.
  • Defer parsing of JavaScript: JS-Skripte blockieren während des Ladens die Anzeige der Website; sie sollten daher zuletzt geladen werden. Dieses Problem geht meist auf das verwendete Template, Theme oder den Page Builder zurück. Manche CMS oder Skripte sind zudem sehr schwergewichtig und schlecht optimiert. Wählen Sie also Skripte (CMS, Themes, Builder), die in dieser Hinsicht gut optimiert sind. Manchmal lässt sich das Problem mit bestimmten Cache-Plugins beheben (etwa W3 Total Cache für WordPress).
  • Leverage browser caching: Diese Meldung erscheint, wenn Dateien geladen werden, ohne dass der Server eine Ablaufzeit angibt (die bekannten Expires-Header von Apache). Empfohlen sind 15 Tage. Das lässt sich in der .htaccess-Datei der Website einstellen. Auf einem virtuellen oder dedizierten Server können Sie den Standardwert auch in Plesk unter „Apache- & nginx-Einstellungen“ und dann „Expires“ ändern, indem Sie einen benutzerdefinierten Wert von 15 Tagen festlegen. Beim Shared Hosting können Sie den HaiSoft-Support per Ticket bitten, diesen Wert zu erhöhen. Für WordPress können auch einige Cache-Plugins dies übernehmen. Achtung, es gibt eine Grenze: Nutzt Ihre Website (oder Ihr Theme/Builder) externe Ressourcen, haben Sie keinen Einfluss auf die Expires-Header dieser Dateien (zum Beispiel lösen Google Fonts diesen Fehler aus); das allein kann den GTmetrix-Score manchmal deutlich senken. Wählen Sie in diesem Fall ein Theme, das in dieser Hinsicht gut optimiert ist und möglichst auf externe Ressourcen verzichtet.
  • Minify JavaScript/CSS/HTML: Hier geht es darum, Skriptdateien zu komprimieren. Sind sie nicht von Haus aus komprimiert, verwenden Sie ein Cache-Plugin mit dieser Option.

YSlow im Detail

Beispiel für YSlow-Details

Dieser Test ist in der Regel einfacher zu verstehen. Hier die meisten Meldungen, denen Sie begegnen werden:

  • Add Expire headers: entspricht Leverage browser caching bei PageSpeed.
  • Make fewer HTTP requests: Ihre Website ruft zu viele Ressourcen ab. Das kann an der Anzahl der Bilder liegen, geht aber häufiger auf das verwendete Theme oder den Page Builder zurück. Ein natives Theme ist einem Builder daher vorzuziehen; wählen Sie es sorgfältig aus und achten Sie darauf, dass es keine weit verstreuten Ressourcen einbindet.
  • Use a Content Delivery Network (CDN): Hier wird Ihnen empfohlen, ein CDN wie Cloudflare zu nutzen. Es entlastet den Server und liefert Ihre Dateien schneller aus, wenn Besucher weit vom Server entfernt sind (mehr als 2.000 km). Das lohnt sich vor allem bei Websites mit sehr hohem Traffic. HaiSoft kann Ihr CDN bei Bedarf einrichten und verwalten.
  • Reduce the number of DOM elements: Ihre Seite enthält zu viele Elemente, was den Browser bei der Darstellung verlangsamen kann, während er die darauf angewendeten Skripte verarbeitet.

Waterfall

Beispiel für einen GTmetrix-Waterfall

In der Ansicht „Waterfall“ sehen Sie die Ladezeit aller Dateien sowie die Ressourcennutzung des Browsers, der die Seite lädt. So erkennen Sie, wie sich die Dateien und Skripte auf dem Server auswirken, und finden gegebenenfalls die am schlechtesten optimierten Skripte, um sie zu überarbeiten oder zu ersetzen.

Timings

Beispiel für GTmetrix-Timings

Die Timings zeigen schließlich die einzelnen Phasen beim Laden der Seite.

  • TTFB, kurz für „Time To First Byte“, gibt an, wie lange der Server braucht, um die erste Antwort auf die Seitenanfrage des Clients zu senden. Sie spiegelt indirekt die Zeit wider, die der Server zum Erzeugen der Seite benötigt, und hängt von der Serverleistung ab. Ist diese erstklassig (wie bei HaiSoft!), hängt sie vor allem von der Optimierung Ihrer Website ab: Qualität und Menge der verwendeten Skripte, Kompatibilität mit aktuellen Versionen usw. Ein passend dimensionierter dedizierter oder virtueller Server sorgt für die niedrigste und gleichmäßigste TTFB. Bei Websites wie WordPress, die jede Minute einen Cron ausführen, kann die TTFB stark schwanken, wenn der GTmetrix-Test mit diesem Cron zusammenfällt.
  • DOM int. gibt die Zeit an, bis das HTML der Seite beim Besucher heruntergeladen ist.
  • DOM loaded gibt die Zeit an, die zur Verarbeitung des HTML-Codes benötigt wird, der nicht durch JS-Skripte o. Ä. blockiert ist.
  • First paint gibt den Zeitpunkt an, ab dem die Seite im Browser des Besuchers tatsächlich angezeigt wird.
  • Onload gibt den Zeitpunkt an, zu dem die Seite und alle ihre Skripte vollständig geladen und ausgeführt sind.

Insgesamt werden höchstens 3 s empfohlen. Idealerweise sollte dieser Wert eher bei etwa 1 Sekunde liegen.

Fazit

Wir haben gesehen, dass GTmetrix ein leistungsstarkes und unverzichtbares Werkzeug ist, um die Optimierung einer Website zu analysieren.

Außerdem ist deutlich geworden, dass Optimierung bedeutet, die Ladezeiten für Besucher so weit wie möglich zu verkürzen. Dabei gibt es zwei Hauptansatzpunkte: einerseits die Zeit, die der Server zum Erzeugen der Seiten benötigt (dazu gilt es, Skripte zu optimieren, nicht unnötig viele Plugins zu installieren usw.), andererseits die an die Besucher gesendeten Ressourcen, also Bilder, Skripte und Schriftarten.

Dazu gehören einige mitunter wenig intuitive Faktoren, etwa die Wahl des Themes und der installierten Plugins, was wiederum ein weiteres wichtiges Kriterium beeinflusst: die Anzahl der an die Besucher gesendeten Dateien. Auch die Metainformationen der Dateien, die Dimensionierung und Komprimierung der Bilder usw. sind Elemente, deren Ursachen und Auswirkungen man verstehen sollte – und genau darum geht es in diesem Artikel.

Auch wenn Sie daraus bereits Möglichkeiten zur Optimierung Ihrer Website ableiten können, wollen wir es dabei nicht belassen: Schon bald begleiten wir Sie bei der konkreten Optimierung Ihrer WordPress-Website mit GTmetrix!

Damit Sie die Fortsetzung nicht verpassen, folgen Sie uns in den sozialen Netzwerken!

← Alle Blogartikel