CLS(Cumulative Layout Shift)を調査する時に使ったツールやサービスをまとめてみた
Google が「Core Web Vitals(コアウェブバイタル)」という新しいWebの指標を2021年以降に導入予定ということで話題になっています．
Core Web Vitals は LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift)の3つに分かれています．
今回は担当している Webサイトの CLS...つまりどれだけレイアウトのズレが発生したのかを調査する時に使ったツールやサービスをまとめようと思います．
Web Vitals
現状のスコアをサクッと知りたい場合は「Web Vitals」というChrome拡張を使えばすぐにわかります． chrome.google.com
インストール後，調査したいページで Web Vitals を押すとスコアが表示されます．CLS はスコアの値がより小さければ良いです．
少し脱線しますがインストールした拡張機能が表示されない場合は拡張機能のマークを選択し，ピンマークを押すと表示されるようになります(地味にここで時間が掛かった笑)．
PageSpeed Insights
Google が提供しているおなじみの Web パフォーマンスツールです．
調べたいWebサイトのURLを入力すると，スコアの他に「累積レイアウト変更」という名前で CLS のスコアと詳細について把握することができます．
Web Vitals Leaderboard
Core Web Vitals を比較できるサービスのようです．つまり自分が担当しているWebサイトと競合でどれだけ差があるのかを比較することができます．
デフォルトでスコアのランキングが1位のWebサイトが載っているため，優秀なサイトを研究したい時にも便利です．
vitals-leaderboard.pazguille.me
Chrome DevTools
Chrome DevTools には以下のように様々な機能があります．
Rendering
Chrome DevTools を起動した状態で「⌘ + Shift + P」を押した後に「Show Rendering」と入力するとRendering ドロワーが候補に表示されるため選択する．
Console ドロワーの隣に Rendering ドロワーが表示されます．そして Layout Shift Regions にチェックを入れます．
ページをリロードし，スクロールするとどの箇所で Layout Shift が発生しているのかを視覚的に把握することができて便利です．
Lighthouse
ちょっと前まで拡張機能を入れないといけなかった Lighthouse が実は Google Chrome に搭載されております．
Chrome DevTools を起動した状態で Lighthouse タブを選択し， 「Generate report」を押すと，測定が始まります．
少し待つと測定結果が表示されます．
「Avoid large layout shifts」を見ると Layout Shift がどの箇所で発生しているのかを要素レベルで調べることができます．どの要素を改善すれば良いのかを調べる時に便利です．
まとめと所感
今回は担当プロダクトの CLS を調査する時に使ったツールやサービスをまとめてみました． 色々と調べてみると．現在この Core Web Vitals について様々な人が試行錯誤をしながら対策している真っ最中な印象を受けました．
ザッと確認したい時は，Web Vitals と PageSpeed Insights, 具体的な対策を取る時は Chrome DevTools など場面によって使い分けています． ちなみに Web Vitals Leaderboard をきっかけに THEGUARDIAN というメディアサイトを知ることができました． CLS のスコアが良く，どのように保っているのかを知るために最近ちょくちょく見てます．
今回は調査についてまとめましたが，実際にやってみた対策についても内容がまとまったタイミングで書いてみようと思います．
追記 2020/11/05
PageSpeed Insights の下の方にサラッと Stack Overflow とメーリングリストのリンクを見つけた．見てみると PageSpeed Insights の使い方についての質問の他にも CLS の改善方法について議論しているようなので，定期的に覗いたり思い切ってコメントしてみよう．
