Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Core Web Vitalsについて

Core Web Vitalsについて

ユウト

July 01, 2023
Tweet

More Decks by ユウト

Other Decks in Programming

Transcript

  1. Core Web Vitals改善すると • SEOの向上 ◦ GoogleがUXを大事にしている • 遅いページなんて見たくない! ◦

    なるべく早くページが見たい ◦ クリックしたらなるべく早く動いて欲し い! ◦ クリックしようとしていきなりずれたら困 る!
  2. 「画面上で最も大きいコンテンツ要素が  表示されるまでの時間」 考慮される要素 • <img> 要素 • <svg> 要素内の <image>

    要素 • <video> 要素 (ポスター画像が使用されます ) • url() 関数を介して読み込まれた背景画像が含まれて いる要素 • テキストノードやその他のインラインレベルのテキスト 要素の子要素を含む ブロックレベル要素 Largest Contentful Paint (LCP)とは
  3. CLSを最適化する CLS低下の原因 • サイズ指定のない画像 • サイズ指定のない 広告 / 埋め込み要素 /

    iframe • 動的に挿入されたコンテンツ 画像のデフォルトのアスペクト比を画像の width と height 属性に基づいて設定する
  4. • Largest Contentful Paint (LCP) • Cumulative Layout Shift (CLS)

    • First Input Delay (FID) • Interaction to Next Paint (INP) まとめ