Leistungsanalyse mit WebPageTest

Eine schnelle Website ist heutzutage ein absolutes Muss. In einem mobilen Zeitalter und bei stationären Verbrauchern kann eine langsame Website den Unterschied zwischen Erfolg oder Misserfolg Ihres Unternehmens ausmachen. Also, wie genau testen Sie Ihre Website auf Geschwindigkeit und wie können Sie Probleme identifizieren, die sie verlangsamen könnten?

In diesem Artikel werden wir uns ein beliebtes Tool namens WebPageTest ansehen. Dieses Messtool bietet eine Reihe detaillierter Statistiken und Daten, die verwendet werden können, um Bereiche Ihrer Website zu ermitteln, die aus Performance-Sicht verbessert werden könnten. Die schiere Menge an bereitgestellten Informationen kann jedoch etwas überwältigend sein. Keine Sorge … wir werden die Verwendung von WebPageTest Schritt für Schritt erklären, damit klar wird, wie Sie dieses kostenlose Tool optimal nutzen können.

Erste Schritte mit WebPageTest

Das Wichtigste zuerst: Gehen Sie zu webpagetest.org, um loszulegen. Das Layout ist super übersichtlich und Sie sehen sofort ein Feld, in das Sie Ihre Website-URL eingeben können.

Am Anfang haben Sie die Wahl … verwenden Sie die Standardregisterkarte „Erweiterte Tests“ oder gehen Sie zur Registerkarte „Einfache Tests“? Nun, die Funktion "Einfaches Testen" ist großartig, um einen schnellen Überblick über Ihre Website zu erhalten, aber für diesen Artikel sehen wir uns die Registerkarte "Erweitertes Testen" an.

Erweiterte Testeinstellungen

Scrollen Sie auf der Seite nach unten und Sie sehen ein Dropdown-Menü für den Teststandort. Das ist ziemlich selbsterklärend. Der Standort, den Sie auswählen möchten, ist derjenige, der Ihrer Zielgruppe am nächsten liegt. Wenn sie in Australien ansässig sind, macht das Testen in London, Großbritannien, nicht viel Sinn. Ziel dieser Übung ist es, herauszufinden, wie unsere Website für unsere Benutzer funktioniert.

Es gibt eine Menge Standorte, aber einige Standorte bieten mehr Testoptionen als andere in Form des für die Tests verwendeten Browsers. Auch hier möchten Sie versuchen, eine auszuwählen, die wahrscheinlich von Ihrer Zielgruppe verwendet wird. Um einige Statistiken darüber anzuzeigen, von welchen Browsern Ihre Website besucht wird, können Sie Tools wie Google Analytics verwenden.

Andere wirklich coole Einstellungen, die Sie auswählen können, sind Dinge wie die Verbindung. Auf diese Weise wird also das Gerät des Endbenutzers mit dem Internet verbunden. Klicken Sie auf das Dropdown-Menü neben „Verbindung“ und Sie sehen Optionen, die eine 3G-Verbindung (langsam oder schnell) beinhalten. Das ist wirklich toll, denn es gibt Ihnen ein echtes Gefühl dafür, wie Ihr Publikum Ihre Website erleben wird.

Eine weitere sehr nützliche Einstellung ist die Option „Ansicht wiederholen“. Wenn diese Option aktiviert ist, bedeutet dies, dass die Website nach dem ersten Laden erneut getestet wird, was hilft, die Auswirkungen von Caching zu zeigen, das Sie auf Ihrer Website aktiviert haben.

Es gibt eine Reihe weiterer erweiterter Optionen, die Sie vielleicht erkunden möchten. Für die meisten von uns sind die oben beschriebenen Einstellungen ausreichend, es sei denn, Sie tauchen wirklich tief in das Testen Ihrer Website ein. Für diejenigen, die mehr über die wirklich verfügbaren Einstellungen erfahren möchten, sehen Sie sich die WebPageTest-Dokumentation an.

Notieren Sie sich alle Einstellungen, die Sie geändert haben. Es ist wichtig, dass Sie während der Test- und anschließenden Optimierungsphase immer wieder mit denselben Einstellungen testen, da Sie sonst die erhaltenen Ergebnisse verfälschen. Sobald Sie bereit sind, klicken Sie auf die Schaltfläche „Test starten“, lehnen Sie sich dann zurück und warten Sie auf die Ergebnisse (normalerweise dauert es etwa eine Minute).

Erster Bildschirm

In diesem Beispiel haben wir die Website von Apple (apple.com) verwendet und sie über eine schnelle 3G-Verbindung aus London, Großbritannien, getestet. Die ersten Ergebnisse sind unten dargestellt:

Wenn Sie oben rechts nachsehen, sehen Sie 7 farbige Kästchen, die einen ersten Überblick über die Leistung der Seite bieten. Lassen Sie uns untersuchen, was diese sind.

Feld 1 – Sicherheitsbewertung

Dies ist eine neue Funktion von WebPageTest, die eigentlich eine Integration mit Snyk ist und einen Einblick in die Sicherheit einer Website bietet. Wenn Sie auf das farbige Kästchen klicken, gelangen Sie auf die Website synk.io, die eine detaillierte Analyse der betreffenden Website aus Sicherheitssicht enthält. Besonders hervorzuheben sind die HTTP Security Header, die zwischen einem Client und einem Server ausgetauscht werden, um die Sicherheitsdetails der Kommunikation zu definieren. Die wichtigsten sind Strict-Transport-Security, Content-Security-Policy, X-Frame-Optionen.

Hosten Sie Ihre Website mit Pressidium

60- TÄGIGE GELD-ZURÜCK-GARANTIE

SEHEN SIE UNSERE PLÄNE

Wenn auf Ihrer Website ein wichtiger Sicherheits-Header fehlt, werden Sie auf der Synk-Website darüber informiert.

Feld 2 – Zeit des ersten Bytes

Das zweite Feld liefert die First Byte Time (auch bekannt als Time to First Byte oder TTFB). Dies ist die Zeit, die benötigt wird, bis der Server mit dem ersten Datenbyte zurück auf die Client-Anfrage antwortet. Idealerweise streben Sie einen Wert unter 300 ms an. Dieser Wert bezieht sich eher auf den Server und ist irrelevant für die Zeit, die zum Rendern Ihrer Website-Dateien benötigt wird. Dies kann beispielsweise durch einen langsamen DNS-Server oder unzureichendes Caching beeinträchtigt werden.

An dieser Stelle ist es wichtig zu beachten, dass Sie bei aktiviertem Cache Ihren Webseitentest erneut ausführen sollten, damit der zwischengespeicherte Inhalt gemessen wird. Tatsächlich wird empfohlen, den Test mindestens dreimal auszuführen, um sicherzustellen, dass die Ergebnisse den zwischengespeicherten Inhalt Ihrer Website vollständig widerspiegeln.

Die First Byte Time ist die Summe aus drei Werten: Die Zeit, die der HTTP-Request benötigt, um gesendet zu werden, die Zeit, die vom Server verarbeitet werden muss, und die Zeit, die der Server benötigt, um das erste Byte an den Client zurückzusenden. Näheres dazu erfahren Sie durch Anklicken des Kästchens:

Wie wir sehen können, schnitt die Apple-Website in diesem speziellen Teil des Tests nicht allzu gut ab.

Sobald diese Verbindung hergestellt ist, können Ressourcen bereitgestellt werden. Die häufigsten Gründe für eine langsame TTFB sind Netzwerkprobleme, die Webserverkonfiguration, mögliche Serverfestplatten-E/A und RAM-Probleme.

Kasten 3 – Am Leben bleiben

Das Feld „Keep-Alive Enabled“ zeigt den Status des Keep-Alive-HTTP-Headers an. Wenn dieser Header aktiviert ist, werden Daten über dieselbe Verbindung übertragen, andernfalls muss für jede zu übertragende Datei eine neue Verbindung erstellt werden. Keep-Alive ist in den meisten Fällen standardmäßig aktiviert und ist im Allgemeinen eine serverseitige Einstellung. Wenn Sie es selbst aktivieren müssen, können Sie Ihre .htaccess -Datei bearbeiten und den folgenden Code einfügen

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Box 4 – Transfer komprimieren

Der Compress Transfer-Wert repräsentiert den Status der Gzip-Komprimierung. Dies ist eine Technik, die verwendet wird, um Ihre statischen Dateien in Echtzeit zu komprimieren und später zu dekomprimieren. Auf diese Weise wird die Übertragungszeit reduziert, da die Dateigröße reduziert wird. Wenn Ihr Serveranbieter diese Technologie nicht standardmäßig anwendet, können Sie dies selbst tun, indem Sie die entsprechende Regel für jeden Dateityp wie folgt festlegen:

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

Auch hier gelangen Sie durch Klicken auf das entsprechende farbige Kästchen zu einem detaillierten Übersichtsbereich, in dem Sie sehen können, was genau auf Ihrer Website passiert.

Kasten 5 – Bilder komprimieren

Das Feld Bilder komprimieren ist ziemlich selbsterklärend. Klicken Sie darauf und es wird Ihnen angezeigt, welche Bilder besser komprimiert werden könnten.

In diesem Fall hat WebPageTest drei Bilder identifiziert, von denen es glaubt, dass sie erfolgreich komprimiert werden könnten, wodurch weitere 54 KB an Daten eingespart werden, die nicht übertragen werden müssen. Das hört sich vielleicht nicht viel an, aber auf einem Mobiltelefon macht jedes KB, das Sie sparen können, einen Unterschied.

Bilder sind der platzraubendste Aspekt Ihrer statischen Inhalte. Komprimieren ist ein absolutes Muss. Die WebPageTest-Analyse macht es einfach zu erkennen, welche Bilder Ihre Website möglicherweise verlangsamen und daher Aufmerksamkeit erfordern.

Kasten 6 – Statische Inhalte zwischenspeichern

Wenn Sie auf das Kästchen „Statische Inhalte zwischenspeichern“ klicken, gelangen Sie zu einem detaillierten Abschnitt mit dem Titel „Browser-Caching statischer Assets nutzen“.

Browser-Caching kann von Ihrem Entwickler oder Administrator genutzt werden, indem er den Webbrowser anweist, wann eine Ressource zwischengespeichert werden soll, wann nicht und wie lange mit der Verwendung der richtigen HTTP-Header. Nähere Informationen zum Browser-Caching finden Sie in unserem Artikel „Wie funktioniert der Browser-Cache?“. Hier erfahren Sie auch, wie Pressidium das Browser-Caching implementiert.

Kasten 7 – Effektive Nutzung von CDN

Ein CDN (oder Content Delivery Network) ist es wert, verwendet zu werden, wenn Sie eine Benutzerbasis haben, die geografisch verteilt ist. Wenn beispielsweise alle Ihre Kunden in London ansässig sind und sich Ihr Host-Server ebenfalls in London befindet, ist die Verwendung eines CDN wahrscheinlich nicht sehr sinnvoll. Wenn Ihre Benutzer jedoch geografisch unterschiedlicher sind, kann ein CDN einen großen Unterschied in der Leistung Ihrer Website für diese Benutzer bewirken, indem eine Kopie Ihrer Website auf einem Server platziert wird, der sich näher bei ihnen befindet.

Wenn Sie ein CDN verwenden, prüft WebPageTest, wie effektiv dies funktioniert.

Leistungsergebnisse

Lassen Sie uns weitermachen und uns einige weitere Daten ansehen, beginnend mit den Leistungsergebnissen, die Sie oben auf der Registerkarte „Zusammenfassung“ sehen.

In den Leistungsergebnissen sehen wir die wichtigsten Übersichten für Dinge wie First Byte Time, den Speed ​​Index, der die durchschnittliche Zeit ist, zu der sichtbare Teile der Seite angezeigt werden, Cumulative Layout Shift (CLS) zur Messung der visuellen Stabilität, die verbrauchte Zeit bis das Dokument vollständig geladen ist und mehr.

Blick auf den Wasserfall

Direkt unter den Leistungsergebnissen sehen wir die Wasserfallansicht für jeden Ihrer Läufe. Wenn Sie auf einen davon klicken, werden Sie zu der Seite weitergeleitet, die alle Details des Laufs im Wasserfallformat enthält.

Sie erhalten alle Leistungsstatistiken für jedes einzelne Asset Ihrer Website. Diese sind unterschiedlich gefärbt, was die Unterscheidung erleichtert. Wenn Sie auf eines davon klicken, öffnet sich ein Popup mit noch mehr Details.

Die Wasserfallansicht ist eine visuelle Darstellung der Seite und wie Reach-Komponenten geladen werden. Auf diese Weise können wir leicht alle Komponenten identifizieren, die die Dinge verlangsamen könnten. Es ist sehr hilfreich, zu sehen, wo die Engpässe sind, und bedeutet, dass wir Probleme punktgenau beheben können, anstatt raten zu müssen.

Verbindungsansicht

Das Connection View Board ist auch eine sehr nützliche Funktion, da es Ihnen ermöglicht, Web-Performance-Probleme sehr einfach zu identifizieren, indem Sie die Maßnahmen für die Verbindungen zwischen dem Browser und dem Server visuell zusammenfassen.

Sie können den Verbindungsstatus direkt von DNS, Erstverbindung, SSL-Aushandlung bis hin zu Dingen wie Videoressourcen sehen. Darunter befindet sich auch ein Diagramm, das die CPU-Auslastung auf dem Gerät darstellt, das die Website lädt. Es gibt auch eine Bandbreitenanzeige, die die während der Datenwiedergabe verwendeten Pegel anzeigt.

Fordert Einzelheiten an

Schließlich werden Ihnen unterhalb der Verbindungsansicht zwei weitere Analysetafeln zur Verfügung gestellt – Anforderungsdetails und Anforderungskopfzeilen.

Das Anfragedetails-Board ist sehr hilfreich und listet alle angeforderten Ressourcen zusammen mit für diese Anfrage relevanten Daten auf, wie z. B. den Inhaltstyp, die Startzeit der Anfrage, die Anzahl der heruntergeladenen Bytes und vieles mehr. Diese Tabelle ist tatsächlich sortierbar ... klicken Sie einfach auf die Spaltenüberschriften, um nach dieser bestimmten Spalte zu sortieren.

Das Request Headers Board stellt (ja, Sie haben es erraten) die Liste der Request-Ressourcen zusammen mit den Header-Informationen bereit. Klicken Sie auf jeden einzelnen für weitere Details.

Fazit

Wenn Sie eine eingehende Analyse der Aktivität Ihrer Website benötigen, ist WebPageTest ein fantastisches Tool. Auch wenn Sie nicht tief in die bereitgestellten Informationen eintauchen, können Sie schnell ein Gefühl dafür bekommen, ob Ihre Website gut funktioniert oder nicht und ob es notwendig ist, ihre Leistung genauer zu untersuchen. Und das Beste: Es ist kostenlos!