Cumulative Layout Shift (CLS) をJavaScriptで検出する

はじめに

これまで、DevToolsのPerformanceタブからレイアウトシフトを確認していました。ですが、これだと目視する必要がある上に自動化できません。調べてみると、Layout Instability APIが見つかったのでそれの覚書です。

※PageSpeed Insightsでも確認できますが、ページ読み込み時のみです。
　レイアウトシフトの計測期間は、ページのライフサイクル全体であるため、ページ読み込み時のみでは不足です。

CLSの検出コード

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {      // 500ms以内にユーザー入力が発生していない
      cls += entry.value;             // レイアウトシフトを累積する
      console.log(new Date().toISOString(), entry.entryType, cls, entry.value, entry);
    } else {
      // ユーザー入力によるレイアウトシフト
      //console.log(new Date().toISOString(), entry.entryType, 'user input', cls, entry.value, entry);
    }
  }
}).observe({type:'layout-shift', buffered:true});

※entry.sourcesで移動要素の領域の変化を確認できます

対応状況

2021年1月現在は、ChromeとEdgeなどのChromium系のブラウザが対応済みです。

思いつく使用用途

  • ブックマークレットなどによる手動での確認
  • ローカル環境の自動テスト
  • ページ解析（google analyticsなど）でのCSLの収集

参考