So messen Sie die JavaScript-Performance

JavaScript-Performance-Probleme sind leicht zu spüren, aber schwer zu lokalisieren. Ihre App fühlt sich träge an, Interaktionen verzögern sich, und Benutzer bemerken es – aber ohne die richtigen Messwerkzeuge tappen Sie im Dunkeln. Dieser Artikel behandelt praktische Techniken zur Messung der JavaScript-Performance mithilfe moderner Browser-APIs und DevTools, damit Sie echte Engpässe finden und die richtigen Dinge optimieren können.

Labor-Tests vs. Real User Data

Bevor Sie zu einem Tool greifen, sollten Sie die beiden Arten der JavaScript-Performance-Messung verstehen:

• Synthetische (Labor-)Tests führen Ihren Code in einer kontrollierten Umgebung aus. Tools wie Lighthouse und Chrome DevTools liefern wiederholbare, debugbare Ergebnisse. Ideal für Entwicklung und CI-Pipelines.
• Felddaten (RUM) erfassen, was echte Benutzer erleben. Tools wie Chrome User Experience Report (CrUX) oder RUM-Plattformen zeigen Ihnen die tatsächliche Performance über verschiedene Geräte und Netzwerke hinweg.

Nutzen Sie Labor-Tools zur Diagnose von Problemen. Nutzen Sie Felddaten, um zu bestätigen, dass sie relevant sind.

Profiling von JavaScript in Chrome DevTools

Chrome DevTools ist der praktischste Ausgangspunkt für JavaScript-Performance-Metriken. Öffnen Sie das Performance-Panel, starten Sie die Aufzeichnung, interagieren Sie mit Ihrer Seite und stoppen Sie dann.

Worauf Sie achten sollten:

• Long Tasks – jede Aufgabe, die den Main Thread länger als 50 ms blockiert, wird rot angezeigt. Diese verzögern oft Benutzerinteraktionen. Moderne Tools können auch Long Animation Frames anzeigen, die detailliertere Einblicke in langsame Frames bieten, die die Reaktionsfähigkeit beeinträchtigen.
• Call Tree / Bottom-Up-Ansichten – identifizieren Sie, welche Funktionen die meiste Ausführungszeit verbrauchen.
• Flame Chart – visualisieren Sie den Call Stack über die Zeit, um teure synchrone Arbeit zu erkennen.

Firefox DevTools bietet einen ähnlichen Profiler. Beide Tools sind kostenlos, erfordern keine Einrichtung und funktionieren auf jeder Website.

Messung der JavaScript-Ausführungszeit mit der Performance API

Für präzise, programmatische JavaScript-Performance-Messung verwenden Sie die integrierte Performance API des Browsers.

Verwendung von performance.now()

performance.now() gibt einen hochauflösenden Zeitstempel in Millisekunden zurück, relativ zum Time Origin der Seite – was es zuverlässiger als Date.now() für Code-Timing macht.

const start = performance.now()
runExpensiveOperation()
const duration = performance.now() - start
console.log(`Took ${duration}ms`)

Verwendung von performance.mark() und performance.measure()

Für strukturiertes Timing über mehrere Punkte hinweg verwenden Sie Marks und Measures. Dies integriert sich direkt in DevTools und PerformanceObserver.

performance.mark('fetch-start')
const data = await fetchData()
performance.mark('fetch-end')

const measure = performance.measure('fetch-duration', 'fetch-start', 'fetch-end')
console.log(measure.duration) // milliseconds

Measures erscheinen im Performance-Panel der Chrome DevTools unter der Timings-Spur, wodurch sie leicht mit anderen Aktivitäten auf dem Main Thread korreliert werden können.

Automatisierung der Messung mit PerformanceObserver

PerformanceObserver ermöglicht es Ihnen, auf Performance-Einträge zu reagieren, sobald sie auftreten – nützlich für Production-Monitoring.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.duration)
  }
})

observer.observe({ type: 'measure', buffered: true })

Sie können auch longtask-Einträge beobachten, um Main-Thread-Blockierungen in echten Benutzersitzungen zu erkennen.

Core Web Vitals und INP: Die Metriken, die zählen

Googles Core Web Vitals sind die Standard-JavaScript-Performance-Metriken für die Benutzererfahrung. Die relevanteste für JavaScript ist Interaction to Next Paint (INP) – sie misst die Latenz aller Interaktionen (Klicks, Taps, Tastatureingaben) während der gesamten Lebensdauer einer Seite.

Ein INP über 200 ms ist ein Warnsignal. Über 500 ms ist schlecht. Intensive JavaScript-Ausführung während Event-Handlern ist die häufigste Ursache.

Verwenden Sie die web-vitals-Bibliothek, um INP im Feld zu messen:

import { onINP } from 'web-vitals'
onINP(({ value }) => console.log('INP:', value))

Bei SPAs beachten Sie, dass Soft Navigations (Routenwechsel ohne vollständiges Neuladen der Seite) nur teilweise von Standard-Navigationsmetriken erfasst werden. Die Browser-Unterstützung für Soft-Navigation-Messung entwickelt sich noch, daher kann die manuelle Instrumentierung von Routenübergängen mit performance.mark() helfen, Lücken zu schließen.

Das richtige Tool wählen

Fazit

Effektive JavaScript-Performance-Messung beginnt mit dem richtigen Tool für die richtige Fragestellung. Verwenden Sie DevTools zum Profiling und zur Exploration, die Performance API zur Instrumentierung spezifischer Code-Pfade und Core Web Vitals – insbesondere INP – um zu verstehen, was Benutzer tatsächlich erleben. Messen Sie zuerst, dann optimieren Sie.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.