WEBPUNKS
  • Services
    • Web Entwicklung
    • App Entwicklung
    • Online Marketing
    • Workshops & Trainings
  • Work
  • Über uns
  • Blog
  • Kontakt
  • Menü Menü
Du bist hier: Startseite1 / Blog2 / SEO3 / Website Ladezeiten testen: die 5 besten Tools & Tipps

Website Ladezeiten testen: die 5 besten Tools & Tipps

19.11.2018/in SEO, Webdesign /von Ernst
Website Ladezeiten testen

Um User nicht zu frustrieren, müssen Webseiten schnell sein. Um die Ladezeit von Webseiten zu optimieren, nutzt man unterschiedliche Online-Dienste. Tools wie PageSpeed Insights, Lighthouse und Co. sind beim Testen von Website Ladezeiten hilfreich.

In diesem Beitrag listen wir die derzeit besten Tools für das Testen von Website Ladezeiten auf und geben Tipps zur Optimierung.

Inhalts­verzeichnis

  • Vorteile einer schnellen Webseite
  • Welche Werte sind gute Richtwerte?
  • Top 5 Tools zum Testen der Ladezeit von Webseiten
    • testmysite.withgoogle.com: einfach und intuitiv für mobile Webseiten
    • PageSpeed Insights: Googles Website Ladezeiten Tester
    • Lighthouse: direkt in Google Chrome integriert
    • Webpagetest.org: Detailanalyse der Websitegeschwindigkeit
    • GTmetrix: so genau, dass es weh tut
  • Analyse erledigt – und jetzt?
  • Was man selbst machen kann
  • Wofür man Profis braucht

Warum muss man Website Ladezeiten testen?

Regelmäßige Tests der eigenen Website sind wichtig, um erhöhte Ladezeiten rechtzeitig zu erkennen und die Gründe dafür zu identifizieren. Langsame Webseiten erhöhen die Absprungrate der Webseitenbesucher. Auch die Platzierung bei Google verschlechtert sich.

Die Absprungrate (Bounce Rate) gibt an, wie viele Prozent der Besucher die Webseite in kürzester Zeit wieder verlassen.

Ein Hauptgrund für dieses Verhalten sind zu lange Ladezeiten. Mittlerweile werden die meisten Webseiten über Smartphones aufgerufen. Auf Smartphones laden Webseiten langsamer als auf Desktop-Geräten. Der Grund dafür sind meist schlechtere Internet-Verbindungen.

Die meisten User springen nach spätestens 2 Sekunden ab, wenn eine Webseite nicht schnell genug geladen wird. Und genau das erhöht die Bounce Rate.

Das Problem dabei: eine erhöhte Absprungrate (mehr als 70%) wirkt sich negativ auf SEO (Suchmaschinenoptimierung) und das Ranking der Webseite bei Google aus.

Merkt Google, dass immer mehr User die Webseite schnell verlassen weil sie langsam lädt, wird Google die Webseite nicht mehr in den besten Suchergebnissen anzeigen. Und das führt zu schlechten Rankings.

Schlechte Rankings führen Umsatzrückgängen (Beispiel: Webshop). Potenzielle Kunden finden die Webseite nicht mehr oder es wird die Webseite der Konkurrenz bevorzugt.

[icon type=“icon-alert“]Achtung: Lange Ladezeiten führen zu hohen Absprungraten und wirken sich negativ auf das Ranking in den Google Suchergebnissen aus. Das kann zu Umsatzrückgängen führen.

Vorteile einer schnellen Webseite

Eine schnelle Webseite hat gleich mehrere Vorteile. Das Nutzererlebnis ist besser, die Absprungrate sinkt und das Ranking bei Suchmaschinen wird verbessert.

Verarbeitet Google eine Suchanfrage (z.B. „Fahrräder kaufen“) sucht es nach den passendsten Ergebnissen (= optimierte Webseiten mit dem passenden Inhalt) in der jeweiligen Region des Users.

Gibt es mehrere passende Anbieter entscheidet sich Google für den schnelleren. Im Zweifelsfall gewinnt also die schnellere Webseite.

Ein einfaches Beispiel sind Online-Shops: ein Shop der langsam lädt verärgert User und wird schrittweise von Google benachteiligt.

Es ist wichtig zu verstehen, dass die Ladezeit einer Webseite heute ein absolutes Schlüsselkriterium für jedes Unternehmen ist.

zusammenhang von der Webseiten Geschwindigkeit und Verkaufszahlen

Der Unterschied von nur 1 Sekunde (Quelle: Original von shopify.com)

Und es ist keine einmalige Aufgabe eine Webseite zu programmieren und zu optimieren.

Da sich die Technik, Googles Kriterien und die Endgeräte der User ständig verändern, muss man in regelmäßigen Abständen prüfen ob die eigene Webseite im Vergleich zur Konkurrenz oder dem Branchendurchschnitt noch mithalten kann.

Im Idealfall optimiert man die Ladezeit einer Webseite systematisch mindestens einmal pro Jahr und bringt sie auf den neuesten Stand.

Das CMS (Content Management System) oder das verwendete Theme muss dazu meistens nicht geändert werden. Oft reicht es, problematische Plugins zu identifizieren, die Caching-Technik auf den neuesten Stand zu bringen und Dateien auszumisten, die das Rendering der Webseite blockieren.

[icon type=“icon-lamp“]Tipp: Bei Webseiten mit demselben Angebot bevorzugt Google die schneller ladende Webseite. Mindestens einmal pro Jahr sollte die Ladezeit der eigenen Webseite getestet und optimiert werden.

Welche Werte sind gute Richtwerte?

3 Werte sind für die Optimierung der Ladezeit einer Webseite besonders wichtig: Die Antwortzeit des Servers, der Startzeitpunkt des Renderings und die Dauer für die Darstellung der Inhalte above the fold.

Antwortzeit des Servers

Die Antwortzeit des Servers steht für die Zeitdauer die der Server – also der Computer auf dem die Bestandteile der Webseite gespeichert sind – benötigt um zu reagieren und Dateien zur Verfügung zu stellen.

Die Antwortzeit des Servers hängt stark davon ab wie viele Webseiten gleichzeitig auf einem Server gespeichert und ausgeliefert werden.

Sehr viele Angebote von Billig-Hostern weisen leider schlechte Antwortzeiten auf. Das liegt daran, dass auf einem Server bis zu 200 Kunden und Webseiten gespeichert werden.

Die Antwortzeiten sind dann meistens hoch, was schlecht für die Ladezeit einer Webseite ist.

Lange Antwortzeiten lassen sich mit einem selbst verwalteten Server und guter Rechenleistung verringern.

[icon type=“icon-lamp“]Die Antwortzeit des Servers sollte im Idealfall unter 200 Millisekunden liegen.

Das ist die Optimal-Vorgabe von Google selbst. In der Praxis ist das sehr schwer zu schaffen. Von guten Werten kann daher auch um die 400-600 ms gesprochen werden.

Rendering Start

Rendering bezeichnet die grafische Darstellung der Seite, also den schrittweisen Aufbau von Text und Bildern, Farben und Elementen.

Das Rendering startet nachdem der Server geantwortet hat und die wichtigsten Dateien der Webseite geladen und verarbeitet wurden. Dann weiß der Browser (Chrome, IE, Firefox) des Users was zu tun ist und startet mit der Visualisierung der Webseite.

Je schneller das passiert, desto schneller sieht der User, dass sich auf der Webseite etwas tut. Würde der User 4 Sekunden lang nur einen weißen Bildschirm sehen ist die Wahrscheinlichkeit für einen Absprung sehr hoch.

[icon type=“icon-lamp“]Das Rendering der Webseite sollte innerhalb der ersten 700ms nach Seitenaufruf starten.

Auch dieser Wert ist schwer zu schaffen – in der Praxis sind Werte unter 1,4 Sekunden ebenfalls sehr gut.

Visualisierung von above the fold Inhalten

Die Bezeichnung „above the fold“ steht für den Bereich, den der User beim Aufrufen der Webseite auf seinem Bildschirm als erstes sieht ohne dass er scrollen muss.

Bereich 'above the fold' bei Webseiten

Above the fold ist der Bereich, der auf den ersten Blick sichtbar ist

Beim Rendering der Webseite gilt: Die zuerst sichtbaren Inhalte müssen bevorzugt und schneller visualisiert werden. Das ist eine der Hauptaufgaben der professionellen Optimierung von Ladezeiten.

Die restlichen Inhalte laden während der User die ersten Inhalte betrachtet. So entsteht für den User ein noch besseres Nutzererlebnis.

[icon type=“icon-lamp“]Die ersten sichtbaren Inhalte sollten unter 1-2 Sekunden fertig visualisiert sein. Unter 1 Sekunde ist der Idealwert.

Es gibt natürlich noch eine Vielzahl anderer Kennzahlen, die für die Optimierung von Ladezeiten wichtig sind. Wir beschränken uns hier auf die 3 beschriebenen.

Top 5 Tools zum Testen der Ladezeit von Webseiten

Um die beschriebenen Kennzahlen zu ermitteln und Probleme bei den Ladezeiten von Webseiten zu identifizieren, nutzt man Online-Tools. Die besten 5 stellen wir hier vor.

testmysite.withgoogle.com: einfach und intuitiv für mobile Webseiten

Mit dem testmysite-Tool von Google verschafft man sich einen ersten Überblick. Man gibt dazu einfach die URL der Webseite ein und Google testet die mobile Variante der Webseite für Smartphones.

Dazu werden unter anderem unterschiedliche WLAN-Geschwindigkeiten ausprobiert.

Am Ende erhält man eine Ladezeit in Sekunden inkl. einer Einschätzung wie viele % der eigenen User aufgrund von langen Ladezeiten abspringen könnten.

Website Speed Check mit testmysite

Ergebnisse und Branchenvergleich der Webseite www.we-go-wild.com mit dem Dienst testmysite.withgoogle.com

Außerdem ist der Branchenvergleich sehr hilfreich. Google zeigt uns mit testmysite wie unsere Webseite im Vergleich zum Mitbewerb abschneidet.

Ein weiteres Feature: man kann – wenn man möchte – einen Bericht mit Verbesserungsmaßnahmen anfordern.

Pro: schnell, unkompliziert, Branchenvergleich

Contra: nur für mobile Webseiten

Link: Website Check mit testmysite.withgoogle.com

PageSpeed Insights: Googles Website Ladezeiten Tester

Der nächste Schritt ist eine Prüfung mit Googles PageSpeed Insights Tool. PageSpeed Insights ist umfangreicher als das testmysite-Tool. Hier erhält man detaillierte Auswertungen zu den Ladezeiten der Website auf Smartphones und Desktop-Geräten.

Für Laien ist das Tool etwas überfordernd, für SEO-Experten und Webentwickler allerdings bietet es schön aufbereitete Verbesserungspotenziale und -empfehlungen für die analysierte Website.

Performance Test mit pagespeed insight

Eine unserer Webseiten (www.immobilienexperten.at) schneidet bei PageSpeed Insights sehr gut ab

Auch hier gibt man die URL der Website ein. Danach misst Google die Geschwindigkeit mit Seitenaufrufen. Dabei werden Kennzahlen (u.a. Server-Antwortzeit, Bildergrößen, Rendering Dauer uvm.) geprüft und ausgewertet.

Am Ende erhält man eine Bewertung zwischen 0 und 100 für Mobile und für Desktop.

Pro: hoher Detailgrad, priorisierte Verbesserungsempfehlungen

Contra: für Laien überfordernd, sehr technisch

Link: Webseite mit Google PageSpeed Insights analysieren

Lighthouse: direkt in Google Chrome integriert

Das Lighthouse Tool ist direkt im Google Chrome Browser integriert. Zum Öffnen drückt man die Taste F12. In den Developer / Entwickler Tools wählt man den Punkt „Audit“ aus.

Die geöffnete Webseite wird mit dem Lighthouse Tool auf Performance, Zugänglichkeit und SEO getestet.

Lighthouse Website Geschwindigkeitstest

Das Analysetool Lighthouse wird direkt in den Entwicklertools von Chrome geöffnet

Lighthouse ist eine Eigenentwicklung von Google und wird auch für die PageSpeed Insights Tests herangezogen.

Pro: sehr hoher Detailgrad, direkt im Browser integriert, optimal für Entwickler

Contra: für Laien überfordernd, sehr technisch

Webpagetest.org: Detailanalyse der Websitegeschwindigkeit

Webpagetest.org ist eines unserer Tools der Wahl wenn es um sehr genaue Analysen und Standort abhängige Ladezeiten-Tests geht.

Das Projekt wird von mehreren prominenten IT-Firmen unterstützt – unter anderem von Google – und bietet sehr gute Auswertungen. Pro Testprozess werden 3 Durchgänge absolviert.

Website Performance Test mit webpagetest.org

Webpagetest.org stellt die Ergebnisse übersichtlich in einem Wasserfallmodell dar

Die Reihenfolge, in der Dateien (JS, CSS, Bilder etc.) geladen werden, zeigt das Wasserfall-Modell. Damit wird es schnell deutlich welcher „Übeltäter“ die Webseite ausbremst.

Pro: sehr hoher Detailgrad, optimal für Entwickler, Wasserfall / Timing Darstellung

Contra: für Laien überfordernd, sehr technisch, Wartezeiten

Link: Webseite mit Webpagetest analysieren

GTmetrix: so genau, dass es weh tut

GTmetrix ist Webpagetest.org sehr ähnlich. Wie bei Webpagetest.org muss man auch hier mit kurzen und auch manchmal langen Wartezeiten rechnen.

Die Tests sind sehr genau und die Auswertung ist schonungslos. Bei diesen Tests Höchstwerte zu erreichen ist außerordentlich schwierig.

Setzt man externe Tools ein wie Google Analytics, Google Tag Manager oder Einbindungen von Werbepartnern, sind Bestwerte nur noch mit hohem Aufwand möglich.

GTmetrix Report für Webseiten

GTmetrix zeigt die Performance einer Webseite übersichtlich auf einem Blick

Trotzdem hilft die genaue Aufschlüsselung dabei das Nutzererlebnis in punkto Ladezeiten zu verbessern – und das ist es, worum es schlussendlich geht.

Pro: sehr hoher Detailgrad, optimal für Entwickler, Wasserfall / Timing Darstellung

Contra: für Laien überfordernd, sehr technisch, Wartezeiten

Link: Webseite mit GTmetrix analysieren

Analyse erledigt – und jetzt?

Je nach Analyseergebnis sollte man mit der Optimierung beginnen. Die meisten Tools schlagen konkrete Maßnahmen dafür direkt vor.

Unsere Empfehlung ist, sich hier direkt an die Vorgaben von Google zu halten. Diese werden bis ins kleinste Detail (technisch) beschrieben. So kann man Step by Step dafür sorgen, dass die eigene Webseite schneller lädt.

Die größten Ladezeiten-Bremser

Grundsätzlich sind Elemente, die das Rendering – also das Laden des ersten sichtbaren Inhalts für den User – blockieren, die wichtigsten Baustellen für die Optimierung von Ladezeiten.

Zu den häufigsten Verursachern zählen:

Langsame Webserver

Ein bessere Hardware hilft natürlich so gut wie immer. Unsere Empfehlung: Billig-Anbieter beim Hosting meiden wenn man schnelle Webserver haben möchte. Hier spart man am falschen Platz.

Nicht optimierte Bildgrößen

Die Ladezeit erhöht sich durch Bilder die in hohen Auflösungen verwendet werden. Speziell Bilder mit Dateigrößen jenseits der 300kb sind ein Problem.

Vergleich eines Bildes ohne und mit Komprimierung

Sehen Sie den Unterschied? Wir auch nicht – Google allerdings schon! Links ist das Bild unkomprimiert mit 335 kb, rechts komprimiert mit 51,3 kb. Für das menschliche Auge ist der Unterschied kaum sichtbar.

Unsere Empfehlung: mit Bildbearbeitungsprogrammen wie Photoshop die Bilder auf max. 1200 x 1200 Pixel (oder darunter) skalieren und Ladezeiten einsparen. Die Bilder können zusätzlich noch mit Online-Tools wie compressjpeg.com komprimiert werden und sollten erst danach auf der Webseite eingefügt werden.

Responsive Webdesign hilft Bilder nur in der Größe geladen werden, in der sie tatsächlich am Display sichtbar sind. Hierzu hilft auch unser Beitrag zu den Webdesign Standards 2018.

Rendering-blockierendes Javascript Dateien

JavaScript ist für interaktive Funktionen notwendig. Die meisten größeren Webseiten benötigen JavaScript und das ist auch völlig OK.

Wichtig ist darauf zu achten, dass große JavaScript-Dateien das Rendering nicht blockieren. Ist eine eingebundene JavaScript Library (z.B. jQuery) groß, dauert es seine Zeit bis sie geladen ist.

Während dieser Zeit kann der Browser keine Inhalte für den User visualisieren.

Unser Tipp: JS-Dateien asynchron laden oder das „defer“ Attribut setzen. Nicht-kritische JS-Dateien werden dann erst geladen, wenn alles andere geladen wurde.

Nicht optimiertes CSS

CSS Dateien sind für die Anordnung von Webseiten-Elementen, Farben und vielem mehr zuständig.

Auch sie können schnell sehr groß werden. Unser Tipp: CSS-Dateien minifizieren (minify). Das ist sehr einfach mit Online-Tools wie cssminifier.com möglich.

Zusätzlich wichtig: CSS Dateien ausmisten und nur die wichtigsten Styling-Regeln verwenden.

Die Coverage-Auswertung in den Chrome Entwicklertools zeigt welche Styling-Regeln tatsächlich notwendig sind.

Rendering-blockierende CSS Dateien

Wer so richtig aufs Gaspedal treten will, der kann auch das unbedingt notwendige CSS („Critical Path CSS“) identifizieren und es im head der Seite laden.

Das restliche CSS kann später asynchron nachgeladen werden um das Rendering nicht zu blockieren.

Fehlendes Caching und Komprimierung (gzip, Cache, CDN)

Caching steht für das Zwischenspeichern von Dateien. Beim zweiten Aufruf einer Webseite, sind die Ladezeiten meistens deutlich kürzer. Warum? Weil Dateien zwischengespeichert wurden.

Fehlendes Caching (meistens eine Server-Einstellung) und Komprimierung (meistens in der htaccess Datei – zumindest bei Apache Servern – zu machen) führen zu erhöhten Ladezeiten.

Ein Gespräch mit dem Hosting-Partner oder der Webagentur des Vertrauens zahlt sich aus!

Was man selbst machen kann

Bildgrößen lassen sich selbst sehr gut optimieren.

Steigt man von Billig-Hostern auf professionelle Webspace Anbieter um, erhält man schnellere Server.

Wofür man Profis braucht

Profis benötigt man insbesondere für technische Arbeiten.

Hierzu zählen vor allem JS- und CSS-Optimierungen, Caching und Server-Einstellungen.

P.S.: Wir helfen gerne weiter: hello@webpunks.at

 

Hinweis: Im Titelbild wird ein Icon von Freepik von www.flaticon.com (CC 3.0 BY Lizenz) genutzt.

Schlagworte: Geschwindigkeitstest, Ladezeit Webseite, PageSpeed Insights, Website Geschwindigkeit
Ernst

Über Ernst

"Chefpunk" Ernst ist einer der Gründer und Geschäftsführer der WEBPUNKS. Seit über 15+ Jahren begeistert ihn alles was mit Webdesign & -entwicklung zu tun hat. Er ist spezialisiert auf SEO, liebt verrückte Ideen, Fitness, Bouldern, die Berge und seine Gitarre.

Das könnte Dich auch interessieren
Webdesign Standards 2018: Best Practices & Tipps
Web Vitals: Google Rankingkriterien 2021 für Webseiten
Was kostet eine Webseite wirklich?
Landing Page Design: Tipps für bessere Texte
So erstellst du einen Google Business Eintrag in 5 Schritten
Die wichtigsten Online Marketing Kanäle im Überblick

Kategorien

  • App Entwicklung
  • Business
  • News & Updates
  • Office Life
  • Online Marketing
  • SEO
  • Technology
  • Webdesign
  • Webentwicklung

Starte Dein Projekt mit uns.

Erzähle uns von Deinem Projekt. Wir geben Tipps & schätzen den Aufwand ab.

Jetzt kontaktieren

WEBPUNKS

  • Über uns
  • Kontakt
  • Blog
  • Karriere
  • AGB
  • Datenschutz
  • Impressum

SERVICES

  • Webentwicklung
  • App Entwicklung
  • Online Marketing
  • Workshops & Trainings
  • Webseite erstellen
  • Onlineshop erstellen
  • App entwickeln
  • SEO, SEA, SMA

OUR WORK

  • Online Trail Buchung
  • Webshop für E-Bikes
  • App für Apotheken
  • Job Plattformen
  • Alle Projekte
Google Partner Agentur
Lernen wir uns kennen ›

WEBPUNKS ist eine Full-Service Webagentur.
Webdesign, Online-Marketing und mobile Apps.

WEBPUNKS GmbH, Primoschgasse 3, 9020 Klagenfurt
Tel.: +43 (0)681 8130 1712 Mail: hello@webpunks.at

© 2023 | WEBPUNKS® GmbH
Nach oben scrollen