ホームページ制作における コアウェブバイタル（LCP、INP、CLS）の最適化

コアウェブバイタルとは？Web初心者にもわかる超基本解説

「コアウェブバイタル」とは2020年にGoogleが導入した「ユーザー体験（UX）を評価するために定めた指標」のことを言います。
2021年からは検索順位にも影響するようになりサイトを制作・運営する方にとっては無視できない存在になりました。 つまり「コアウェブバイタル」を簡単にいうと「ユーザーが快適に使えるサイト」かどうかGoogleがちゃんと評価しますよ！ということです。
Googleから評価されればサイトの検索順位に良い影響を与え検索順位が上がることも...
web制作においてはとても重要なことなのです。
では実際には何をしたらいいのでしょうか？

まずは3つの指標を理解したい！
コアウェブバイタルの3つの指標「LCP」「INP」「CLS」の意味と改善策

「コアウェブバイタル」には3つの"指標"というものがあります。
それぞれの言葉の意味や理想値を覚えて頭の片隅に置いておくと作業がしやすくなりますよ！

1. LCP（Largest Contentful Paint）

概要	ページのメインコンテンツが表示されるまでの時間
具体例	記事の見出しや大きな画像など、「一番目立つコンテンツ」が出てくるまでのスピード
理想値	2.5秒以内

サイトが遅いときの具体的な原因例

• 画像が大きすぎる
• サーバーの応答が遅い
• 無駄なJavaScriptやCSSの読み込み

2.INP（Interaction To Next Paint）

概要	ユーザーが最初に操作してから、サイトが反応するまでの時間
ユーザー操作の具体例	ボタンをクリック、検索ボックスを入力、メニューをタップなど
理想値	100ミリ秒以下（0.1秒）

サイトが遅いときの具体的な原因例

• JavaScriptが重くて、すぐに処理できない
• 表示はされているけど、サイト内部ではごちゃごちゃ処理中...の状態

3. CLS（Cumulative Layout Shift）

概要	ページの見た目が勝手にズレたり動いたりする度合い
具体例	読んでいる途中で広告が急に出てきて文字の位置がズレてしまう、ボタンを押そうとしたらその瞬間に動いて違うボタンを押してしまうなど
理想値	0.1以下（この数値は0に近ければ近いほど良いです）

よくある原因

• コーディング時に画像のサイズを指定していない
• フォントの読み込みタイミング
• 広告やポップアップが表示されてしまう

3つの"指標"、なんとなくご理解いただけたでしょうか？
これらを踏まえて次は実際にサイトを見直していきましょう。

PageSpeed Insightsの使い方と改善点の見方【初心者向け】

では実際にこれらの問題点をどう確かめるのか、そしてどうやって改善するのか順を追って解説していきます。
今回はGoogle公式ツールの「PageSpeed Insights」（ページスピードインサイト）を使って説明していきます。

使い方

1.まずはPageSpeed Insightsにアクセス

「PageSpeed Insights」（ページスピードインサイト）というサイトにアクセスします。
PageSpeed Insightsとは、Googleが提供しているウェブページの表示速度やパフォーマンスをチェックできる無料ツールのことで、とても扱いやすいのでお勧めです。

2.調べたいサイトのURLを入力

サイトにアクセスしたら「ウェブページのURLを入力」と書いてある検索欄に調べたいサイトのURLを入力し「分析」ボタンをクリックします。

3.レポートをチェック

分析が終わるとレポート画面に切り替わります。

検索欄の下に「携帯電話」「デスクトップ」の二つのタブが出てきますので、タブを切り替えることで「携帯電話」「デスクトップ（PC）」で閲覧した時のレポートを詳しく確認できます。

実際に改善点を見てみよう

レポートが表示されたら特に注目したい箇所をご説明します。

1.パフォーマンスの問題を診断する

ここではWebページの読み込みパフォーマンスに関する数値を確認できます。
まずはそれぞれの項目の理想値を目指してみましょう。

1.First Contentful Paint（FCP）

2.Largest Contentful Paint（LCP）

3.Total Blocking Time（TBT）

4.Cumulative Layout Shift（CLS）

5.Speed Index（スピードインデックス）

特に初心者の方は専門用語が多いと大変かと思いますが、それぞれの大体の意味や理想値の目安だけでも覚えておくととても便利です

2.診断（Diagnostics）セクションに注目!

レポートを下にスクロールしていくと「診断」というセクションがあります。
Google PageSpeed Insightsの分析結果の中で"実務的な改善ヒント"が得られる部分です。
診断セクションの各タイトル右にある矢印を押すと詳細が表示されますので、ここの内容を細かく見ながら改善していきます。

診断項目例一覧

<img loading="lazy" src="image.jpg" alt="..." />

診断項目はこの他にもあり上記は一例ですが、まずは簡単にできることからコツコツやっていくのがおすすめです。

実際にやったこと

ここまでの内容を踏まえて、まずは簡単な所からですが私自身も実際にいくつかの改善を試してみました。

• PageSpeed Insightsのレポートで指摘されていた画像をWebP形式に変更
• 各画像に loading="lazy" を追加して、遅延読み込みを設定
• サイズ指定がされていなかった画像に対しサイズを指定

上記は特別な知識がなくても気軽に作業ができる部分ですし、実際にこれらを修正しただけでもPageSpeed Insightsのスコアが少しずつ改善されたように思います。

また、今回やってみて強く感じたのは、今回の記事のテーマである「サイトのパフォーマンス改善」と並行して「サイト全体の更新・調整作業」をセットで行うのが効果的だということです！
コアウェブバイタルを意識しつつ、並行してサイトに新規ページを増やしたり既存のページの小まめな更新やデザインの調整など同時進行で行うこと ＝"サイトを更新していくこと"が評価を上げていくコツのような気がしました。

さいごに

今回ご紹介したコアウェブバイタル（LCP、INP、CLS）は、ユーザー体験を改善し検索順位の向上にも直結する重要な指標です。
ホームページ制作においては見た目だけでなく快適さがとても重要な時代になりました。
どうしても見た目の良さを重視してしまいがちですが、見えないところが重要という事ですね...
私自身もまだまだ勉強中の身ではありますが、今後とも小さな改善を積み重ねながら、よりよいサイトづくりを目指していこうと思います。

PageSpeed Insightsでサイトの現状を定期的にチェックし、できれば最初からコアウェブバイタルを意識して作ると後々の改善もしやすくなるかと思います！
定期的にチェックすることで自身のサイトもより良くなり、"今"のweb業界の流れや傾向もつかめてくるのではないでしょうか。

サイトの質を高めればSEOの対策にもなりますし、改善していけばしていくほどユーザーに届きやすくなります。
ぜひ一度PageSpeed Insightsでご自身のサイトをチェックしてみてはいかがでしょうか？