View CLS performance entries

explainCLS.js

(new PerformanceObserver((list) => {
    const entries = list.getEntriesByType('layout-shift');
    entries.forEach((/*LayoutShift*/entry) => {
        console.log(entry);
        const /*Array<LayoutShiftAttribution>*/sources = entry.sources || [];
        const changes = [];
        for (const source of sources) {
            const { currentRect: cr, previousRect: pr, node } = source;
            const dx = cr.x - pr.x;
            const dy = cr.y - pr.y;
            const ds = cr.width * cr.height - pr.width * pr.height;
            changes.push({dx, dy, ds, node});
        }
        if (changes.length) {
            console.table(changes);
        }
    });
})).observe({ type: 'layout-shift', buffered: true });