Code Monkey home page Code Monkey logo

Comments (3)

mmocny avatar mmocny commented on September 20, 2024 2

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.

tunetheweb avatar tunetheweb commented on September 20, 2024

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.

mmocny avatar mmocny commented on September 20, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.