Performance Timeline API Playground

PerformanceObserver, Resource Timing, Navigation Timing, User Timing, Long Tasks, and timeline visualization

✅

Performance Timeline API is supported

All major browsers support the Performance API.

PerformanceObserver Entry Types

Explore available entry types and observe performance entries in real-time.

Available Entry Types

Create Observer

Status
Idle
Entries
0
Type
--
Buffer Size
--
[info] Select an entry type and click Start Observer.

Resource Timing Entries

View timing data for all resources loaded by the page.

Name Type Duration (ms) Transfer (B) DNS (ms) Connect (ms) TTFB (ms)

Navigation Timing Breakdown

Detailed breakdown of the page navigation phases from redirect to load complete.

Phase Breakdown

User Timing (mark / measure)

Create performance marks and measures interactively. Use them to instrument your code.

Create Mark

Create Measure

[info] Create marks and measures to see them listed above.

Long Task Detection

Monitor tasks that block the main thread for more than 50ms. Uses PerformanceObserver with "longtask" type.

Monitoring
Off
Long Tasks
0
Total Blocked
0ms
Longest
0ms
[info] Click Start Monitoring, then trigger long tasks to detect them.

Timeline Visualization

Visual chart of all performance entries on a time axis.

Generated Code

Complete Performance Timeline API integration snippets.