よりパフォーマンスが計測しやすくなって何より。
Lighthouse で計測することができるCWV（コアウェブバイタル）
2021年よりページエクスペンスシグナルとして Google のランキング要因になる。
Google は関連性や品質を重視しているが、甲斐のようなページエクスペリエンスについても順位を決定するための指針として利用している。
- モバイルフレンドリー
- セーフブラウジング
- HTTPS
- 煩わしいインタースティシャルがない
ここにCWVも加わるかたちになる。
上記もそうだが、もちろん関連性や品質のほうが重要であることに注意。
CWVの指標
いずれもユーザー中心の指標である。
- Largest Contentful Paint (LCP)
ページで最も大きな要素が読み込まれるまでの時間（MVなど）。
感覚的な読み込みスピードを測定する目的がある。
Chrome Developer Tools の Performance のLPC項目で該当ページのLPCを確認することができる。 - First Input Delay (FID)
最初の入力をユーザーが実行できるようになるまでの待機時間（リンクのクリックやボタンのタップなど）。
応答性を測定する目的がある。
後述するラボデータのみ取得できる。 - Cumulative Layout Shift (CLS)
コンテンツの移動、レイアウトのずれを示すスコア（遅延読み込みや広告の表示などで現在のスクロール位置が変わるなどがあると低下する）。
視覚的な安定性を測定する目的がある。
取得できるデータの種類について
2種類あり、意識することで本質を見抜ける。
- Lab data（ラボデータ）
テスト環境でのシミュレーションデータ - Field data（フィールドデータ）
実際のユーザーのデータ。
Lighthouse はラボデータ、PageSpeedInsight はラボデータとフィールドデータ、Search Console とCrUX（Chrome UX Report – Chromeのユーザーデータレポート）はフィールドデータ。
フィールドデータが良好であれば問題ないといえるが、ラボデータが悪ければ悪化する可能性が潜在する。
CLSについて
ちょっとわかりづらいCLSについて、どのような要素がCLSを高くする原因か確認するためには、Chrome Developer Tools の Performance を使用して、「Layout Shift」を確認するとよい。
CLSを高くする原因としては、下記がある。
- 寸法がない画像
- 寸法がない広告、埋め込みコンテンツ、iframe
- 動的に挿入するコンテンツ
- FOIT/FOUTを発生させるウェブフォント
寸法がない類は、width、height の属性を記述するとアスペクト比をブラウザが計算してくれるため、解決できる。
また下記のようなCSSでも対応できる。
img {
aspect-ratio: attr(width) / attr(height);
}広告や動的に挿入する要素については、あらかじめスペースを確保するなどしておくことでCLSが大幅に上がるのを回避できる。
FOIT/FOUTを発生させるウェブフォントについては、<link rel=”preload”>とfont-display: optional; を組み合わせることで解決可能。
その他高速化の手法
- Service Worker を利用したキャッシュ
- 事前接続
<link rel=”preconnect” href=”https://isaxxx.com” />
<link rel=”dns-prefetch” href=”https://isaxxx.com” />