Comments (3)
I'm concerned that the CLS will not trigger by default until a user has navigated a few times in a SPA... wouldn't that throw off the value significantly?
As currently defined, CLS doesn't treat SPAs differently from any other web page. CLS measures layout shifts that occur throughout the entire lifecycle of a page, regardless of whether that page updates the URL.
So to answer your question, no, navigating in an SPA does not throw off the value of CLS; though (depending on how the SPA is loading new content) it could mean that a page that a user keeps open for a long time may end up with higher CLS than it would have if it had used traditional page loads. On the other hand (again, depending on how the site is built), an SPA may also end up with less CLS in cases where most of the layout shifts happen during page load.
The main reason for incorporating this into our application is to track user experience on first load. So in that sense I feel like I'd prefer CLS to have a way of returning the current shift value when called (after DOM load in our case) which obviously hopefully would be a value of 0
I understand why you'd want this, but I want to stress that what you're describing is not CLS. If you do want to track this data, I'd recommend calling it something else to avoid confusion (e.g. "pre-load layout shift" or "CLS before load", etc.).
Also, while it's possible to track CLS before load using this library, it gets a bit tricky because PerformanceObserver
callbacks are not always called right away (to avoid them affecting performance), so you can't necessarily guarantee that all callback have run by the time the load event fires.
For example, this (using the reportAllChanges
param) will be close but might not be 100% accurate:
import {getCLS} from 'web-vitals';
let clsBeforeLoad = 0;
getCLS((metric) => {
clsBeforeLoad = metric.value;
}, true);
addEventListener('load', () => {
// `clsBeforeLoad` here might not have the latest entries.
console.log(clsBeforeLoad);
});
If you need precision, you're better off not using this library and just using the underlying Layout Instability API directly:
let clsBeforeLoad = 0;
function onLayoutShiftEntry(entry) {
// Only count layout shifts without recent user input.
if (!entry.hadRecentInput) {
clsBeforeLoad += entry.value;
}
}
const po = new PerformanceObserver((list) => {
list.getEntries().map(onLayoutShiftEntry);
});
po.observe({'layout-shift', buffered: true});
addEventListener('load', () => {
// Calling `takeRecords()` gives you access to any undispatched entries in the load event.
po.takeRecords().map(onLayoutShiftEntry);
console.log(clsBeforeLoad);
});
from web-vitals.
I'm going to close this issue as I don't think there are any changes that need to be made to the library to address this.
from web-vitals.
Maybe interesting thread about Web Vitals in combination with ranking factors (coming in May 2021): https://twitter.com/simonhearne/status/1316775506222682112
from web-vitals.
Related Issues (20)
- INP retuning same data each interaction
- LCP monitoring can add to click/keyboard event handler HOT 4
- [INP] attribution should include all events from the same long animation frame
- [LCP] Audit if eager stop of LCP is correct for cases where LCP is in-flight HOT 3
- [Question] Support for safari - desktop / mobile HOT 1
- @rafeerahman I think it would be better to implement the new redesign for the wrapper template in another PR so that this one can focus on the new template. Not sure if UX answered yet.
- Look at this... 👀
- Unable to use navigationType == 'back_forward' to determine whether the page is loaded using bfcache. HOT 7
- New Ideas on Timing for Data Collection and Metric Reporting HOT 2
- Add redirect time to TTFB breakdown HOT 5
- Add flag to show whether intrasite navigation HOT 1
- Consider adding `deliveryType` support HOT 1
- The threshold values for each indicator are set the same for both desktop and mobile devices. Is this reasonable? HOT 4
- onINP: PerformanceEventTiming is not defined in Firefox 88-
- LCP and CLS report callback are significantly delayed HOT 5
- [Question] Why is FCP not an attribution for LCP? HOT 4
- Why is onCLS firing late HOT 1
- Type 'XXXMetricWithAttribution' is not assignable to type 'MetricWithAttribution'
- %s
- %s
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.