CLSの基本のき - Speaker Deck

CLSの基本のき

by RyomaShindo

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

5 © 2024 Repro Inc. 5 © 2024 Repro Inc. 先週AWS re:Inventに参加してきました（in ラスベガス) ● 現場の熱量はすごい ● ホスピタリティがすごい ● 英語全然出来ないのでほとんど聞き取れなかったが、聞き続けていたら話すスピードにちょっと慣れた ● AWSのエラい⼈に声かけてもらって話せた ● ネットワーキングでいろんな⼈と話せた ● Cirque du Soleilは最⾼、⼀発でファンになった ● カジノゴリゴリに負けた ● Uberでスマホ落とした ● 航空券を紛失した ● etc

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

11 © 2024 Repro Inc. 11 © 2024 Repro Inc. CLSの仕様 ● 画⾯内に表⽰される要素の位置が変更されるとレイアウトシフトが計測される ● スコアは「画⾯内に占めるシフトが発⽣した割合」と、「移動距離」によって決まる ● 1秒以内の間隔で発⽣したレイアウトシフトはセッション化され(最⼤5秒)、セッション内の累計スコアが最⼤のものが最終的なCLSスコアとなる ○ 例えば2秒毎にレイアウトシフトが発⽣する場合より、まとめて⼀気に発⽣する場合の⽅がスコアは悪化する ● クリックやタップなどの操作により要素が移動する場合は「意図しないレイアウトシフト」ではないので、レポートの対象外となる ○ 実際にユーザーが操作したUIかどうかは関係なく、ユーザー操作の後500ms以内のレイアウトシフトはすべて対象外となる(クリック連打してたらCLSは0になる)

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

14 © 2024 Repro Inc. 14 © 2024 Repro Inc. 計測⽅法: Page Speed Insight ● 実際にChromeでレポートされているフィールドデータが確認できる ○ ここで表⽰されるp75の値がSEOに影響がある（程度については諸説あり） ● ラボデータは割と遅い回線の設定で実⾏されること、スクロールなどの操作はせずFVのみで評価されること、onLoad以降のレイアウトシフトは含まれないことなど、様々な要因で実ユーザーの体験と乖離が発⽣しうるので参考程度に⾒るのが良い ○ Lighthouse APIとPuppeteerを組み合わせてユーザー操作をスクリプト化し、より実ユーザーに近い形でスコアを出すことも可能らしい（未確認）

Slide 15

Slide 15 text

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を使ってレイアウトシフトを計測出来る。

Slide 16

Slide 16 text

16 © 2024 Repro Inc. 16 © 2024 Repro Inc. 計測⽅法: Layout Instability API ● すべてのレイアウトシフトが確認出来る ○ ユーザー操作後のレイアウトシフトもエントリとして⼊り、その場合は hadRecentInput フィールドが true となる ● 移動前後の座標や要素の⼤きさを確認出来る(previousRect, currentRect) ○ 要素が画⾯内から画⾯外に移動した場合はcurrentRectがすべて0になる ○ 要素が画⾯外から画⾯内に移動した場合previousRectがすべて0になる ● 要素の移動や⼤きさの変化を検知するAPIであり、必ずしも実際にCLSを引き起こす要因となった要素がレポートされるわけではない

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

20 © 2024 Repro Inc. 20 © 2024 Repro Inc. 計測⽅法: Web Vitals(Chrome extension) https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmib ma ● Chrome Extensionで結果をオーバーレイ表⽰したり、コンソールに表⽰したり出来る ● ただしCLSに関しては実際の値と乖離するケースがあり、個⼈的には信頼度が低い

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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などを使う

Slide 23

Slide 23 text

23 © 2024 Repro Inc. 23 © 2024 Repro Inc. CLSが発⽣する要因と対策(2) JSによって要素が後から差し込まれるケース ● 基本的には画像と同じく、width, height, min-width, min-height, aspect-ratioが有効 ● JSで差し込まず、サーバー側で差し込む ● キャンペーンバナーのような要素は浮かせる ● 差し込まれる要素をFVに置かない ● 広告は挿⼊される要素の⼤きさが確定しないところが難しい ○ 最⼤ or 最⼩サイズ(or その間)を確保しておく

Slide 24

Slide 24 text

24 © 2024 Repro Inc. 24 © 2024 Repro Inc. CLSが発⽣する要因と対策(3) Web Font利⽤のケース: Web Fontのロードが完了するまでは代替フォントでレンダリングされるため、ロードが完了したときにレイアウトシフトが発⽣しうる ● あんまりいい⽅法はない ○ そもそも使わなくて良いなら使わない ○ とはいえWeb FontがCLSに与える影響は⼩さいケースが多いと思うのであまり気にしなくて良いかも ● preloadしてなるべく早くロードする ● パフォーマンスを優先出来るなら font-display: optional を指定する ○ 初期レイアウト時点で利⽤可能な場合のみ利⽤する ● 利⽤するWeb Fontと近しい代替フォントを指定しておく

Slide 25

Slide 25 text

25 © 2024 Repro Inc. 25 © 2024 Repro Inc. その他の対策 ● BF Cacheをなるべく使えるようにする ● 初期表⽰が出来上がるまでスプラッシュスクリーンで画⾯を隠す ○ CLSは抑えられるが、コンテンツが⾒れるまで遅くなってしまうので推奨しない ● ⼀度にCLSが発⽣しないようにリソースの読み込みタイミングを調整する ● 要素を挿⼊する際はユーザー操作を待ってから挿⼊する

Slide 26

Slide 26 text

Slide 27

Slide 27 text