累積レイアウトシフト（CLS）をJavaScriptで計測する 💻

いままで、サーチコンソールで計測していたので、開発中はどうやって計測しようか悩んでいたのですが、JavaScriptで計測できることを知りました。

search.google.com

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

こちらのコードを実行するだけでOKです。すごい。

詳しくは こちらのページ にまとまっていました。

web.dev