Code Monkey home page Code Monkey logo

Comments (6)

rviscomi avatar rviscomi commented on May 18, 2024

Not sure if this is extension-specific or a general issue with web perf APIs in Chrome. One thing to check is if these tabs are loaded in the background, in which case things like painting and layout might not actually be happening. Addy do you know how reliable LCP and CLS are when the tab is backgrounded?

Edit: Oh, if the results are in the drill-down then that means the APIs are already returning data. So this seems like a race condition of some kind for the badge.

Here's a simple way to reproduce the issue:

  1. open a new tab and navigate to https://github.com/GoogleChrome/web-vitals-extension/issues, the badge should show results (green for me)
  2. go back to this page, right click the new tab and reload
  3. the /issues tab badge should now be gray and expanding it reveals that metrics like LCP and CLS are finalized

from web-vitals-extension.

rviscomi avatar rviscomi commented on May 18, 2024

The issue seems to be with this if statement in the chrome.tabs.onUpdated event listener:

if (
changeInfo.status == "complete" &&
tab.url.startsWith("http") &&
tab.active
) {
getWebVitals(tabId);
}

When a tab is loaded in the background, its status will be complete, its URL will start with http, but its active property will not be true.

There is a chrome.tabs.onActivated event, but it fires for every time a tab becomes visible, even after it's already been active once before. It may not be a big deal to call getWebVitals on every activation change, or we can keep track of tabs that have already been activated and get their vitals only once per page load.

from web-vitals-extension.

addyosmani avatar addyosmani commented on May 18, 2024

Thanks for digging in to some of the racy behavior with badging, Rick!

When a tab is loaded in the background, its status will be complete, its URL will start with http, but its active property will not be true.

Good catch!

It may not be a big deal to call getWebVitals on every activation change, or we can keep track of tabs that have already been activated and get their vitals only once per page load.

I'm leaning towards the first option (calling on each activation change) but keeping in mind tracking tabs already activated and getting their vitals only once per page load as an option in our back-pocket should we need it.

That said, do you have a personal preference between the two options?

from web-vitals-extension.

rviscomi avatar rviscomi commented on May 18, 2024

I've been testing the extension with the first option and it seems to fix this particular issue, but introduces a new class of issues like #7. Also, metrics seem to be stuck as "not final".

There don't seem to be any negative side-effects of calling getWebVitals on each activation change.

from web-vitals-extension.

rviscomi avatar rviscomi commented on May 18, 2024

Could/should this be closed now that #8 is merged? Anything else you want to do to improve consistency?

from web-vitals-extension.

addyosmani avatar addyosmani commented on May 18, 2024

I think we should go ahead and close this one. If we notice folks are experiencing badging and inconsistency of any sort, we can file a new bug :)

from web-vitals-extension.

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.