asynchronous loading from CDN

[huanghairong2312]

Web Vitals provides an asynchronous loading method from CDN. My question is:

1. Compared with synchronous loading, whether the web values obtained by asynchronous loading are the same as those obtained by synchronous loading.

2. In the method provided by web Vitals, can we directly obtain the cls value using onCLS as an example? Instead of using callback functions. Because after asynchronously loading web-vitals from CDN, we hope to directly read the data in web-vitals, and then report the log once for the entire page.

   
   var webVitalsScript = document.createElement('script');
   webVitalsScript.src = 'http://*****/web-vitals.umd.js';
   document.head.appendChild(webVitalsScript);

// I hope get web-vitlas values for example:

var cls = window.webVitals.cls(); var lcp = window.webVitals.lcp(); ……

ajax.post('http://******/post',{ cls: cls, lcp: lcp })

[tunetheweb]

There is no way of directly calling window.webVitals.cls(). This is because the value of CLS (and the other metrics) can change throughout the lifetime of the page (as more shifts happen).

In fact a large part of the purpose of the web vitals library is to ingrain best practices of when best to take the measurements. LCP is only emitted when it's finalised (a click happens, or a scroll happens), and CLS is only emitted when the page is navigated away from (with the slight caveat that it's also emitted on page hide as pages are often not "unhidden" so this is the best way of ensuring this is captured).

So there is no synchronous methods, as these are not the correct way of measuring Core Web Vitals.

[tunetheweb]

To answer your first question:

Compared with synchronous loading, whether the web values obtained by asynchronous loading are the same as those obtained by synchronous loading.

As the page uses performance observers with the buffered flag historical values are picked up (though there are limits as to how long they are kept - typically 200 entries) so loading synchronously is not needed (nor recommended since it can slow the page load).