Comments (3)
Finished Audit. Looks like although image paints are measured until presentation time, even after input or scroll, those times end up discarded. The LCP calculator uses the main thread InputOrScroll time as the last point to capture recorded LCP times.
from web-vitals.
Specifically, I'm wondering about cases where a large image is still loading, or still decoding.
I'm not sure there's a good answer here. Think of the following edge cases:
- The in-flight image is half off-screen. The user scrolls while it's still loading and it's completely on-screen now and is larger than the previous LCP. Should that be the new LCP even though it occurred after user input when the LCP element was still on screen? I'd argue not (and it wouldn't have been if the user had waited a little longer to scroll).
- Similarly an in-flight off-screen image that is loaded (either because of no lazy loading, or within lazy-loading viewport thresholds) can now be eligible.
- Or imagine the reverse where an image is inflight and is going to be the LCP element but then the user screens down and nothing is painted. In this case the LCP entry would presumably not fire? But if you're saying in-flight resources should be eligible than that seems kinda inconsistent.
So I'm not sure the PO should fire in these cases, and that the web-vitals.js logic isn't the correct one to go with...
from web-vitals.
I think you may have misunderstood my question-- I'm just saying that Chrome has already decided on answers to these questions and web-vitals shouldn't be making different decisions.
Even if we want to change the answers, we should still try to synchronize.
I don't for sure yet if it differs, that's why I would like a (quick?) audit!
Here's what I think happens today:
- images which have already been rendered (I mean on the main thread stage of rendering) and
- have already been marked as lcp candidates, and
- we are still waiting for their presentation times as they get decoded...
I believe you are effectively guaranteed to get a next presentation time for that image, and an element timing / LCP entry for it, even if you scroll. That is because there is already a main-thread rendering update in the rendering pipeline and the presentation time will be the time that update is included in a screen update. I don't believe we necessarily track if the image was still within viewport at that point.
In other words, I suspect the LCP-halt-on-interaction heuristics stops new candidates from being queued up for measurement, rather than stopping LCP results from being added to timeline.
Not sure!
from web-vitals.
Related Issues (20)
- Expose ability to reset internal state of metrics (specifically INP) HOT 2
- v4 INP attribution ending processingEnd time in the wrong animation frame HOT 8
- CDN JS - Web server is returning an unknown error HOT 4
- CLS and INP are being calculated incorrectly HOT 2
- Suggestion to track all attributions HOT 4
- CLS being reported due to filter CSS transition HOT 3
- Firefox e2e tests flakey HOT 3
- 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
- Heads Up on Changes to INP Measurement When Interfered with JS Modal Dialogs HOT 9
- TypeError: Cannot read properties of undefined (reading 'processingEnd') HOT 13
- TypeScript 5.5 compatibility
- Speculation rules can impact on increase values for INP ? HOT 1
- 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
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.