KurocoでできるCore Web Vitalsへの対応の進め方

Core Web Vitalsとは

GoogleがWebサイトの健全性を示す指標として Web Vitals というものがあります。
Core Web Vitals とは Web Vitals の中でも特に重要なLCP、FID、CLSのことを示します。

LCP (Largest Contentful Paint) とは

LCPとは、「最大視覚コンテンツの表示時間」つまり、「ページのメインとなる最も大きなコンテンツが表示されるまでの時間」を示す指標になります。表示されるまでの時間が2.5秒以内だと「良い」とされます。
主に以下の要素が対象となります。

• <img> 要素
• <svg> 要素内の <image> 要素
• <video> 要素
• CSSのurl()を介して読み込まれた背景画像
• テキストノードやその他のインラインレベルのテキスト要素の子要素を含むブロックレベル要素

FID (First Input Delay) とは

FIDとは、「初回入力までの遅延時間」つまり、「ユーザーが最初にページを操作（リンクのクリック、ボタンのタップ、キーの押下など）を行った際の反応速度」を示す指標になります。
その際、スクロールとズームイン・ズームアウトは操作の対象外となります。ページ操作時の反応速度が0.1秒以下だと「良い」とされます。

CLS (Cumulative Layout Shift) とは

CLSとは、「累積レイアウト シフト数」つまり、「ページの表示中に発生したレイアウトのズレ」を示す指標になります。
レイアウトのズレはページの操作や視覚的なUXの低下に繋がってしまいます。CLSのスコアが0.1以下だと「良い」とされます。
よくあるものだと、画像の読み込みの度に他の要素がズレてしまったり、JavaScriptやCSSでコンテンツを非同期で読み込んで他の要素がズレてしまうといったものが該当します。

SEOへの影響

Core Web Vitals はGoogle検索結果の評価に関わるページエクスペリエンスシグナルへ追加されたため、Google検索結果のランキング（SEO）にも影響します。
ページエクスペリエンスシグナルは他にも以下のようなものがあります。

• モバイルフレンドリーであるか
• HTTPSで配信されているか
• 煩わしいインタースティシャルがないか

Core Web Vitals のスコアを計測するツール

Core Web Vitals を測定するためのツールには、Lighthouse、PageSpeed Insights、Search Consoleなどがあります。

Core Web Vitals のスコア改善について

LCPスコア

LCPのスコアが低下する原因として以下が考えられます。

• サーバーの応答速度が遅い
• レンダリングを妨げるJavaScriptとCSSによる影響
• JavaScript、CSS、画像といったリソースファイルの読み込みが遅い
• クライアントサイドでのレンダリング

LCPのスコアを改善するには以下が有効です。

• サーバーの応答速度を改善する
• レンダリングを妨げるJavaScriptやCSSを削減する
• リソースファイルのサイズなどの読み込みを改善する
• 外部ファイルの読み込みの順番を改善する（<link rel="preconnect">の指定など）
• レンダリング方法を改善する

Kurocoで簡単にできるLCPのスコア改善

KurocoではCDNを利用しているため、JavaScript、CSS、画像といったリソースファイルを高速に配信できますので、「サーバーの応答速度」に関しては問題にはなりません。
APIレスポンスもキャッシュ設定ができますので、適切にキャッシュの設定を実施してください。
また、画像は次世代フォーマットであるwebpでの配信やURLパラメータベースのリサイズにも対応しています。
適切にコーディングをしていただければ「リソースファイルのサイズなどの読み込みを改善する」は比較的容易に対応が可能です。

FIDスコア

主にFIDのスコアが低下する原因として以下が考えられます。

• JavaScriptやCSSファイルに必要のないコードが含まれており、サイズが肥大化している
• JavaScriptのロジックの問題で実行にかかる時間が遅い
• 広告やSNSボタンといったサードパーディのJavaScriptによる影響
• コーディングの問題やサイトの要件によりリクエスト数が多い

FIDのスコアを改善するには以下が有効です。

• 処理に時間のかかるJavaScriptのロジックを改善する
• 広告、SNSボタンといったサードパーティのJavaScriptを削減・非同期で読み込む
• リクエスト数を減らすなど読み込みの順番を調整して、リソースの読み込み待ち時間を少なくする

KurocoでできるFIDのスコア改善

KurocoはAPI中心設計のヘッドレスCMSのため、Nuxt.jsやNext.jsといったJavaScriptフレームワークと相性が良いです。
また、ホスティング機能を持ったKurocoFrontを利用することで、CDNを利用した静的コンテンツを高速で配信できます。
KurocoとJavaScriptフレームワークを利用することで、FIDスコアの良いサイトの構築を行えます。
LCPとCLSの改善をするとFIDスコアも改善しますので、複雑なサイトでない限りFIDの調整は最後で構いません。

CLSスコア

CLSのスコアが低下する原因として以下が考えられます。

• <img>や<video>要素にサイズが指定されていない
• 広告や<ifame>といった埋め込み要素にサイズが指定されていない
• コンテンツが動的に読み込まれている
• Webフォントの読み込み遅延によりFOUT（チラつき）が発生している

CLSのスコアを改善するには以下が有効です。

• <img>や<video>要素にwidthとheightを指定する
• 広告、<iframe>、動的なコンテンツを読み込む場合はサイズを指定するか、CSSで予めスペースを確保する
• Webフォントの読み込みを最適化する（<link rel=”preload”>の指定など）

KurocoでできるCLSのスコア改善

Kurocoでは画像のURLにパラメータを付与することで動的変換を行えます。
<img>要素のサイズ指定に併せて、画像のURLにwidthパラメータを指定することでサイズが固定された画像の配信が可能です。

また、以下のようにsrcsetと画像のURLへのwidthパラメータを組み合わせることで、解像度の異なる画像を複数用意せずにレスポンシブへの対応も可能です。

<picture>
  <source media="(max-width: 799px)" srcset="example.jpg?width=400" /><!-- ビューポートの横幅が799px以下のデバイスで表示 -->
  <source media="(min-width: 800px)" srcset="example.jpg?width=800" /><!-- ビューポートの横幅が800px以上のデバイスで表示 -->
  <img src="example.jpg" alt="サンプル画像" />
</picture>

参考

このチュートリアルでは、Core Web Vitalsの一般的な概要を説明しました。Core Web Vitals についてさらに詳しく知るには、以下のリンクを参照してください。

Web Vitals と Core Web Vitals

• Web Vitalsについて - web.dev

LCP (largest contentful paint)

• Largest Contentful Paint (LCP) - web.dev
• Largest Contentful Paint を最適化する - web.dev

FID (first input delay)

• FID (First Input Delay) - web.dev
• First Input Delay を最適化する - web.dev

CLS (cumulative layout shift)

• Cumulative Layout Shift (CLS) - web.dev
• Cumulative Layout Shift を最適化する - web.dev

画像の動的変換

• 画像の動的変換について