[tampermonkey] CLS logger using PerformanceObserver

gistfile1.txt

// ==UserScript==
// @name         Cumulative Layout Shift Measure
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Try to improve your CWV score
// @author       @jaesbit
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let CLS = 0;
    const observer = new PerformanceObserver((list) => {
        list.getEntries().forEach((entry) => {
            if (entry.hadRecentInput) { return; } // Ignore shifts after recent input.
            CLS += entry.value;
            if (entry.value < 0.01) { return; } // Ignore small shifts.
            console.log(`[CLS] Layout shift of ${entry.value} at ${entry.startTime} with computed score ${CLS}`);

            entry.sources.forEach((source) => {
                const element = source.node;
                if (element) {
                    console.log('[CLS] Element causing shift:', element);
                }
            });
        });
    }).observe({ type: 'layout-shift', buffered: true });
})();