Die besten Tools für Website-Geschwindigkeitstests (und wie Sie Ihre Website beschleunigen können)

Sehen Sie, wie Ihre Website mit den Augen Ihrer Besucher geladen wird

Verschaffen Sie sich einen guten Eindruck davon, was Ihre Besucher tatsächlich erleben, wenn sie Ihre Website besuchen.

Beachten Sie, dass etwas langsam oder fehl am Platz geladen wird? Dies kann Ihnen helfen, wichtige Verzögerungen und Konvertierungsprobleme zu identifizieren, die Ihre Besucher erleben.

Screenshot mit dem Ergebnis eines DebugBear-Webleistungstests, Oktober 2022

Der Timeline-Filmstreifen zeigt den Rendering-Fortschritt der Website im Laufe der Zeit.

Diese Seite beginnt beispielsweise nach 0,7 Sekunden zu rendern, und das Hauptbild wird nach 1,3 Sekunden gerendert.

Die Website ist vollständig gerendert, auch bekannt als Visually Complete, wenn das Chat-Widget nach 3,7 Sekunden angezeigt wird.

Screenshot von DebugBear, der den Rendering-Fortschritt einer Website im Laufe der Zeit zeigt, Oktober 2022

Innerhalb des Tools können Sie sich auch eine Videoaufzeichnung des Rendering-Prozesses ansehen.

Dies ist eine großartige Möglichkeit, Kunden oder anderen Mitgliedern Ihres Teams die Auswirkungen von Leistungsproblemen zu demonstrieren.

Screenshot einer Videoaufzeichnung einer teilweise gerenderten Website in DebugBear, Oktober 2022

Testen Sie Änderungen der Website-Geschwindigkeit, indem Sie Ihre tatsächlichen Ladestatistiken anzeigen

Angenommen, Sie haben Ihre Website optimiert und möchten wissen, ob sich diese Änderungen auswirken werden.

Dieses Tool führt einen „Labortest“ in einer optimalen Umgebung durch, um festzustellen, ob Sie Ihre Website richtig optimieren.

Wenn Sie Ihre Website testen, erhalten Sie einen offiziellen „Lab Score“, der eine Zusammenfassung von sechs Leistungskennzahlen ist, die aus dem Leistungswert des Lighthouse-Tools von Google stammen:

1. First Contentful Paint (10 % der Gesamtpunktzahl).
2. Geschwindigkeitsindex (10 %).
3. Größte zufriedene Farbe (25%).
4. Zeit bis zur Interaktivität (10 %).
5. Gesamtsperrzeit (30 %).
6. Kumulative Layoutverschiebung (15 %).

Anhand dieser Daten finden Sie heraus, wie hilfreich Ihre letzte Optimierungsrunde war und was Sie möglicherweise ändern müssen.

Jetzt fragen Sie sich wahrscheinlich, was Sie ändern müssen. Lassen Sie uns lernen, wie Sie Ihre Website mithilfe der einzelnen Schlüsselmetriken der Metrikübersicht optimieren können.

So optimieren Sie die Website-Geschwindigkeit

Die Durchführung eines Geschwindigkeitstests ist der erste Teil Ihrer Reise zur Website-Optimierung.

Sobald Sie Ihre Messwerte haben, müssen Sie wissen, wie Sie sie interpretieren und wie Sie sie korrigieren können.

Im Bereich Metrikübersicht Ihres Website-Geschwindigkeitsberichts sehen Sie die wichtigsten Metriken, auf die wir uns konzentrieren werden, um Ihre Website zu beschleunigen:

• First Contentful Paint : Dies kann beschleunigt werden, indem die Kommunikationsgeschwindigkeit des Servers repariert wird.
• Largest Contentful Paint : Dies kann durch Optimierung von Medien und Ressourcen beschleunigt werden.

Darüber hinaus können Sie den Anfragewasserfall verwenden, um zu sehen, wie lange Anfragen dauern und wie sich dies auf diese Metriken auswirkt.

So beschleunigen Sie First Contentful Paint (FCP)

Beginnen wir damit, dass Ihre Website Ihren Besuchern früher angezeigt wird. Wir werden uns zuerst mit First Contentful Paint befassen.

Was ist First Contentful Paint?

First Contentful Paint misst, wie schnell der Inhalt einer Seite zum ersten Mal angezeigt wird, nachdem Ihr Besucher zu dieser Seite navigiert ist.

Es ist wichtig, dass Ihre wichtigsten Inhalte schnell angezeigt werden, damit Ihre Besucher Ihre Website nicht verlassen. Je schneller ein Nutzer Ihre Website verlässt, desto schneller erfährt Google, dass die Seitenerfahrung möglicherweise schlecht ist.

Aber woher wissen Sie genau, was dazu führt, dass Ihre Website langsam geladen wird?

Wie finden Sie heraus, welche Serverprobleme Ihre Website verlangsamen? Lass es uns herausfinden.

Warum dauert mein erstes zufriedenes Malen so lange?

Ihr FCP kann durch die Serververbindungsgeschwindigkeit, Serveranforderungen, Render-Blocking-Ressourcen und mehr beeinträchtigt werden.

Es hört sich nach viel an, aber es gibt eine einfache Möglichkeit, genau zu sehen, was Ihren FCP verlangsamt – den Anforderungswasserfall.

Dieses nützliche Tool zeigt, welche Anfragen von Ihrer Website gestellt werden und wann jede Anfrage beginnt und endet.

In diesem Screenshot sehen wir beispielsweise zuerst eine Anfrage für das HTML-Dokument und dann zwei Anfragen zum Laden von Stylesheets, auf die im Dokument verwiesen wird.

Screenshot mit Debug-Daten für die Metrik First Contentful Paint in DebugBear, Oktober 2022

Warum passiert das First Contentful Paint nach 0,6 Sekunden? Wir können aufschlüsseln, was auf der Seite passiert, um dies zu verstehen.

Verstehen, was vor einem ersten zufriedenen Anstrich passiert

Bevor die ersten Inhalte auf Ihrer Webseite geladen werden können, muss der Browser Ihres Benutzers zunächst eine Verbindung zu Ihrem Server herstellen und die Inhalte abrufen.

Wenn dieser Vorgang lange dauert, dauert es lange, bis Ihr Benutzer Ihre Website sieht.

Ihr Ziel ist es, zu erfahren, was vor sich geht, bevor Ihre Website zu laden beginnt, damit Sie Probleme lokalisieren und das Erlebnis beschleunigen können.

Page Load Teil 1: Der Browser erstellt eine Serververbindung

Bevor eine Website zum ersten Mal von einem Server angefordert wird, muss der Browser Ihres Besuchers eine Netzwerkverbindung zu diesem Server herstellen.

Dies erfolgt in der Regel in drei Schritten:

1. Überprüfen von DNS-Einträgen, um die IP-Adresse des Servers basierend auf dem Domänennamen nachzuschlagen.
2. Herstellen einer zuverlässigen Serververbindung (bekannt als TCP-Verbindung).
3. Herstellen einer sicheren Serververbindung (bekannt als SSL-Verbindung).

Diese drei Schritte werden vom Browser nacheinander ausgeführt. Jeder Schritt erfordert einen Roundtrip vom Browser Ihres Besuchers zum Server Ihrer Website.

In diesem Fall dauert der Aufbau der Serververbindung rund 251 Millisekunden.

DebugBear-Screenshot, der die Netzwerk-Roundtrips zeigt, die zum Herstellen einer Serververbindung verwendet werden, Oktober 2022

Laden der Seite Teil 2: Der Browser fordert das HTML-Dokument an (Zeit bis zum ersten Byte passiert hier)

Sobald die Serververbindung hergestellt ist, kann der Browser Ihres Besuchers den HTML-Code anfordern, der den Inhalt Ihrer Website enthält. Dies wird als HTTP-Anforderung bezeichnet.

In diesem Fall dauert die HTTP-Anforderung 102 Millisekunden. Diese Dauer umfasst sowohl die Zeit, die für den Netzwerk-Roundtrip aufgewendet wird, als auch die Zeit, die darauf verwendet wird, darauf zu warten, dass der Server eine Antwort generiert.

Nach 251 Millisekunden zum Herstellen der Verbindung und 102 Millisekunden zum Senden der HTTP-Anforderung kann der Browser Ihres Besuchers endlich mit dem Herunterladen der HTML-Antwort beginnen.

Dieser Meilenstein wird Time to First Byte (TTFB) genannt. In diesem Fall geschieht das nach insgesamt 353 Millisekunden.

Nachdem die Serverantwort bereit ist, verbringt der Browser Ihres Besuchers einige Zeit damit, den HTML-Code herunterzuladen. In diesem Fall ist die Antwort ziemlich gering und der Download dauert nur weitere 10 Millisekunden.

Screenshot von DebugBear, der die verschiedenen Komponenten einer HTTP-Anforderung zeigt, Oktober 2022

Page Load Teil 3: Ihre Website lädt zusätzliche Render-Blocking-Ressourcen

Browser rendern oder zeigen Seiten nicht unmittelbar nach dem Laden des Dokuments. Stattdessen gibt es normalerweise zusätzliche Render-Blocking-Ressourcen.

Die meisten Seiten würden ohne visuelles Styling schlecht aussehen, daher werden CSS-Stylesheets geladen, bevor eine Seite mit dem Rendern beginnt.

Das Laden der 2 zusätzlichen Stylesheets in diesem Website-Geschwindigkeitstestbeispiel dauert 137 Millisekunden.

Beachten Sie, dass diese Anfragen keine neue Serververbindung erfordern. Die CSS-Dateien werden wie bisher von derselben Domain geladen und können die bestehende Verbindung weiterverwenden.

DebugBear-Screenshot, der zeigt, wie zusätzliche Renderblocker-Ressourcen nach dem HTML-Dokument geladen werden, Oktober 2022

Page Load Teil 4: Der Browser rendert die Seite

Sobald alle erforderlichen Ressourcen geladen wurden, kann der Browser Ihres Besuchers mit dem Rendern der Seite beginnen. Diese Arbeit erfordert jedoch auch eine gewisse Verarbeitungszeit – in diesem Fall 66 Millisekunden. Dies wird durch die orange CPU-Task-Markierung in der Wasserfallansicht angezeigt.

DebugBear-Screenshot mit den Schritten vom Laden des HTML-Dokuments bis zum Rendern der Webseite, Oktober 2022

Wir verstehen jetzt, warum der FCP nach 632 Millisekunden passiert:

• 364 Millisekunden für die HTML-Dokumentanforderung.
• 137 Millisekunden zum Laden der Stylesheets.
• 66 Millisekunden zum Rendern der Seite.
• 65 Millisekunden für andere Verarbeitungsarbeiten.

Die andere Verarbeitungsarbeit umfasst kleine Aufgaben wie das Ausführen von Inline-Skripten oder das Analysieren des HTML- und CSS-Codes nach dem Herunterladen. Sie können diese Aktivität als kleine graue Linien direkt unter dem Rendering-Filmstreifen sehen.

So optimieren Sie First Contentful Paint (FCP)

Nachdem Sie nun verstanden haben, was dazu führt, dass Ihre Website gerendert wird, können Sie darüber nachdenken, wie Sie sie optimieren können.

• Kann der Server schneller auf die HTML-Anfrage antworten?
• Können Ressourcen über dieselbe Verbindung geladen werden, anstatt eine neue zu erstellen?
• Gibt es Anfragen, die entfernt oder geändert werden können, um das Rendern nicht mehr zu blockieren?

Jetzt, da die ersten Teile Ihrer Website früher geladen werden, ist es an der Zeit, sich darauf zu konzentrieren, das Laden der gesamten Website zu beschleunigen.

So beschleunigen Sie Largest Contentful Paint (LCP) mit den Empfehlungen von DebugBear

Es gibt viele Möglichkeiten, Ihr LCP zu beschleunigen.

Um es einfach zu machen, gibt uns DebugBear großartige nächste Schritte in seinem Abschnitt „Empfehlungen“.

Werfen wir einen Blick auf einige Beispiele der Empfehlungen und erfahren Sie, wie Sie das LCP dieser Website beschleunigen können.

Empfehlung 1: Initiieren Sie LCP-Bildanforderungen aus dem HTML-Dokument

Wenn das größte Inhaltselement auf Ihrer Seite ein Bild ist, sollten Sie am besten sicherstellen, dass die URL direkt im ursprünglichen HTML-Dokument enthalten ist. Dies hilft ihm, so schnell wie möglich mit dem Laden zu beginnen.

Diese bewährte Methode wird jedoch nicht immer verwendet, und manchmal dauert es lange, bis der Browser erkennt, dass er das Hauptbild herunterladen muss.

Im folgenden Beispiel wird der größte Inhalt, also ein Bild, mithilfe von JavaScript zur Seite hinzugefügt. Daher muss der Browser ein 200 Kilobyte großes Skript herunterladen und ausführen, bevor er das Bild erkennt und mit dem Herunterladen beginnt.

Screenshot von DebugBear, der eine sequenzielle Anfragekette zeigt, die zu einer Bildanfrage führt, Oktober 2022

Lösung : Je nach Website gibt es zwei mögliche Lösungen.

Lösung 1: Wenn Sie JavaScript verwenden, um ein großes Bild verzögert zu laden, optimieren Sie die Bildgröße und entfernen Sie das Lazy-Loading-Skript oder ersetzen Sie es durch das moderne loading=“lazy“-Attribut, das kein JavaScript erfordert.

Lösung 2: In anderen Fällen würde das serverseitige Rendering verhindern, dass die JavaScript-App heruntergeladen werden muss, bevor die Seite gerendert werden kann. Dies kann jedoch manchmal komplex in der Implementierung sein.

Empfehlung 2: Stellen Sie sicher, dass LCP-Bilder mit hoher Priorität geladen werden

Nach dem Laden des HTML-Codes einer Seite stellen die Browser Ihrer Besucher möglicherweise fest, dass neben Ihrem Hauptbild möglicherweise eine große Anzahl zusätzlicher Ressourcen wie Stylesheets geladen werden müssen.

Das Ziel hier ist sicherzustellen, dass Ihr größeres Hauptbild geladen wird, um die Anforderung von Google für Largest Contentful Paint zu erfüllen.

Andere Ressourcen, wie Analyseskripte von Drittanbietern, sind nicht so wichtig wie Ihr Hauptbild.

Darüber hinaus befinden sich die meisten Bilder, auf die im HTML-Code Ihrer Website verwiesen wird, unterhalb der Falte, sobald die Seite gerendert wurde. Einige können vollständig in einer verschachtelten Header-Navigation verborgen sein.

Aus diesem Grund setzen Browser die Priorität aller Bildanfragen zunächst auf Niedrig. Sobald die Seite gerendert wurde, findet der Browser heraus, welche Bilder wichtig sind und ändert die Priorität. Sie können ein Beispiel dafür im Screenshot unten sehen, wie durch das Sternchen in der Prioritätsspalte angezeigt.

DebugBear-Screenshot, der ein LCP-Image zeigt, das mit niedriger Anfangspriorität geladen wird, Oktober 2022

Der Wasserfall zeigt, dass der Browser zwar früh von dem Bild wusste, aber nicht mit dem Herunterladen begann, wie durch den grauen Balken angezeigt.

Lösung : Um dies zu lösen, können Sie eine neue Browserfunktion namens Prioritätshinweise verwenden. Wenn Sie einem img-Element das Attribut fetchpriority="high" hinzufügen, beginnt der Browser von Anfang an mit dem Laden des Bildes.

Empfehlung 3: Seiteninhalte nicht mit CSS ausblenden

Manchmal sehen Sie sich einen Anforderungswasserfall an und alle Ressourcen, die das Rendern blockieren, wurden geladen, aber es wird immer noch kein Seiteninhalt angezeigt. Was ist los?

A/B-Testing-Tools verbergen häufig Seiteninhalte, bis Testvariationen auf Inhaltselemente auf der Seite angewendet wurden. In diesen Fällen hat der Browser die Seite gerendert, aber der gesamte Inhalt ist transparent.

Was können Sie tun, wenn Sie das A/B-Testtool nicht entfernen können?

Lösung: Überprüfen Sie, ob Sie das Tool so konfigurieren können, dass nur Inhalte ausgeblendet werden, die von A/B-Tests betroffen sind. Alternativ können Sie prüfen, ob es eine Möglichkeit gibt, das A/B-Testing-Tool schneller laden zu lassen.

DebugBear-Screenshot, der einen Rendering-Filmstreifen zeigt, in dem Inhalte von einem A/B-Testtool ausgeblendet werden, Oktober 2022

Überwachen Sie die Geschwindigkeit Ihrer Website mit DebugBear

Möchten Sie Ihre Website kontinuierlich testen? Testen Sie unser kostenpflichtiges Überwachungstool mit einer kostenlosen 14-tägigen Testversion.

Auf diese Weise können Sie überprüfen, ob Ihre Leistungsoptimierungen funktionieren, und Sie werden auf Leistungsrückgänge auf Ihrer Website aufmerksam gemacht.

Screenshot mit Website-Geschwindigkeitstrends für eine Website in DebugBear, Oktober 2022