Die Geschwindigkeit einer Website kann ein entscheidender Faktor für ihren Erfolg sein. Wie in unserem Content-Delivery-Network-Leitfaden erläutert, können schneller ladende Websites von höheren SEO-Rankings, höheren Konversionsraten, niedrigeren Absprungraten, einer längeren Verweildauer der Besucher auf der Website, einer besseren allgemeinen Nutzererfahrung und einem höheren Engagement profitieren. Deshalb ist es wichtig, die vielen kostenlosen Tools zum Testen der Website-Geschwindigkeit zu nutzen, damit Sie eine optimale Leistung erzielen können. Google möchte, dass Ihre Website in weniger als einer Sekunde geladen wird.
- Was kann ein Website-Geschwindigkeitstest für Sie herausfinden?
- Website speed concepts
- Time to first byte (TTFB)
- Render-Blocking JavaScript und CSS
- JavaScript
- CSS
- Minification of resources
- HTTP-Anfragen
- Liste von Tools zum Testen der Website-Geschwindigkeit
- KeyCDN Website Speed Test
- Google PageSpeed Insights
- Pingdom Speed Test
- GTmetrix
- WebPageTest
- Varvy PageSpeed Optimization
- Uptrends
- dotcom-monitor
- PageScoring
- Yellow Lab Tools
- Google Chrome DevTools
- Sucuri Load Time Tester
- Pagelocity
- YSlow
- PerfTool
- Website speed test with Chrome extensions
- Mobile website speed test
- Zusammenfassung
Was kann ein Website-Geschwindigkeitstest für Sie herausfinden?
Hier sind nur einige der üblichen Einsatzmöglichkeiten von Website-Geschwindigkeitstest-Tools:
- Pinpointing scripts, fonts, and plugins causing load time issues (HTML, JavaScript, CSS)
- Checking minification of your scripts
- Finding large images resulting in bottlenecks
- Determining if you have render-blocking JavaScript or CSS
- Testing Time to First Byte (TTFB)
- Analyzing total load times, page sizes, and # of requests
- Checking performance from different geographical locations
- Checking rendering speed in different browsers
- Analyzing HTTP Headers
- Measuring performance of your content delivery network
- Verifying that assets are loading correctly from your CDN
Website speed concepts
Before running a website speed test it is important to understand a few concepts behind how these tools work so that you can better analyze the data and then optimize your site accordingly. Sie können nicht nur die Geschwindigkeit Ihres Webhosts testen, sondern auch die Leistung Ihres CDN messen.
Time to first byte (TTFB)
Time to first byte (TTFB) ist die Messung der Reaktionsfähigkeit eines Webservers. Es handelt sich dabei um die Zeit, die Ihr Browser benötigt, um Informationen zu empfangen, nachdem er sie vom Server angefordert hat. Durch den Einsatz eines CDN können Sie die Belastung Ihres Ursprungs-Servers drastisch reduzieren, was wiederum zu einer Verringerung der TTFB beitragen sollte.
Lesen Sie mehr über die Zeit bis zum ersten Byte und die Zeit bis zum letzten Byte.
Render-Blocking JavaScript und CSS
Render-Blocking bezieht sich auf JavaScript und CSS, die verhindern, dass Ihre Seite so schnell wie möglich geladen wird.
JavaScript
Google empfiehlt, JavaScript zu entfernen oder aufzuschieben, das das Laden des Above-the-Fold-Inhalts Ihrer Webseiten behindert. Here is a great tutorial on how to properly defer JavaScript loading.
Example of deferring JavaScript by placing it just before your </body>
tag.
function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element);}if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;
CSS
You will then also want to optimize your CSS delivery to keep it from causing delays on page load. Here are a few ways to fix this:
- Properly call your CSS files
- Lessen the amount of CSS files
- Use less CSS overall
Here is a great article on render-blocking CSS by Ilya Grigorik, a web performance engineer at Google.
CSS is a render blocking resource, get it down to the client as soon and as quickly as possible to optimize the time to first render!
Minification of resources
Minification of resources means removing unnecessary characters from your HTML, JavaScript, and CSS that are not required to load, such as:
- Weißraumzeichen
- Zeilenumbruchzeichen
- Blockbegrenzer
Dadurch werden Ihre Ladezeiten verkürzt, da weniger Code vom Server angefordert werden muss. Sie können ein Tool wie Dan’s CSS and JavaScript Minify verwenden, um alle unnötigen Zeichen zu entfernen. Wenn Sie mit WordPress arbeiten, können Sie auch ein Plugin wie Autoptimize verwenden, das Ihr gesamtes HTML, JavaScript und CSS für Sie verkleinert.
HTTP-Anfragen
Wenn Ihr Browser Daten von einem Server abruft, geschieht dies über HTTP (Hypertext Transfer Protocol). Es handelt sich um eine Anfrage/Antwort zwischen einem Client und einem Host. Generell gilt: Je mehr HTTP-Anfragen eine Webseite stellt, desto langsamer wird sie geladen.
Es gibt viele Möglichkeiten, die Anzahl der Anfragen zu reduzieren, wie z.B.:
- Kombinieren Sie Ihre CSS- und JavaScript-Dateien
- Inline-JavaScript (nur, wenn es sehr klein ist)
- Verwenden Sie CSS-Sprites
- Reduzieren Sie Ressourcen wie Plugins von Drittanbietern, die eine große Anzahl externer Anfragen stellen
Liste von Tools zum Testen der Website-Geschwindigkeit
Nachdem Sie nun ein grundlegendes Verständnis der oben genannten Konzepte zur Web-Performance haben, können Sie die folgenden 15 kostenlosen Tools zum Testen der Geschwindigkeit Ihrer Website ausprobieren. Jedes dieser Tools bietet einzigartige Funktionen, Berichte und verschiedene Möglichkeiten, die Ergebnisse zu analysieren.
Bei der Verwendung solcher Tools ist es außerdem wichtig zu wissen, dass ein erstmaliger DNS-Lookup in der Regel langsamer ist. Wenn Sie die Gesamtladezeiten vergleichen wollen, ist es manchmal besser, mehrere Tests durchzuführen und einen Durchschnitt der Ergebnisse zu bilden.
KeyCDN Website Speed Test
KeyCDN hat ein schnelles und leichtes Website Speed Test Tool entwickelt, mit dem Sie detaillierte Einblicke in die Leistung Ihrer Website erhalten können. Es bietet 14 Standorte rund um den Globus zur Auswahl, und Sie haben die Möglichkeit, Ihre Testergebnisse privat oder öffentlich zu machen. Der Test enthält eine Wasserfall-Aufschlüsselung und eine visuelle Website-Vorschau am unteren Rand. Sie können schnell sehen, wie viele HTTP-Anfragen gemacht wurden, die volle Größe der angeforderten Seite und die Ladezeit.
Es ist auch eines der einzigen Tools neben PageSpeed, das responsive ist und auf mobilen Geräten gut funktioniert.
Google PageSpeed Insights
Google PageSpeed Insights ist ein Website-Geschwindigkeitstest-Tool, das Ihre Website auf einer Skala von 1 bis 100 bewertet. Je höher die Zahl, desto besser ist Ihre Website optimiert. Alles, was über 85 liegt, bedeutet, dass Ihre Website gut funktioniert. PageSpeed liefert Ihnen Berichte sowohl für die Desktop- als auch für die mobile Version Ihrer Website. Sie können sich Empfehlungen für Verbesserungen anzeigen lassen, wie z. B. die Notwendigkeit, CSS zu minifizieren oder Ihre Bilder zu optimieren.
PageSpeed Insights misst, wie die Seite ihre Leistung verbessern kann:
- Zeit bis zum Laden der Seite (above-the-fold): Verstrichene Zeit von dem Moment, in dem ein Nutzer eine neue Seite anfordert, bis zu dem Moment, in dem der „above-the-fold“-Inhalt vom Browser gerendert wird.
- Zeit bis zum Laden der gesamten Seite: Verstrichene Zeit von dem Moment, in dem ein Benutzer eine neue Seite anfordert, bis zu dem Moment, in dem die Seite vollständig vom Browser gerendert wird.
Ein mobiler Bericht enthält eine zusätzliche Kategorie namens „Benutzerfreundlichkeit“, die in die Bewertung Ihrer Website einfließt. Dazu gehört die Überprüfung der Viewport-Konfiguration, der Größe Ihrer Tap-Targets (Schaltflächen und Links) und auch der in Frage kommenden Schriftgrößen.
Das PageSpeed Insights-Team hat vor kurzem auch ein neues Website-Geschwindigkeitstest-Tool in Zusammenarbeit mit Google auf den Markt gebracht, das Sie vielleicht ausprobieren möchten. Ein nettes Feature sind die schönen Berichte, die es erstellt.
Pingdom Speed Test
Pingdom ist wahrscheinlich eines der bekannteren Website-Geschwindigkeitstest-Tools. Die Berichte sind in vier verschiedene Abschnitte unterteilt, darunter eine Wasserfallanalyse, eine Leistungsbewertung, eine Seitenanalyse und eine Historie.
Die Seitenanalyse bietet einen guten Überblick mit zusätzlichen Informationen wie einer Größenanalyse, der Größe pro Domain (Sie können die Größe Ihrer CDN-Assets leicht mit Ihrer Domain vergleichen), der Anzahl der Anfragen pro Domain und der Art des Inhalts mit den meisten Anfragen.
Mit dem Geschwindigkeitstest-Tool von Pingdom können Sie die Geschwindigkeit Ihrer Website von vier Hauptstandorten aus testen:
- Dallas, Texas, USA,
- Melbourne, Australien
- San Jose, Kalifornien, USA
- Stockholm, Schweden
Die Ergebnisse eines Pingdom-Geschwindigkeitstests liefern Ihnen, ähnlich wie Google PagesSpeed Insights, Einblicke in die Leistung und zeigen auf, wo Sie Verbesserungen vornehmen können. Die Ergebnisse schlüsseln auch die Seitengröße nach Inhaltstyp, die Seitengröße nach Domain, die Anfragen nach Inhaltstyp und die Anfragen nach Domain auf.
GTmetrix
GTmetrix geht sehr ins Detail, indem es sowohl PageSpeed- als auch YSlow-Metriken überprüft und Ihrer Website eine Note von F bis A zuweist. Die Berichte sind in fünf verschiedene Abschnitte unterteilt, darunter PageSpeed, YSlow, Wasserfallanalyse, Video und Verlauf.
Mit einer kostenlosen Registrierung können Sie von sieben verschiedenen Standorten aus testen. Sie können auch den Browser wählen, Chrome oder Firefox. Sie können die Leistung einer Website mit verschiedenen Verbindungstypen (z. B. Kabel oder Einwahl) testen und vergleichen, um zu sehen, wie sich dies auf das Laden der Seite auswirkt. Zu den weiteren fortschrittlichen Funktionen gehören eine Videowiedergabe, mit der Sie analysieren können, wo Ihre Engpässe auftreten, und die Möglichkeit, Adblock plus auszuführen. Mit deaktivierter Werbung können Sie sehen, wie sie sich auf das Laden Ihrer Website auswirkt. Es wird empfohlen, ein kostenloses Konto zu erstellen, da Sie dann zusätzliche Optionen, wie die oben genannten, erhalten.
WebPageTest
WebPageTest ist einigen der zuvor genannten Tools sehr ähnlich, bietet aber über 40 Standorte zur Auswahl und über 25 Browser (einschließlich mobiler Geräte). Es vergibt eine Note von F bis A auf der Grundlage verschiedener Leistungstests wie FTTB, Komprimierung, Caching, effektive Nutzung eines CDN usw. Der Bericht ist in sechs Abschnitte unterteilt, die eine Zusammenfassung, Details, eine Leistungsüberprüfung, eine Aufschlüsselung des Inhalts und Screenshots enthalten.
Das Programm bietet außerdem einen einzigartigen Ansatz für den Test. Es führt eine so genannte Erstansicht und eine Wiederholungsansicht durch. Dies hilft bei der Diagnose einer möglichen Verzögerung beim ersten DNS-Lookup, wie bereits erwähnt. WebPageTest verfügt auch über erweiterte Funktionen wie Videoaufzeichnung, Deaktivierung von JavaScript, Ignorieren von SSL-Zertifikaten und Spoofing von User-Agent-Strings.
Varvy PageSpeed Optimization
Varvy PageSpeed Optimization ist ein Tool, das von Patrick Sexton entwickelt und gepflegt wird, der auch GetListed.Die Berichte sind in fünf verschiedene Abschnitte unterteilt, darunter ein Ressourcendiagramm, CSS-Auslieferung, JavaScript-Nutzung, gefundene Probleme mit der Seitengeschwindigkeit und verwendete Dienste. Dieses Tool verwendet eher eine grafische Darstellung dessen, was auf Ihrer Website behoben werden könnte, wie z. B. Rendering-Blocking.
Patrick macht einen großartigen Job, indem er auch eine Dokumentation darüber liefert, wie Sie Ihre Website weiter optimieren können, mit Anleitungen zum kritischen Rendering-Pfad, zur Nutzung von Browser-Caching, zum Aufschieben des Ladens von JavaScript und vielem mehr.
Uptrends
Uptrends ist ziemlich einfach, bietet aber über 35 Standorte zur Auswahl, wenn Sie einen Geschwindigkeitstest durchführen. Der Bericht ist in zwei Abschnitte unterteilt, eine Wasserfallanalyse und Domänengruppen. Die Domain-Gruppen bieten eine einzigartige Perspektive, da sie die Ressourcen in verschiedene Quellen kategorisieren: 1st Party, Statistiken, CDN, Social, Ads, First Party insgesamt und Third Party insgesamt.
dotcom-monitor
dotcom-monitor bietet 23 verschiedene Standorte und sieben verschiedene Browser, in denen Sie die Geschwindigkeit Ihrer Website testen können. Das Besondere daran ist, dass Sie alle geografischen Tests gleichzeitig durchführen können. Das spart Ihnen viel Zeit, denn bei anderen Tools müssen Sie die Tests einzeln pro Standort durchführen.
Die Berichte sind in fünf verschiedene Abschnitte unterteilt, die eine Zusammenfassung, Leistung, Wasserfalldiagramm (Aufschlüsselung), Host und Fehler enthalten.
PageScoring
PageScoring is all about offering a simple and easy to understand performance report with a minimalist design. They show your overall load time and then the following pieces of information:
- Domain lookups
- Connection Time
- Redirection Time
- Page Size
- Download Time
You can then see your assets and how long it took for each to load. If you are looking for a quick and easy website speed test tool, this works pretty good.
Yellow Lab Tools
Yellow Lab Tools is a newer web performance and frontend quality testing tool developed by Gaël Métais. This tool gives you a lot of information and some unique features not seen in other tools such as a view of when JavaScript interactions with the DOM during the loading of the page and other code validation issues. Get a global score based on the following qualifiers.
- Page weight
- Requests
- DOM
- Bad JavaScript
- Bad CSS
- Server Config
The JavaScript timeline shows you exactly how the DOM interacts during the loading of the page.
Google Chrome DevTools
And of course we can’t forget Google Chrome DevTools. It is a very easy to use tool (with advanced features) and you can quickly launch it at anytime in your Chrome broswer using the following shortcut keys.
- Windows:
F12
or alsoCtrl + Shift + I
- Mac:
Cmd + Opt + I
Mit dem letzten Update der Entwicklertools wurde ein aggregiertes Detailpanel in die Wasserfall-Zeitleiste integriert. Damit können Sie leichter erkennen, was Sie am meisten Zeit kostet, und Sie können es dann nach Domänen, Subdomänen usw. aufschlüsseln. Klicken Sie dazu in das Feld „Zeitleiste“ und drücken Sie Ctrl + R
Cmd + R
), um die Seite zu aktualisieren. Sie können dann in die Bereiche „Zusammenfassung“ und „Aggregiert“ klicken.
Wir haben auch einen tollen Beitrag darüber, was das DOM blockiert und wie man es beheben kann. In den Entwicklertools können Sie genau die DOMContentLoaded-Zeit und die Gesamtladezeit sehen. Um dies auszuführen, klicken Sie auf das Panel „Netzwerk“, klicken Sie auf die Option „Übersicht anzeigen“ und drücken Sie Ctrl + R
Cmd + R
), um die Seite zu aktualisieren. Es wird eine blaue Linie für DOMContentLoaded und eine rote Linie für die Gesamtladezeit angezeigt. Alles, was sich links von der blauen Linie befindet oder diese berührt, sind normalerweise Assets, die das DOM blockieren, oder auch als Rendering-Blocking-Ressourcen bezeichnet.
Sucuri Load Time Tester
Der Sucuri Load Time Tester bietet eine schnelle und einfache Möglichkeit, die Leistung Ihrer Websites aus der ganzen Welt zu testen. Der Test misst, wie lange es dauert, bis eine Verbindung zu Ihrer Website hergestellt und eine Seite vollständig geladen ist. Ein sehr wichtiger Wert ist die „Zeit bis zum ersten Byte“, die angibt, wie lange es dauerte, bis der Inhalt an den Browser zurückgeschickt wurde, um mit der Verarbeitung der Seite zu beginnen.
Pagelocity
Das Pagelocity-Tool bietet einen weiteren einzigartigen Ansatz, wenn es um einen Website-Geschwindigkeitstest geht. Es gibt Ihnen eine Gesamtpunktzahl von 100, die sich aus Faktoren wie Soziales, SEO, Ressourcen und Code zusammensetzt. Das Tool bietet auch die Möglichkeit, Ihre Konkurrenten zu verfolgen. Sie können sich für ein kostenloses Konto anmelden, um von den zusätzlichen Funktionen zu profitieren. Die Code-Ansicht ist besonders einzigartig, da sie Ihnen anzeigt, ob Ihre Website über HTTPS läuft, wie hoch Ihr TTFB ist, und eine grafische Oberfläche Ihrer DOM-Elemente mit einem Balkendiagramm anzeigt.
Die Ressourcen-Ansicht ist ebenfalls sehr interessant, da Sie schnell sehen können, welche Assets das Gesamtgewicht Ihrer Seite ausmachen. Wie Sie in unserem Test sehen können, sind Bilder mehr als 4x so schwer wie unsere externen Skripte.
YSlow
YSlow ist ein Open-Source-Projekt und Tool, das Webseiten analysiert und Ihnen dabei hilft, herauszufinden, warum sie langsam sind, basierend auf den Regeln von Yahoo! für leistungsstarke Webseiten. Es wird derzeit von Marcel Duran betreut, der auch am WebPageTest-Projekt beteiligt ist. YSlow arbeitet in drei Schritten, um seine Leistungstestergebnisse zu erhalten:
- YSlow durchforstet das DOM, um alle Komponenten (Bilder, Skripte, etc.) zu finden.
- YSlow erhält Informationen über die Größe jeder Komponente (Gzip, expire headers, etc.)
- YSlow nimmt die Daten und generiert eine Note für jede Regel, die Ihnen wiederum eine Gesamtnote gibt.
YSlow hat 23 verschiedene Regeln, gegen die es Ihre Website prüft, um sie zu bewerten, wie z.B. die Verwendung eines CDN und die Reduzierung von DNS-Lookups. GTmetrix bietet ein Online-Analyse-Tool, mit dem Sie Ihren YSlow-Score überprüfen können. Schauen Sie sich auch unser ausführliches Tutorial zur Verbesserung Ihres YSlow-Scores an.
PerfTool
PerfTool ist ein Open-Source-Client-Side-Performance-Tool-Projekt, das auf GitHub gehostet wird. Es sammelt verschiedene Informationen über Ihre Website und zeigt sie in einer einfach zu verdauenden Weise auf einer Berichtsseite an. Es kombiniert drei Datenquellen in einer: PageSpeed Insights, devperf und W3CJS. Insgesamt liefert es Ihnen über 200 verschiedene Leistungsindikatoren.
Ein großer Vorteil des PerfTools ist, dass Sie für den Google PageSpeed Insights-Bericht mehrere Seitentests gleichzeitig durchführen können. Anschließend können Sie die Website-Leistungsergebnisse früherer Tests vergleichen, einen Schwellenwert für die Bewertung festlegen und einen detaillierten Bericht über Ihre Tests erhalten. This can actually save you a lot of time if you are benchmarking your entire site’s web performance, as you don’t have to test your pages one by one.
Website speed test with Chrome extensions
There are quite a few free Chrome extensions in which you can analyze website speed. Here are a couple of them. You can easily launch them from right within your browser.
- Page Load Time
- app.telemetry Page Speed Monitor
- Performance-Analyser
- LoadFocus Load Testing
Mobile website speed test
If you are needing to run a mobile website speed test a couple of the tools we mentioned above do include this:
- WebPageTest
- GTmetrix
- dotcom-monitor
Another way to simulate a speed test on a mobile device is to use Chrome developer tools in device mode. Um in den Gerätemodus zu gelangen, klicken Sie auf das kleine Telefonsymbol in Chrome DevTools oder Sie drücken Ctrl + Shift + M
Cmd + Shift + M
). Sie können dann wählen, welches Gerät Sie emulieren möchten, die Ausrichtung und sogar die Auflösung. Sie können auch die Netzwerkdrosselung ändern, um zu sehen, wie Ihre Website bei einer normalen 2G- oder 4G-Verbindung dargestellt wird.
Sie können dann die Registerkarte „Netzwerk“ und die Wasserfallaufschlüsselung verwenden, um Geschwindigkeitstests durchzuführen.
Zusammenfassung
Wie Sie sehen können, gibt es eine Reihe von Website-Geschwindigkeitstest-Tools, aus denen Sie wählen können. Jedes von ihnen hat seine eigenen einzigartigen Eigenschaften, wie oben hervorgehoben wurde. Es ist eine gute Idee, Ihre Website regelmäßig zu testen und einen Benchmark zu erstellen, damit Sie im Laufe der Zeit Verbesserungen vornehmen können.
Wenn Sie wissen, wo die Engpässe liegen, können Sie beginnen, sie zu beheben. Fast alle der oben genannten Tools geben Empfehlungen ab. Some of the most common fixes include:
- Compressing your images and files
- Picking a fast web host
- Optimizing your code and scripts
- Using a content delivery network
- Caching
- Reducing the number of HTTP requests