Comments (3)
Steps to reproduce:
- Open a page (e.g. the INP Demo page)
- Using JS console:
- Add an event handler that fires an alert, with less priority than the registered events on the page already:
document.documentElement.addEventListener('click', () => alert("hi"));
- Add web-vitals.js v4 + attribution logging:
const { onLCP, onINP, onCLS } = await import('https://unpkg.com/web-vitals/attribution?module'); onINP((metric) => { console.log('web-vitals.js', metric.value, metric); }, { reportAllChanges: true });
- Then interact with the page.
This results in the following:
- First, you see a small jank which comes from the INP demo page itself (setInterval, pointerdown/up blocking events etc)
- Then you see an alert popup, after that delay
The reported INP will show something like (specific numbers will vary):
{
"name": "INP",
"value": 376,
"rating": "needs-improvement",
"delta": 104,
"entries": [
{
"name": "pointerdown",
"entryType": "event",
"startTime": 13763.100000023842,
"duration": 376,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"interactionId": 7303,
"processingStart": 13820,
"processingEnd": 13935.100000023842,
"cancelable": true
}
],
"id": "v4-1717772209807-2007043867067",
"navigationType": "back-forward",
"attribution": {
"interactionTarget": "#textarea",
"interactionTargetElement": {},
"interactionType": "pointer",
"interactionTime": 13763.100000023842,
"nextPaintTime": 16142.899999976158,
"processedEventEntries": [
{
"name": "pointerdown",
"entryType": "event",
"startTime": 13763.100000023842,
"duration": 376,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"interactionId": 7303,
"processingStart": 13820,
"processingEnd": 13935.100000023842,
"cancelable": true
},
{
"name": "mousedown",
"entryType": "event",
"startTime": 13763.100000023842,
"duration": 376,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"interactionId": 0,
"processingStart": 13935.100000023842,
"processingEnd": 13935.100000023842,
"cancelable": true
},
{
"name": "pointerup",
"entryType": "event",
"startTime": 13769.199999928474,
"duration": 368,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"interactionId": 7303,
"processingStart": 13936.299999952316,
"processingEnd": 14136.299999952316,
"cancelable": true
},
{
"name": "mouseup",
"entryType": "event",
"startTime": 13769.199999928474,
"duration": 368,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"interactionId": 0,
"processingStart": 14136.299999952316,
"processingEnd": 14136.299999952316,
"cancelable": true
},
{
"name": "click",
"entryType": "event",
"startTime": 13769.199999928474,
"duration": 368,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"interactionId": 7303,
"processingStart": 14136.299999952316,
"processingEnd": 16142,
"cancelable": true
}
],
"longAnimationFrameEntries": [
{
"name": "long-animation-frame",
"entryType": "long-animation-frame",
"startTime": 13745.899999976158,
"duration": 2397,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"renderStart": 16142.100000023842,
"styleAndLayoutStart": 16142.299999952316,
"firstUIEventTimestamp": 13763.100000023842,
"blockingDuration": 2289,
"scripts": [
{
"name": "script",
"entryType": "script",
"startTime": 13754.100000023842,
"duration": 65,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"invoker": "TimerHandler:setTimeout",
"invokerType": "user-callback",
"windowAttribution": "self",
"executionStart": 13754.100000023842,
"forcedStyleAndLayoutDuration": 0,
"pauseDuration": 0,
"sourceURL": "https://inp-demo.glitch.me/main.js",
"sourceFunctionName": "periodicBlock",
"sourceCharPosition": 1410
},
{
"name": "script",
"entryType": "script",
"startTime": 13820,
"duration": 114,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"invoker": "DOMWindow.onpointerdown",
"invokerType": "event-listener",
"windowAttribution": "self",
"executionStart": 13820,
"forcedStyleAndLayoutDuration": 0,
"pauseDuration": 0,
"sourceURL": "https://inp-demo.glitch.me/main.js",
"sourceFunctionName": "",
"sourceCharPosition": 4059
},
{
"name": "script",
"entryType": "script",
"startTime": 13936.299999952316,
"duration": 200,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"invoker": "DOMWindow.onpointerup",
"invokerType": "event-listener",
"windowAttribution": "self",
"executionStart": 13936.299999952316,
"forcedStyleAndLayoutDuration": 0,
"pauseDuration": 0,
"sourceURL": "https://inp-demo.glitch.me/main.js",
"sourceFunctionName": "",
"sourceCharPosition": 4059
},
{
"name": "script",
"entryType": "script",
"startTime": 14136.699999928474,
"duration": 2005,
"navigationId": "204030c4-b7ac-4c2c-a31d-5d15ef400627",
"invoker": "HTML.onclick",
"invokerType": "event-listener",
"windowAttribution": "self",
"executionStart": 14136.699999928474,
"forcedStyleAndLayoutDuration": 0,
"pauseDuration": 0,
"sourceURL": "",
"sourceFunctionName": "",
"sourceCharPosition": -1
}
]
}
],
"inputDelay": 56.89999997615814,
"processingDuration": 2322,
"presentationDelay": 0.8999999761581421,
"loadState": "complete"
}
}
The value
of 376
here represent the time it took to show the dialog-- which in this case did have observable UX delays. It does not include the time the dialog was opened.
However, the attribution
data represents the entirely of the animation frame, including other events and the total time the js dialog was opened.
In particular, "processingDuration": 2322
is somewhat inconsistent with overall value of the metric, at first glance. (the last LoAF Script entry should have a "pauseDuration":
value which is not 0, but seems not working on Canary for me...
In my opinion the attribution is FINE but there probably should be some obvious clue about WHY the numbers are the way they are. Maybe if the LoAF "pauseDuration"
worked and the sum of all pauseDuration was split out from "processingDuration"
(subtracted from and reported distinctly) this would be good enough?
from web-vitals.
To make testing this a bit easier, I've forked the INP demo to include a few buttons for triggering different dialogs and upgraded it to the latest attribution build: https://inp-demo-dialog.glitch.me/
![image](https://private-user-images.githubusercontent.com/1120896/355185672-1b9a46e4-1db7-47b1-8076-08df66af8690.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMjc5NzgsIm5iZiI6MTcyNDEyNzY3OCwicGF0aCI6Ii8xMTIwODk2LzM1NTE4NTY3Mi0xYjlhNDZlNC0xZGI3LTQ3YjEtODA3Ni0wOGRmNjZhZjg2OTAucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjBUMDQyMTE4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NmIyZjMwNzU4Nzk1ZjkxNzQ1NjM4YTdjYTc0OGVlMjA0ZjMwNTIwN2JhZWJkMWI0ODU1MTcwMWE0YzA2ZmE3MiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.AgcLO76rolKin0LQZ1LMCPnSWINNaS5whkXRDV1y-lI)
from web-vitals.
Filed w3c/long-animation-frames#17 to track the 0ms pauseDuration
bug
from web-vitals.
Related Issues (20)
- can't find ReportCallback or ReportHandler type HOT 3
- Are there any updates for soft-navs? HOT 2
- LoAF missed for some INP events HOT 9
- Facing issue while exporting `web-vitals/attribution` using `browserify` HOT 2
- LoAF Performance entry script sourceFunctionName and sourceURL logged values HOT 4
- Using `performance.eventCounts` instead of `performance.interactionCount` HOT 2
- TypeError: Cannot read properties of undefined (reading 'processingEnd') HOT 13
- TypeScript 5.5 compatibility
- Speculation rules can impact on increase values for INP ?
- Missing Cumulative Layout Shift (CLS) metric when batching multiple reports together in a single network request HOT 5
- Add clarification regarding event listener in event batching section
- LCP and CLS fired on interaction HOT 5
- Tgt
- Update LCP attribution to handle the first frames of animated content HOT 3
- INP attribution helper latestProcessingEnd never initialized HOT 1
- Missing LoAF attributions for INP due to violating internal invariants
- Any way to simulate clicks for INP testing? HOT 3
- Identical abstract selectors can be returned as distinct strings HOT 6
- onINP trigger always when browser tab change ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web-vitals.