Open iwindfree opened 1 year ago
Hello @iwindfree
I have few questions:
One way to try to find out what's happening you plug this script on your page via https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en and to observe what's happening in the browser's console:
let clsValue = 0;
let clsEntries = [];
let sessionValue = 0;
let sessionEntries = [];
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
// Only count layout shifts without recent user input.
if (!entry.hadRecentInput) {
const firstSessionEntry = sessionEntries[0];
const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
// If the entry occurred less than 1 second after the previous entry and
// less than 5 seconds after the first entry in the session, include the
// entry in the current session. Otherwise, start a new session.
if (sessionValue &&
entry.startTime - lastSessionEntry.startTime < 1000 &&
entry.startTime - firstSessionEntry.startTime < 5000) {
sessionValue += entry.value;
sessionEntries.push(entry);
} else {
sessionValue = entry.value;
sessionEntries = [entry];
}
// If the current session value is larger than the current CLS value,
// update CLS and the entries contributing to it.
if (sessionValue > clsValue) {
clsValue = sessionValue;
clsEntries = sessionEntries;
// Log the updated value (and its entries) to the console.
console.log('CLS:', clsValue, clsEntries)
}
}
}
}).observe({type: 'layout-shift', buffered: true});
Script take from: https://web.dev/cls/
Thanks for providing good open source. I added continuity plugin to try to measure WebVitalScore. I am using page load beacon to get lcp, fid values. but cls seems to occur even after the page is loaded, so I set the afterOnload option to true in the continuity plugin option and trying to get the value from the 'interaction' beacon or page unload beacon. I wonder if this method is correct? At the time of page load, cls was not measured a lot, so I thought about this method. Additionally, the http.initiator value is empty in the page unload beacon, but I wonder if this is correct.