webvitals.js

let o_cls = 0,
    o_lcp = 0;

const observerFirstInput = new PerformanceObserver(function(list) {
    list.getEntries().forEach(function (entry) {
        beacon.add('fid', entry.processingStart - entry.startTime); // Observer First Input Delay
    });
});

const observerLayoutShift = new PerformanceObserver(function(list) {
    list.getEntries().forEach(function (entry) {
        if (!entry.hadRecentInput) {
            o_cls += entry.value;
            beacon.add('cls', o_cls); // Observer Cumulative Layout Shift
        }
    });
});

const observerLargetsContentfulPaint = new PerformanceObserver(function(list) {
    list.getEntries().forEach(function (entry) {
        if (o_lcp < entry.startTime) {
            o_lcp = entry.startTime;
            beacon.add('lcp', Math.round(o_lcp)); // Observer Largest Contentful Paint
        }
    });
});

try{
    observerFirstInput.observe({ type: 'first-input', buffered: true });
    observerLayoutShift.observe({ type: 'layout-shift', buffered: true });
    observerLargetsContentfulPaint.observe({ type: 'largest-contentful-paint', buffered: true });
} catch (e) {
    // Do nothing if the browser doesn't support this API.
}