Comments (6)
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:
- open a new tab and navigate to https://github.com/GoogleChrome/web-vitals-extension/issues, the badge should show results (green for me)
- go back to this page, right click the new tab and reload
- the /issues tab badge should now be gray and expanding it reveals that metrics like LCP and CLS are finalized
from web-vitals-extension.
The issue seems to be with this if statement in the chrome.tabs.onUpdated
event listener:
web-vitals-extension/extension/src/bg/background.js
Lines 58 to 64 in c4df78a
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.
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.
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.
Could/should this be closed now that #8 is merged? Anything else you want to do to improve consistency?
from web-vitals-extension.
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)
- INP still says “waiting for user input” even after I clicked / typed HOT 11
- Add more logging for interactions HOT 2
- Upgrade to the latest web-vitals.js attribution build HOT 7
- Upgrade to Manifest v3
- Add measures and logging for LCP diagnostics HOT 1
- Warn when CWV antipatterns are detected HOT 2
- Link to the Options page from the UI HOT 1
- Rename `master` branch to `main` HOT 1
- DevTools bfcache tester incompatible with extension HOT 2
- Spurious errors are reported when navigating to chrome:// URLs
- Unable to turn on Console Logging for Incognito Mode HOT 1
- [Feature request] Add whitelist for console logging HOT 3
- webvitals query HOT 1
- Add FCP metric
- Updates for listing in Chrome Web Store for next release.
- Why is there no web-vitals option in devtools' performance, and display the web-vitals value in timing? HOT 1
- Wrong CLS detection of elements with no opacity HOT 2
- High INP on link drag and click HOT 2
- /
- https://developers.google.com/profile/u/113452284715201417289/saved-pages?authuser=1 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-extension.