Playground
This page starts the monitors of @mark1russell7/lag in your browser, with a Web Worker from @mark1russell7/lag/worker. Use the buttons to make main-thread load. Then look at what the monitors record.
The monitors are stopped.
Make load
Each button loads the main thread of this page. A button that blocks the main thread also makes a long interaction and a long animation frame. The timeline below shows them.
- The button keeps the main thread busy for 50 ms.
- The button keeps the main thread busy for 200 ms.
- The button keeps the main thread busy for 800 ms.
- The button keeps the main thread busy for 6 s. The page does not respond. After 5 s, the worker detects a hang, and the measurement conditions record a stall.
- The button reads and changes the layout in a loop for 150 ms. This causes style and layout work.
- The button makes many short-lived objects for 300 ms. This can start a garbage collection.
- The button does 150 ms of work in an animation frame callback.
- The button starts a chain of 1,000 setTimeout(0) tasks, one after the other. After the fifth step, the browser waits at least 4 ms for each step. Thus the chain takes approximately 4 s, and the load is small.
- The button puts 200,000 microtasks in the queue. They start before the next task.
CPU bursts, task bursts, layout work and long animation frames.
Session timeline
The timeline shows what the monitors recorded in this session: their metrics, their events and their spans, on one time axis. Make load above, and look for the long frames, the lag and the hangs that it causes.
- Blocking time
- Rest of a long frame
- Stall (hatched box)
- Interaction
- Layout shift
- Vital: good
- Vital: needs improvement
- Vital: poor
From 0 s to 30 s (live). The session has 0 long frames, 0 hangs, 0 stalls, 0 interactions.
Drag to move the time range, or use the overview at the bottom. Keys: the arrows (or A and D) move, and + and − (or W and S) zoom. 0 shows all, and F follows live. Comma and period go to the previous and the next item, and Enter zooms to it.
Show the data as a table
Blocks and interactions
These two charts use the data of the timeline. They fill as you make load. The test results have no data of this type, because the collector keeps only the values of each metric, without their times. Thus the charts are only here.
Hang-aligned averages
Each long block of the main thread is one epoch: a frame that blocks for 100 ms or more, a hang or a stall. The charts put the block start of each block at 0 s, and they show the mean of all blocks. The band is the 95% confidence interval of the mean.
No long blocks yet.
Select “Block for 200 ms”, “Block for 800 ms” or a workload profile. Each block adds one epoch.
Drift lag
Blocking time of long animation frames
Interaction duration
Show the data as a table
Interactions and long animation frames
Each dot is one interaction. The x axis gives the blocking time of the long animation frames that overlap the interaction. The y axis gives its duration, as INP measures it. A dot above 500 ms is a poor interaction. Both axes have a log scale.
No interactions yet.
- Duration equal to the blocking time
Interaction duration and the blocking time of overlapping frames
Show the data as a table
| Start (s) | Events | Type | Duration | Blocking of overlapping frames | Frames |
|---|
What the monitors record
The charts show the last 30 s. They update two times each second.
Timer drift (DriftLag)
Show the data as a table
| Time (s) | Value |
|---|
- Latest
- –
- p95
- –
- Maximum
- –
- Values
- 0
No values yet. DriftLag reports one value for each 100 ms window.
Main-thread block, seen by the worker
Show the data as a table
| Time (s) | Value |
|---|
- Latest
- –
- p95
- –
- Maximum
- –
- Values
- 0
No values. The browser did not start the worker, or the first heartbeats did not arrive yet.
Frame delta
Show the data as a table
| Time (s) | Value |
|---|
- Latest
- –
- p95
- –
- Maximum
- –
- Values
- 0
No frames yet. The browser does not run animation frames while the tab is hidden.
Event duration
Show the data as a table
| Time (s) | Value |
|---|
- Latest
- –
- p95
- –
- Maximum
- –
- Values
- 0
No events at this time. Select a load button: a blocked click makes a long event.
Counters and state
- Lifecycle state
- Not measured
- Lifecycle transitions
- 0
- Garbage collections seen
- 0
- Worker
- Not running
To make a transition, select another window, or hide this tab and then show it again.
Monitor messages (0)
The monitors sent no messages.