new PerformanceObserver((list) => { for (const {value, startTime, sources} of list.getEntries()) { // Log the shift amount and other entry info. console.log('Layout shift:', {value, startTime}); if (sources) { for (const {node, curRect, prevRect} of sources) { // Log the elements that shifted. console.log(' Shift source:', node, {curRect, prevRect}); } } } }).observe({type: 'layout-shift', buffered: true});
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter