Comments (1)
Hello @iwindfree
I have few questions:
- What version of Boomerang JS do you use?
- Could you share an example Beacon payload that you send to your system that collects Boomerang metrics?
- Do you have the a public instance website where you run Boomerang? It will be great if we can take a look.
- Are you sure that CLS is the metric that doesn't get reported? A page often experiences CLS before the page load. Could it be that you mean FID?
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/
from boomerang.
Related Issues (20)
- How does the Cache-Reload Plugin works HOT 3
- API Key Disclosure HOT 2
- how about to move Plugins to webworker
- Integrate Plugins into asynchronous loader snippet HOT 5
- Continuity Visually Ready (c.tti.vr) gradually increased in Chromium 105 and 106 HOT 3
- What event should I subscribe to to know when the fetch is complete HOT 2
- t_done,t_page and rt.tt values are negative on SPA HOT 21
- Global collision issue HOT 2
- How to know user spent time on page HOT 6
- soft navigation not stop
- disable page unload beacon HOT 2
- Potential forced style layout HOT 5
- What is the use of the last_location function in spa plugin HOT 2
- SPA beacon is blocked if link href value is updated after soft navigation HOT 2
- Increment in TTI value for long task
- Critical vulnerabilities in the project HOT 2
- I am getting metrics in web page but I need to use a plugin and send it to opentelemetry collector how to do that HOT 4
- restiming entries not added to beacon on xhr_load
- Any chance we can have a new release? HOT 3
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 boomerang.