コアウェブバイタルを
低下させる要因とその改善方法

コアウェブバイタルとはGoogleが発表したWebページのユーザーエクスペリエンス（UX）を評価する指標のことです。 要するにページの読み込み速度や応答速度がページを快適に閲覧・操作できるものかを測定する基準ですね。

PageSpeed Insightsのスコア改善のご依頼があり、コアウェブバイタルを低下させる要因とその改善方法について調べたことをまとめました。

コアウェブバイタルとなる3つの指標

1.LCP（Largest Contentful Paint）

ページ上で最も大きいコンテンツが表示されるまでの時間を測定します。
例えば、ファーストビュー内で使われている大きい画像や動画が表示されるまでの時間のことです。

2.FID（First Input Delay）

ページ読み込み後、ユーザーの操作に対してのページの応答速度を測定します。例えば、ページが開き、リンクをクリックしてから実際にページ遷移が開始されるまでの時間のことです。

※なお、FIDについて、Googleは下記のようにも発表しています。

2024 年 3 月以降、Interaction to Next Paint（INP）が FID に代わって Core Web Vitals の一つになります。

引用元：https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja
引用元：https://developers.google.com/search/blog/2023/05/introducing-inp?hl=ja

3.CLS（Cumulative Layout Shift）

ページ読み込み中に一時的に起こる、レイアウトのズレの程度を測定します。
例えば、ページを開き、リンクをクリックしようとしたら、画像が少し遅れて表示され、その間にリンクがズレてしまい、その結果、間違って別のリンクをクリックしてしまうことがあります。このようなズレの程度のことです。

コアウェブバイタルはどこで確認できる？

PageSpeed Insightsのサイトで計測したいページのURLを入力するだけで確認できます。

PageSpeed Insights

LCPを低下させる要因とその改善方法

1.css・jsファイルがページのレンダリングを妨げている

不要なcss・jsファイルを削除する

下記のように、使っていないcssやjsが読み込まれていませんか？

• ページ内容を変更し、以前は必要だったcssやjsファイルが未だに読み込まれている
• 以前、計測していた広告のコンバージョンタグが残っている

読み込むファイルの数とファイルサイズを削減する

cssやjsファイルの読み込む数が多くなると、表示速度の低下につながります。できるだけファイルは統合・圧縮し、読み込むファイルの数とファイルサイズを削減します。

使っていないWordPressのプラグインを無効化する

WordPressのプラグインは動作に必要なcssやjsファイルを読み込むことがあります。使っていないプラグインを削除または無効化することでパフォーマンスの改善が期待できます。

jsファイルを非同期で読み込む

jsファイルはasync、またはdeferを付与し、読み込ませ、HTML・CSSの読み込みを優先させます。

<script src=“xxx.js” async></script>

<script src=“xxx.js” defer></script>

2.ファーストビューでファイルサイズの大きい画像ファイルを読み込んでいる

preload（プリロード）を使い、画像を事前に読み込む

画像ファイルを最適化しているものの、それでも少し表示に時間がかかっているといった場合はhead内にファイルの事前読み込みを指定することで改善が期待できます。

<link rel="preload" href="img.jpg" as="image">

FIDを低下させる要因とその改善方法

FIDはユーザーのアクションが必要になるため、PageSpeed Insightsでは計測ができません。そのため、関連性の高いTotal Blocking Timeを代わりの指標とし、ここでは紹介しています。

1.analyticsなど外部サービスのコードがページ読み込み速度に影響している

preconnect（プリコネクト）を使い、外部サービスへ事前接続する

head内に外部サービスへの事前接続を指定します。
最近ではGoogleフォントを使用する際の埋め込みコードでもpreconnectが指定されています。

<link rel="preconnect" href="//www.googletagmanager.com">

CLSを低下させる要因とその改善方法

1.画像にwidthとheightが指定されていない

画像にwidthとheightを指定する

今はほとんどのWebサイトがレスポンシブ前提ということもあり、htmlファイルでの画像のサイズ指定を忘れていませんか？小さいことのようですが、意外とCLSへの影響は大きいです。

<img src="xxx.jpg" width="100" height="100">

2.slickの読み込み前と後とでレイアウトが大きくシフトしている

読み込み前と後とでレイアウトが大きく変わらないようCSSを調整

スライダーのプラグインであるslickがCLSを低下させる要因になっている場合があります。下記のようにCSSを追記し、読み込み前と後とでレイアウトが大きく変わらないようにします。

/*一つ目のslider__itemだけを表示*/
.slider > .slider__item:not(:first-child) {
display: none;
}

※slickの読み込み後、.slider__itemの上に親要素が追加される仕様により、上記のcssが無効となり、非表示のスライドが表示される仕組みです。

スライダーだけではなく、jsでレイアウトを制御しているような場合はjsの読み込み前と後とのレイアウトの差も注意する必要がありそうですね。

まとめ

Googleはユーザーエクスペリエンス（UX）の向上のため、コアウェブバイタルの改善を勧めています。ページの読み込み速度や応答速度はユーザーがページを快適に閲覧・操作できるかという指標でもあり、これらは検索順位へも影響を与えます。
ファイルの容量や数を減らす、jsファイルの読み込みを遅らせるなどし、読み込み速度を向上させることでコアウェブバイタルのスコアを改善することが可能です。また、ファイルの読み込みの前後でレイアウトのシフト量が大きくなると、CLSのスコア低下へつながるので、注意が必要です。