test

1. Copyright ©️ NERD
Core Web Vitalとは？
NERD 株式会社
2021年度

2. Copyright ©️ NERD
目次
● そもそもSEOとは？ ← 割愛します
● Web VitalsとCore Web Vitalsとは
● Core Web Vitalsの計測方法
● Core Web Vitalsの改善方法

3. Copyright ©️ NERD
Core Web Vitalsとは
01

4. Copyright ©️ NERD
「Core Web Vitals」の前に
そもそも 「Web Vitals」とは？
Core Web Vitalsとは

5. Copyright ©️ NERD
Core Web Vitalsとは
「Web Vitals」とはGoogleが設定している、
サイトの健全性を示す重要指標のことを指します。

6. Copyright ©️ NERD
Core Web Vitalsとは
Web Vitals

7. Copyright ©️ NERD
Core Web Vitalsとは
「Web Vitals」の中でも特に重要な３つの指標を
「Core Web Vitals」と言います。

8. Copyright ©️ NERD
Core Web Vitalsとは
Web Vitals

9. Copyright ©️ NERD
CLS
Cumulative Layout
Shift
Core Web Vitalsとは
ページの
読み込み速度 インタラクティブ性
読み込み時の
ページの安定性
LCP
Largest
Contentful Paint
FID
First
Input
Delay

10. Copyright ©️ NERD
LCP（Largest Contentful Paint）
LCPはページの中で最も大きなコンテンツ（画像またはテキスト
ブロック）のレンダリング時間を指します。

11. Copyright ©️ NERD
LCPと似た指標にFCP（First Contentful Paint）という
「何かしらのコンテンツが表示される時間」を指す
指標もあります。
しかしFCPはあまり重要ではなく、
読み込み速度の観点ではLCPだけを見ればOKです。
LCP（Largest Contentful Paint）

12. Copyright ©️ NERD
LCP（Largest Contentful Paint）
初回に表示される要素が、そのページにとって
重要でなくともFCPとして計測される。
ユーザーにとって重要ではない指標
なので、Googleも重要視しない

13. Copyright ©️ NERD
FID（First Input Delay）は直訳すると
「最初の入力を受け付けるまでの遅延」となり、
ユーザーが最初にページ上のボタンやリンクをタップもしくはクリッ
クしてからブラウザが応答できるようになるまでの時間のことです。
FID（First Input Delay）

14. Copyright ©️ NERD
CLS (Cumulative Layout Shift) は
読み込みに応じて発生するレイアウトのずれのことです。
CLS（Cumulative Layout Shift）

15. Copyright ©️ NERD
最悪のCLSの例
CLS（Cumulative Layout Shift）

16. Copyright ©️ NERD
CLS（Cumulative Layout Shift）

17. Copyright ©️ NERD
CLS（Cumulative Layout Shift）
CLSの計算式
viewport内での（影響を受けた面積）×（移動した距離）

18. Copyright ©️ NERD
CLS（Cumulative Layout Shift）
ボタンの大きさは
viewportの15%
↓つまり
緑背景のテキスト部分が
移動した距離は0.15
viewportの50%
の位置で出現

19. Copyright ©️ NERD
（影響を受けた面積）×（移動した距離）なので
CLS = 0.5*0.15 = 0.075 と計算されます。
CLS（Cumulative Layout Shift）

20. Copyright ©️ NERD
Core Web Vitals
Core Web Vitalsの
基準となる数値

21. Copyright ©️ NERD
Core Web Vitalsで高得点を出すことのメリット
Core Web Vitals

22. Copyright ©️ NERD
Core Web Vitalsは
SEOでランキング要因となる
（2021年5月のアルゴリズムアップデート以降）
Core Web Vitals

23. Copyright ©️ NERD
Core Web Vitalsの測定方法
02

24. Copyright ©️ NERD
Page Speed InsightsからURLを指定すると計測することができます。
https://developers.google.com/speed/pagespeed/insights/
Core Web Vitalsの測定方法

25. Copyright ©️ NERD
Core Web Vitalsの改善方法
03

26. Copyright ©️ NERD
LCPの改善方法
● JavaScript・CSS
○ ファイルをminifyする
○ 使用されていないファイルは削除する
○ 初期の読み込みに必要でないものファイルは非同期で読み込む
● 画像
○ ファイルサイズが大きい画像は縮小する
○ （可能な部分は）CDNを利用して配信する
○ 重要なリソースをプリロードする
Core Web Vitalsの改善方法

27. Copyright ©️ NERD
FIDの改善方法
● すみません！勉強中なのでまた今度機会があればまとめます！
Core Web Vitalsの改善方法

28. Copyright ©️ NERD
CLSの改善方法
● 画像のサイズを常に指定する
○ 画像に必要な領域を事前に確保しておくイメージ。
○ 「CLS 改善 width」の検索結果で、最も参考になる記事
■ https://www.web-keiei.com/seo_blog/1644/
● WEBフォントを使っていてズレが生じている場合は、<link rel=preload>を使用する
Core Web Vitalsの改善方法

29. Copyright ©️ NERD
資料の中でわからない部分があればご質問お受けします。
またプレゼンについてフィードバック等あればいただけると嬉しいです。
おわりに

30. Copyright ©️ NERD
Copyright ©️ NERD
ご静聴ありがとうございました。