![コアウェブバイタルとは?3つの指標と改善方法を解説!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/4c3e22c087da44609839190632737583/Group%20735.png?w=1200&fm=webp)
SEO
更新日: 2024/5/30
コアウェブバイタルとは?3つの指標と改善方法を解説!
![character_balloon](/media/character/pink_normal_left.png)
コアウェブバイタルって、ウェブサイトに関連することなのかな?
そうだね、サイトの検索順位に関連することだよ~。
![character_balloon](/media/character/blue_happy_right.png)
![character_balloon](/media/character/pink_question_left.png)
詳しく知りたいんだけど、教えてくれないかな?
もちろん。じゃあ、3つの指標や改善方法について解説するね。
![character_balloon](/media/character/blue_smile_right.png)
![character_balloon](/media/character/pink_happy_left.png)
ありがとう!
目次
- 1. コアウェブバイタルの指標を解説!
- 1-1. 1.LCP(Largest Contentful Paint)
- 1-2. 2.FID(First Input Delay)
- 1-3. 3.CLS(Cumulative Layout Shift)
- 2. LCPの改善方法を3つ紹介
- 2-1. 1.画像最適化
- 2-2. 2.サーバー高速化
- 2-3. 3.JavaScriptやCSSなどの削減
- 3. FIDの改善方法を解説!
- 3-1. 1.ウェブフォントの最適化
- 3-2. 2.JavaScriptの最適化
- 4. CLSの改善方法を説明
- 4-1. 1.画像と動画のサイズ指定
- 4-2. 2.フォントの表示方法の最適化
- 5. コアウェブバイタルの重要性
- 6. まとめ
コアウェブバイタルの指標を解説!
![character_balloon](/media/character/blue_normal_left.png)
コアウェブバイタルは、ウェブページのユーザー体験品質を測定するための指標だよ~。
![character_balloon](/media/character/blue_confidence_left.png)
コアウェブバイタルは、次の3つの指標で構成されているんだ。
1.LCP(Largest Contentful Paint)
2.FID(First Input Delay)
3.CLS(Cumulative Layout Shift)
![character_balloon](/media/character/blue_happy_left.png)
Googleが検索順位の指標にしているんだよ。
重要な指標なんだね!
![character_balloon](/media/character/pink_surprised_right.png)
![character_balloon](/media/character/blue_smile_left.png)
それぞれ解説するね。
1.LCP(Largest Contentful Paint)
![character_balloon](/media/character/blue_confidence_left.png)
LCPは、ページの読み込み速度を評価するための指標で、ページの主要コンテンツが表示されるまでの時間を測定するんだ~。
![character_balloon](/media/character/blue_happy_left.png)
最大のコンテンツ要素が画面に完全に描画されるまでの時間を秒数で表すよ。
何秒以内を目標にするといいのかしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
LCPの目標値は、ページの読み込みを2.5秒以内に完了させることだよ。
![character_balloon](/media/character/blue_happy_left.png)
LCPが2.5秒以内だと、良いサイトだとGoogleからも評価されるんだ~。
そうなのね!
![character_balloon](/media/character/pink_normal_right.png)
2.FID(First Input Delay)
![character_balloon](/media/character/blue_normal_left.png)
FIDは、ユーザーがクリックやタップしてから、ブラウザが応答するまでの遅延時間を測定する指標だよ~。
![character_balloon](/media/character/blue_normal_left.png)
この指標は、ページの双方向性と応答性を評価するために用いられるんだ。
![character_balloon](/media/character/blue_confidence_left.png)
ページがどれだけ「レスポンシブ」か、つまりユーザーの入力に対してどれだけ速く反応できるかを評価するために重要なんだ~。
FIDにも理想的な値はあるのかしら。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
FIDは、100ミリ秒以下だと良好とされているんだよ。
3.CLS(Cumulative Layout Shift)
![character_balloon](/media/character/blue_normal_left.png)
CLSは、ウェブページの安定性を測定する重要な指標なんだよ。
![character_balloon](/media/character/blue_normal_left.png)
ページの読み込み中に、どれだけ視覚的なコンテンツが予期せずに動くかを測定するんだ~。
具体的にはどういうことかな?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_happy_left.png)
たとえば、ページがロードされている間にテキストや画像が突然動き出すと、ユーザーは誤ったリンクをクリックするかもしれないよね~。
そうね。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
ユーザーにとっては、予期せぬサイトのコンテンツの動きは混乱やフラストレーションの原因となるよ。
![character_balloon](/media/character/blue_confidence_left.png)
だからCLSの値は小さいほど良い評価を意味して、0.1未満だと良好とされているんだ~。
LCPの改善方法を3つ紹介
![character_balloon](/media/character/blue_normal_left.png)
LCPの改善方法は主に次の3つがあるよ。
1.画像最適化
2.サーバー高速化
3.avaScriptやCSSなどの削減
![character_balloon](/media/character/blue_confidence_left.png)
LCPを改善すると、ユーザーがページに早くアクセスできるようになり、離脱率を減らし、エンゲージメントを向上させることが期待できるんだ~。
そうね。サイトの反応が迅速だと助かるわ。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_happy_left.png)
LCPの改善方法についてそれぞれ解説するね。
1.画像最適化
![character_balloon](/media/character/blue_normal_left.png)
画像ファイルのサイズを圧縮し、ウェブ用にフォーマットすると読み込み時間を短縮できるんだ~。
![character_balloon](/media/character/blue_happy_left.png)
たとえば、Googleが開発したWebPというフォーマットを使用するのがいいね。
知らなかったわ。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
Lazy Loadを実装してビューポート外の画像の読み込みを遅らせることでも、LCPの改善ができるよ。
![character_balloon](/media/character/blue_smile_left.png)
Lazy Load によって、初期のロード時に必要なデータ量が減少して、読み込み時間が早くなるからなんだ~。
2.サーバー高速化
![character_balloon](/media/character/blue_happy_left.png)
LCPの改善にはサーバーを高速化することも有効なんだ~。
サーバーを高速化するにはどうしたらいいの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
1番簡単なのは、高速なサーバーホスティングへ移行することよ。
![character_balloon](/media/character/blue_normal_left.png)
もしくは、効果的なキャッシング機能を実装して、頻繁にアクセスされるリソースのロード時間を短縮する方法もあるんだ~。
3.JavaScriptやCSSなどの削減
![character_balloon](/media/character/blue_confidence_left.png)
LCP改善には、JavaScriptやCSSなどのスクリプトを削減する方法もあるんだ。
![character_balloon](/media/character/blue_normal_left.png)
これは、ブラウザの処理負荷を軽減することにつながるから、読み込み時間も短縮される効果があるよ。
なるほどね!
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_smile_left.png)
できるだけ不必要なライブラリやフレームワークの使用を避け、必要最小限のコードで機能を実装するといいよ。
FIDの改善方法を解説!
![character_balloon](/media/character/blue_confidence_left.png)
FIDの改善方法は主に次の2つ があるんだ~。
1.ウェブフォントの最適化
2.JavaScriptの最適化
![character_balloon](/media/character/blue_normal_left.png)
FIDが改善されると、ユーザーのインタラクションに対する応答時間を短縮することができるんだ。
具体的にどんな改善方法かな?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_happy_left.png)
それぞれ解説するね~。
1.ウェブフォントの最適化
![character_balloon](/media/character/blue_normal_left.png)
FIDの改善方法の1つは、フォント表示の最適化なんだ。
フォントの表示が関係しているのね!
![character_balloon](/media/character/pink_surprised_right.png)
![character_balloon](/media/character/blue_happy_left.png)
CSSプロパティのfont-displayを使用して、フォントの読み込み方を制御するんだよ。
![character_balloon](/media/character/blue_confidence_left.png)
たとえば、swapオプションを使用すると、フォントの読み込み中にテキストを表示できるから、ユーザーインタラクションが妨げられるのを防げるんだ~。
2.JavaScriptの最適化
![character_balloon](/media/character/blue_normal_left.png)
FIDは、JavaScriptのコードを分割することでも改善可能なんだ~。
具体的にどうするのかしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
大きなJavaScriptファイルを複数の小さなファイルに分割し、必要なものだけを最初にロードするようにするんだよ。
![character_balloon](/media/character/blue_smile_left.png)
タグにasyncやdefer属性を使用して、スクリプトの実行を遅延させるか、非同期で行う方法もあるんだ~。
コードについての細かい知識が必要ね!
![character_balloon](/media/character/pink_amazed_right.png)
CLSの改善方法を説明
![character_balloon](/media/character/blue_happy_left.png)
CLSの主な改善方法は次の2つだよ。
1.画像と動画のサイズ指定
2.フォントの表示方法の最適化
![character_balloon](/media/character/blue_normal_left.png)
CLSのスコアを改善することで、サイト表示がスムーズになり、ユーザーが快適にサイトを利用できるようになるよ。
詳しく知りたいわ。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
それぞれ解説するね~。
1.画像と動画のサイズ指定
![character_balloon](/media/character/blue_normal_left.png)
CLSは、画像や動画をHTMLに挿入する際に、明確にwidthとheight属性を指定することで、改善されるんだ~。
![character_balloon](/media/character/blue_confidence_left.png)
ブラウザが正しいスペースを予約できるからだよ。
なるほどね!
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_happy_left.png)
そうすることで、リソースが読み込まれるときにページのレイアウトが変動するのを防げるんだよね。
![character_balloon](/media/character/blue_normal_left.png)
広告のように動的にコンテンツが挿入される場合、事前に十分なスペースを確保しておくことも効果があるんだ。
2.フォントの表示方法の最適化
![character_balloon](/media/character/blue_normal_left.png)
CLSを改善するためには、フォントの表示方法を工夫することも重要なんだ~。
![character_balloon](/media/character/blue_confidence_left.png)
font-displayプロパティは、ウェブフォントが読み込まれる間のテキストの表示方法を制御し、表示のズレを減らすのに役立つんだよ。
フォントもサイトの表示がズレたり予期しない動きに影響を与えているのね。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_smile_left.png)
ウェブフォントが読み込まれるまでの間、テキストのレイアウトが安定し、ユーザーエクスペリエンスが向上するんだ。
コアウェブバイタルの重要性
![character_balloon](/media/character/blue_normal_left.png)
コアウェブバイタルは、SEOにおいてもとても重要なんだ~。
![character_balloon](/media/character/blue_happy_left.png)
Googleは2021年から、コアウェブバイタルの指標を検索ランキングの要因として取り入れられているんだよ。
とても重要な指標なのね!
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
そうだね。ウェブサイトの開発者やオーナーにとって、LCP、FID、CLSといったコアウェブバイタルの指標を理解し、最適化することは今後さらに重要になっていくんだ~。
![character_balloon](/media/character/blue_smile_left.png)
今後もコアウェブバイタルの指標は、質の高いウェブサイトの作成やユーザー体験の改善に影響を与えていくといわれているよ。
まとめ
まとめ
◆コアウェブバイタルは、ウェブページのユーザー体験品質を測定するための指標。
◆コアウェブバイタルは、LCP、FID、CLSの3つの指標で構成されている。
◆LCP、FID、CLSは、JavaScriptの削除、フォントの最適化や、サーバ高速化などで改善できる。
◆Googleは2021年から、コアウェブバイタルの指標を検索ランキングの要因として取り入れられている。
コアウェブバイタルのことは知らなかったから、いい勉強になったわ。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_smile_left.png)
よかった。
SEOにも重要な影響を与えているのね。
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_happy_left.png)
うん。サイトの運営や、ウェブマーケティングの分野で重要なんだよね。
解説ありがとうね!
![character_balloon](/media/character/pink_smile_right.png)
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。