Core Web VitalsはGoogleがウェブページのユーザー体験を測定するために定義した指標のセットです。2021年以降、これらの指標はGoogleのランキングシグナルの一部となっています。つまり、スコアが低いとSEOに悪影響を及ぼす可能性があります。画像はこれらのスコアに影響を与える主要な要因の一つです。
Core Web Vitalsの3つの指標
GoogleはCore Web Vitalsを通じてユーザー体験の3つの側面を測定します：
| 指標 | 測定内容 | "良好"の閾値 | "改善が必要"の閾値 |
|---|---|---|---|
| LCP (Largest Contentful Paint) | 最大の可視要素の読み込み時間 | ≤ 2.5秒 | 2.5〜4秒 |
| INP (Interaction to Next Paint) | ユーザーインタラクションへの応答性 | ≤ 200ms | 200〜500ms |
| CLS (Cumulative Layout Shift) | レイアウトの視覚的安定性 | ≤ 0.1 | 0.1〜0.25 |
LCPと画像：直接的な関係
LCP（Largest Contentful Paint）はブラウザのビューポートに最大の可視要素を表示するのに必要な時間を測定します。ほとんどのウェブページでは、この要素は画像です — ヒーロー画像、メインバナー、製品写真など。重い画像や読み込みが遅い画像は、直接的にLCPスコアの低下を引き起こします。
画像関連のLCPを改善するには：
- モダンな形式を使用する：WebPとAVIFは視覚的な品質が同等でJPEGやPNGより大幅に軽量です
- LCP画像をプリロードする：<link rel="preload">タグを<head>に追加して、ブラウザにヒーロー画像を優先的に読み込ませます
- LCP画像にlazy loadingを使わない：LCPになる画像にloading="lazy"を決して適用しないでください — これはGoogleが測定するものをまさに遅延させます
- CDNから画像を配信する：サーバーの地理的な近さがTime to First Byte（TTFB）を削減し、LCPに直接影響します
- 画像を適切なサイズにする：800px表示のために3000px幅の画像を配信しないでください
豆知識：PageSpeed InsightsまたはChrome DevTools（パフォーマンスタブ → LCPマーカーをクリック）を使用して、どの画像がLCPを構成しているかを特定できます。この特定はあらゆる最適化前の不可欠な最初のステップです。
CLSと画像：レイアウトシフト
CLS（Cumulative Layout Shift）は読み込み中の予期しないレイアウトシフトを測定します。サイズが定義されていない画像は、CLSスコアが低い最も一般的な原因の一つです：ブラウザは画像が読み込まれる前にそのサイズを知らないため、画像が現れるときにページが「ジャンプ」します。
解決策はシンプルで普遍的です：すべてのimgタグに常にwidthとheight属性を指定することです。これによりブラウザは画像がダウンロードされる前に必要な正確なスペースを予約できます。
INPと画像：間接的な影響
INP（Interaction to Next Paint）はユーザーインタラクション（クリック、入力）に対するページの応答性を測定します。画像はINPに直接影響しませんが、ブラウザのメインスレッドを独占する非常に重い画像は、JavaScriptイベント処理をブロックすることでこの指標を間接的に悪化させる可能性があります。
大きな画像（数メガバイトのPNG、高解像度のTIFF）のデコードはメインスレッドのブロッキングを引き起こす可能性があります。decoding="async"属性を使用するとこのデコードを延期してインタラクションのブロッキングを回避できます。
Core Web VitalsのためのベストプラクティスImageの
- 形式：すべてのコンテンツ画像にWebPまたはAVIFを使用する
- サイズ：すべてのimgタグに常にwidthとheightを指定する
- Lazy loading：LCP画像を除く画面外のすべての画像にloading="lazy"を使用する
- Preload：<link rel="preload" as="image">でLCP画像のみをプリロードする
- レスポンシブ画像：srcset属性を使用して各画面解像度に適したサイズを配信する
- 圧縮：アップロード前にSquoosh、Sharp、ImageMagickなどのツールですべての画像を圧縮する
- CDN：地理的な読み込みレイテンシを削減するためにCDNで画像をホストする
豆知識：Google PageSpeed InsightsとLighthouseはCore Web Vitalsを測定して問題のある画像を特定するための参照ツールです。Google Search ConsoleもCrUX（Chrome User Experience Report）に基づいた実際の訪問者データのCore Web Vitalsレポートを提供しており、ユーザーの実際の体験を評価するためにはラボテストよりも信頼性が高いです。