Comments (7)
A follow-up for the folks that may uncover this later. We did manage to improve how our analytics is sending beacons when the page is unloading and we're seeing much better reporting for CLS. Here's our current reporting numbers for page views which seem fairly in line with Philip's:
FID: 39%
CLS: 93%
LCP: 79%
Thanks again, Philip.
from web-vitals.
How are you sending the data to your analytics server. And what analytics tool are you using?
from web-vitals.
We POST events using a custom tool. This tool has been in production for a long time and we consider it stable. For example, we also send an event for page load time after the onload event is triggered and that reports for ~97% of page views. Some of the missing 3% is probably due to bounces or users leaving pages before the onload event is triggered, and possibly issues with some insignificant browsers/webviews. But I think that's a good example of the stability in our event tracking system.
Do you have some advice for how/when we should be POST'ing the CWV metrics?
from web-vitals.
Are you using navigator.sendBeacon()
to send the data? I suspect your tool is stable when trying to send the data while the page is open, but if you try to send the data while the page is unloading, the POST requests aren't being reliably sent.
The navigator.sendBeacon()
method (older but well supported), as well as fetch()
method with the keepalive
flag set (newer, only in Chromium) are both APIs specifically designed to handle this problem. That is, reliably send HTTP requests from a page that's actively being unloaded.
In the case of Web Vitals, since CLS is tracked during the entire page lifecycle, it invokes its callbacks in the visibilitychange
event, which can happen either when a user changes tabs or when a user closes a tab or navigates away.
from web-vitals.
Thanks for the help @philipwalton! It appears that our tracking library is using sendBeacon
. We also found that mobile is reporting a lot less than desktop. I'll close this out and work with our tracking team to see if we can't improve upon sending events when the page is exiting.
One last question for you and anyone else that's listening, which might help us better understand what we should work toward: In your experience using other analytics libraries, do you know the percentage of page views that CLS and FID typically report on?
from web-vitals.
I wouldn't necessarily expect the number of pageviews to always line up exactly with the number of CLS beacons received. Here are a few things that could account for the difference.
- If your site is an SPA, you'll probably have pageviews for URLs that aren't page loads (same thing for bfcache restores). If you're tracking page loads, specifically, then yes the numbers should be closer.
- CLS is measured using an API (Layout Instability) that's fairly new and at this point is only supported in Chromium-based browsers (e.g. Chrome, Edge, Samsung Internet, Opera, etc.), so you'd only want to compare page loads from just those browsers and filter by just the more recent versions.
- The end of a page lifecycle isn't always observable, e.g. the user go on airplane mode or otherwise not have network when they close a page.
- The
visibilitychange
event (while the best we currently have) isn't 100% guaranteed to fire in all cases, and of course there are browser bugs (see discussion here).
As for what results you can expect to see in the real world? I can only speak for myself. I use this library to measure Web Vitals on my personal website and here's how my numbers break down, when comparing the counts for each metric to the number of recorded page loads:
- CLS: 82%
- LCP: 69%
- FID: 35%
Note that I would expect CLS to be recorded at higher rates than LCP and FID since both of those metrics will not report for pages loaded in the background. CLS, though, in theory should always have a value, and I agree that an 18% miss rate (what I see on my site) is less than ideal.
from web-vitals.
Thank you, that's very helpful. It looks like our FID and LCP mostly match, so I'm not too concerned there. I'll look deeper into how our analytics tool is forwarding CLS.
from web-vitals.
Related Issues (20)
- attribution typescript error HOT 13
- onTTFB woes with iOS HOT 1
- Interaction count estimate seems flaky HOT 2
- Playwright : document is not defined HOT 1
- Target in FID and INP is null HOT 15
- page.evaluate: ReferenceError: _webVitals is not defined in Playwright
- Consider escaping selectors HOT 5
- Metric Rating Thresholds not included in attribution builds HOT 1
- Cannot see logs in console HOT 1
- Attribution debug target is truncated HOT 1
- Attribution FID eventTarget is empty for SVG elements HOT 2
- All website open easily workout
- INP may be a bit extreme for content that has a slower reaction time by design HOT 6
- v3.3.2 throw error in IE9. HOT 3
- 3.3.2: type errors using attribution callbacks HOT 6
- INP attribution eventTarget is empty HOT 2
- unbind onCLS listeners HOT 6
- why does onCLS return non CLS metrics? HOT 5
- asynchronous loading from CDN HOT 2
- consider adding user-like code that can be type checked HOT 2
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.