CLSの基本のき

Transcript

1. 1 © 2024 Repro Inc. Repro株式会社 Development Div 新堂凌⿇ CLSの基本のき
2. 2 © 2024 Repro Inc. 2 新堂凌⿇ Repro Boosterという新規事業で開発全般とデータ活⽤ 周りを担当しています。（Looker使ってる⼈いたらぜひ 話したい） 趣味：ゲーム（LoL）、ゴルフ、etc Shindo Ryoma Repro株式会社 Development Div 2 © 2024 Repro Inc. ⾃⼰紹介
3. 3 © 2024 Repro Inc. 3 © 2024 Repro Inc. 早速ですが
4. 4 © 2024 Repro Inc. 4 © 2024 Repro Inc. 先週AWS re:Inventに参加してきました （in ラスベガス)
5. 5 © 2024 Repro Inc. 5 © 2024 Repro Inc. 先週AWS re:Inventに参加してきました （in ラスベガス) • 現場の熱量はすごい • ホスピタリティがすごい • 英語全然出来ないのでほとんど聞き取れなかったが、聞き続けていたら話すスピードに ちょっと慣れた • AWSのエラい⼈に声かけてもらって話せた • ネットワーキングでいろんな⼈と話せた • Cirque du Soleilは最⾼、⼀発でファンになった • カジノゴリゴリに負けた • Uberでスマホ落とした • 航空券を紛失した • etc
6. 6 © 2024 Repro Inc. 6 © 2024 Repro Inc. 本題に戻ります
7. 7 © 2024 Repro Inc. 7 © 2024 Repro Inc. CLSって知ってますか Cumulative Layout Shift（CLS） とは、ユーザーが予期していないタイミングで発⽣するレ イアウト変化（レイアウトシフト）の量をスコア化した指標 image by https://web.dev/articles/cls
8. 8 © 2024 Repro Inc. 8 © 2024 Repro Inc. CLSの重要性 CLSはCore Web Vitalsに含まれ、SEOにも影響がある。 Lighthouse ScoringにおいてはCLSのWeightingが25%も占めている。 image by https://web.dev/articles/vitals
9. 9 © 2024 Repro Inc. 9 © 2024 Repro Inc. CLSの重要性 我々Repro Boosterは表⽰速度を如何に向上させるかに取り組んでいます。が... image by https://repro.io/products/booster/
10. 10 © 2024 Repro Inc. 10 © 2024 Repro Inc. CLSの重要性 総合的なユーザー体験を向上させるためにはCLSも⾮常に重要な要素なんだと今更ながら再 認識している（だってGoogleさんがそう⾔ってる） < ユーザーエクスペリエンスは総合格闘技や
11. 11 © 2024 Repro Inc. 11 © 2024 Repro Inc. CLSの仕様 • 画⾯内に表⽰される要素の位置が変更されるとレイアウトシフトが計測される • スコアは「画⾯内に占めるシフトが発⽣した割合」と、「移動距離」によって決まる • 1秒以内の間隔で発⽣したレイアウトシフトはセッション化され(最⼤5秒)、セッション 内の累計スコアが最⼤のものが最終的なCLSスコアとなる ◦ 例えば2秒毎にレイアウトシフトが発⽣する場合より、まとめて⼀気に発⽣する場 合の⽅がスコアは悪化する • クリックやタップなどの操作により要素が移動する場合は「意図しないレイアウトシフ ト」ではないので、レポートの対象外となる ◦ 実際にユーザーが操作したUIかどうかは関係なく、ユーザー操作の後500ms以内の レイアウトシフトはすべて対象外となる(クリック連打してたらCLSは0になる)
12. 12 © 2024 Repro Inc. 12 © 2024 Repro Inc. 計測⽅法 • Page Speed Insight • Layout Instability API • Web Vitals(JS Library) • Web Vitals(Chrome extension) • etc
13. 13 © 2024 Repro Inc. 13 © 2024 Repro Inc. 計測⽅法: Page Speed Insight Chrome UX Reportに収集されているフィールドデータと、その場でPSIのサーバーからアク セスしてスコアリングするラボデータが確認出来る。
14. 14 © 2024 Repro Inc. 14 © 2024 Repro Inc. 計測⽅法: Page Speed Insight • 実際にChromeでレポートされているフィールドデータが確認できる ◦ ここで表⽰されるp75の値がSEOに影響がある（程度については諸説あり） • ラボデータは割と遅い回線の設定で実⾏されること、スクロールなどの操作はせずFVの みで評価されること、onLoad以降のレイアウトシフトは含まれないことなど、様々な要 因で実ユーザーの体験と乖離が発⽣しうるので参考程度に⾒るのが良い ◦ Lighthouse APIとPuppeteerを組み合わせてユーザー操作をスクリプト化し、より 実ユーザーに近い形でスコアを出すことも可能らしい（未確認）
15. 15 © 2024 Repro Inc. 15 © 2024 Repro Inc. 計測⽅法: Layout Instability API new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('Layout shift:', entry); } }).observe({type: 'layout-shift', buffered: true}); PerformanceObserverを使ってレイアウトシフトを計測出来る。
16. 16 © 2024 Repro Inc. 16 © 2024 Repro Inc. 計測⽅法: Layout Instability API • すべてのレイアウトシフトが確認出来る ◦ ユーザー操作後のレイアウトシフトもエントリとして⼊り、その場合は hadRecentInput フィールドが true となる • 移動前後の座標や要素の⼤きさを確認出来る(previousRect, currentRect) ◦ 要素が画⾯内から画⾯外に移動した場合はcurrentRectがすべて0になる ◦ 要素が画⾯外から画⾯内に移動した場合previousRectがすべて0になる • 要素の移動や⼤きさの変化を検知するAPIであり、必ずしも実際にCLSを引き起こす要因 となった要素がレポートされるわけではない
17. 17 © 2024 Repro Inc. 17 © 2024 Repro Inc. Layout Instability APIの詳細 「要素の移動や⼤きさの変化を検知するAPIであり、必ずしも実際にCLSを引き起こす要因と なった要素がレポートされるわけではない」とは A B A B 要素Bがエントリに入る 要素Bが移動した
18. 18 © 2024 Repro Inc. 18 © 2024 Repro Inc. Layout Instability APIの詳細 「要素の移動や⼤きさの変化を検知するAPIであり、必ずしも実際にCLSを引き起こす要因と なった要素がレポートされるわけではない」とは B A B 要素Aの挿入によって要素 Bが移動した この場合もエントリに入るのは要素 B （要素Aはレイアウトシフトではない）
19. 19 © 2024 Repro Inc. 19 © 2024 Repro Inc. 計測⽅法: Web Vitals(JS Library) https://github.com/GoogleChrome/web-vitals • ⾃サイトのRUMを収集したいならこれで良い
20. 20 © 2024 Repro Inc. 20 © 2024 Repro Inc. 計測⽅法: Web Vitals(Chrome extension) https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmib ma • Chrome Extensionで結果をオーバーレイ表⽰したり、コンソールに表⽰したり出来る • ただしCLSに関しては実際の値と乖離するケースがあり、個⼈的には信頼度が低い
21. 21 © 2024 Repro Inc. 21 © 2024 Repro Inc. 計測⽅法: おまけ ⌘ + Shift + P -> Show Rendering -> Layout Shift Regions を有効にするとレイアウトシフト が発⽣した要素が視覚的に分かるようになるので便利なときがある
22. 22 © 2024 Repro Inc. 22 © 2024 Repro Inc. CLSが発⽣する要因と対策(1) 画像に⾼さや幅の指定がないケース • width, heightを指定出来るのであれば指定する • 何らかの理由で上記が決定できない場合、min-width, min-heightを指定するでも良い ◦ レイアウトシフトを0に出来ずとも、影響を⼩さくする ◦ メディアクエリも組み合わせるとなお良い • レスポンシブ対応のため width: 100%, height: auto のようなケースでは aspect-ratio プ ロパティでアスペクト⽐を予め伝えると、⾼さを確保してくれる ◦ ただし親要素のスタイル次第では⾼さを確保してくれないケースもあるので、その 場合はmin-heightなどを使う
23. 23 © 2024 Repro Inc. 23 © 2024 Repro Inc. CLSが発⽣する要因と対策(2) JSによって要素が後から差し込まれるケース • 基本的には画像と同じく、width, height, min-width, min-height, aspect-ratioが有効 • JSで差し込まず、サーバー側で差し込む • キャンペーンバナーのような要素は浮かせる • 差し込まれる要素をFVに置かない • 広告は挿⼊される要素の⼤きさが確定しないところが難しい ◦ 最⼤ or 最⼩サイズ(or その間)を確保しておく
24. 24 © 2024 Repro Inc. 24 © 2024 Repro Inc. CLSが発⽣する要因と対策(3) Web Font利⽤のケース: Web Fontのロードが完了するまでは代替フォントでレンダリングさ れるため、ロードが完了したときにレイアウトシフトが発⽣しうる • あんまりいい⽅法はない ◦ そもそも使わなくて良いなら使わない ◦ とはいえWeb FontがCLSに与える影響は⼩さいケースが多いと思うのであまり気に しなくて良いかも • preloadしてなるべく早くロードする • パフォーマンスを優先出来るなら font-display: optional を指定する ◦ 初期レイアウト時点で利⽤可能な場合のみ利⽤する • 利⽤するWeb Fontと近しい代替フォントを指定しておく
25. 25 © 2024 Repro Inc. 25 © 2024 Repro Inc. その他の対策 • BF Cacheをなるべく使えるようにする • 初期表⽰が出来上がるまでスプラッシュスクリーンで画⾯を隠す ◦ CLSは抑えられるが、コンテンツが⾒れるまで遅くなってしまうので推奨しない • ⼀度にCLSが発⽣しないようにリソースの読み込みタイミングを調整する • 要素を挿⼊する際はユーザー操作を待ってから挿⼊する
26. 26 © 2024 Repro Inc. 26 © 2024 Repro Inc. １つ１つの対策は簡単なものが多いので、⼀度⾒直してみてはいかがでしょうか
27. 27 © 2024 Repro Inc. 27 © 2024 Repro Inc. Appendix • Cumulative Layout Shift（CLS） • Cumulative Layout Shift の最適化 • レイアウト シフトをデバッグする • CSS の aspect-ratio プロパティ • Lighthouse のユーザーフロー