Wie misst man die Ladegeschwindigkeit einer Website…

Die Ladegeschwindigkeit einer Website kann auf verschiedene Weisen gemessen werden:

Entwicklertools im Browser:
- Öffnen Sie den Tab "Network" (Netzwerk) in den Entwicklertools (F12).
- Aktualisieren Sie die Seite.
- Analysieren Sie die Zeitindikatoren für jede Ressource (HTML, CSS, JS, Bilder):
  - Waiting (TTFB): Zeit bis zum Erhalt des ersten Bytes vom Server.
  - Content Download: Downloadzeit des Inhalts.
  - Total: Gesamte Ladezeit der Ressource.
- Achten Sie auf das Waterfall-Diagramm, um die Ladeabfolge der Ressourcen zu visualisieren.
- Analysieren Sie die Zusammenfassung (Summary) unten im Tab für die Gesamt-Ladezeit und die Anzahl der Anfragen.
Online-Dienste zur Messung der Geschwindigkeit:
- Google PageSpeed Insights: Analysiert die Leistung für mobile und Desktop-Geräte, gibt Optimierungsempfehlungen.
- GTmetrix: Bietet Metriken wie PageSpeed und YSlow, detaillierten Ladebericht, Leistung und Empfehlungen.
- Pingdom Website Speed Test: Misst die Geschwindigkeit aus verschiedenen Standorten, bietet eine detaillierte Leistungsanalyse.
- WebPageTest: Ermöglicht Tests aus verschiedenen Standorten und Browsern, liefert viele Metriken und Visualisierungen.
Metriken, auf die man achten sollte:
- Time to First Byte (TTFB): Zeit bis zum Erhalt des ersten Bytes vom Server.
- Largest Contentful Paint (LCP): Zeit bis das größte Element des Inhalts im sichtbaren Bereich erscheint.
- First Input Delay (FID): Zeit vom ersten Nutzerinteraktion bis zur Antwort des Browsers.
- Cumulative Layout Shift (CLS): Gesamtscore für Layoutverschiebungen während des Ladens.
- DOMContentLoaded: Zeitpunkt, wann der Browser das HTML-Dokument vollständig geladen und geparst hat.
- Load: Zeitpunkt, wann alle Ressourcen der Seite vollständig geladen sind.

Automatisierung mit Frameworks:

Lighthouse (Google-Tool): Kann als CLI-Tool verwendet oder in CI/CD-Pipelines integriert werden.

# Beispiel für die Verwendung von Lighthouse CLI
lighthouse https://www.beispiel.de --output json,html --output-path ./report.json

Selenium/WebDriver: Kann verwendet werden, um die Seite zu laden und die Ladezeit über die Performance API von JavaScript zu messen.

# Beispiel zum Erhalten der Ladezeit mit Selenium und Performance API
from selenium import webdriver
import time

driver = webdriver.Chrome() # Oder ein anderer Browser
driver.get("https://www.beispiel.de")

# Warten, bis die Seite vollständig geladen ist
time.sleep(5) # Zuverlässigere Wartezeiten können verwendet werden

# PerformanceTiming-Objekt abrufen
performance_timing = driver.execute_script("return window.performance.timing")

# Ladezeit berechnen
load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
print(f"Ladezeit: {load_time} ms")

driver.quit()

Cypress: Bietet ebenfalls Zugriff auf die Performance API.

Real User Monitoring (RUM) Systeme:
- Tools, die Leistungsdaten direkt von echten Nutzern auf der Website sammeln. Beispiele: Sentry, New Relic Browser.

Die Wahl der Methode hängt von den Zielen ab: Für eine schnelle Einschätzung eignen sich Online-Services, für detaillierte Analysen und Debugging die Entwicklertools, und für regelmäßiges Monitoring sowie Integration in Entwicklungsprozesse die Automatisierung und RUM-Systeme.

Wie misst man die Ladegeschwindigkeit einer Website?