HTML＋CSSでできる！Core Web Vitals（LCPFIDCLS）の改善実例

Googleが提唱する「Core Web Vitals（コアウェブバイタル）」は、Webサイトのユーザー体験（UX）を数値で評価するための3つの重要指標です。
特にLCP・FID・CLSの3つは、検索順位にも影響するため、サイトの表示速度や操作のしやすさを意識した実装が求められます。

この記事では、HTMLとCSSの観点から、Core Web Vitalsの数値改善につながる具体的な実装例を紹介します。

おさらい：Core Web Vitalsとは？3つの指標の概要

Core Web Vitalsについては
こちらの記事で詳しく解説していますが、ここでも簡単におさらいしておきましょう。

Googleが提唱するCore Web Vitalsは、以下の3つの指標から構成されます。

・LCP（Largest Contentful Paint）

ページ内で最も大きなコンテンツ（主に画像や見出しなど）が表示されるまでの時間。
理想的な値は2.5秒以内です。

・FID（First Input Delay）

ユーザーが最初に操作したときの反応の遅れを示す指標。
理想的な値は100ms以内です。

・CLS（Cumulative Layout Shift）

ページ内のレイアウトが意図せずズレる程度を表す指標。
理想的な値は0.1未満です。

LCPを改善するHTML＋CSS実装例

画像の読み込み最適化

• fetchpriority="high" 属性で、ブラウザにこの画像の優先読み込みを指示
• LCP対象の画像には loading="eager" を指定して、できるだけ早く読み込むようブラウザに指示
• サイズ（width・height）を指定して、読み込み中のレイアウト崩れ（CLS）も防止

ファーストビューの重要要素を優先的に描画

• font-display: swap; でWebフォントの表示遅延を回避
• 上部にあるCSSやJSはインライン化して、ページ描画の妨げを最小限に

FIDを改善するためのHTML＋CSS設計

不要なJavaScriptの遅延読み込み

• ユーザーの操作と無関係なJavaScriptは、defer や async で遅延読み込み
• タグマネージャーや外部サービスのJSも対象になるため注意が必要

CSSでユーザーが操作しやすいようにする

• ボタンなどのタッチ要素には cursor: pointer; を設定して、クリックできることを明示
• hover時に拡大する画像など、アニメーションが予測される要素には will-change を使って、ブラウザに最適化を促すとスムーズな表示になる

CLSを防ぐためのマークアップとレイアウト改善

画像・動画に width と height を指定する

• ブラウザがあらかじめ表示領域を確保するため、読み込み前後でレイアウトがズレにくくなる

WebフォントのFOUT・FOIT対策

上記のように font-display: swap; を指定すると、まずはシステムフォントで素早く表示し、後からWebフォントに切り替わります。
※FOUT（Flash of Unstyled Text）… Webフォントが読み込まれるまで、一時的にシステムフォントが表示される現象
※FOIT（Flash of Invisible Text）… フォント読み込み完了までテキストが非表示になる現象

• font-display: swap; により、まずはシステムフォントで素早く表示し、あとからWebフォントに切り替える
• 切り替え時の見た目のズレを減らすために、表示が似ている代替フォント（フォールバックフォント※）を選ぶことも大切

※「フォールバックフォント」とは、Webフォントの読み込みが完了するまで一時的に代わりに表示されるフォントのことです。

広告・埋め込みコンテンツのスペース確保

広告やYouTubeなどの外部コンテンツは読み込みに時間がかかることがあるため、
あらかじめスペース（プレースホルダー）を用意しておくと、レイアウトのズレを防げます。

まとめ｜Core Web Vitals改善は小さな工夫の積み重ねから

Core Web Vitalsは、一つひとつの小さな改善がユーザー体験やSEOに直結します。
HTMLやCSSの設計段階から意識しておくことで、後から慌てて対処するよりもずっと効果的です。

特に新規サイト制作の段階から、今回紹介した基本対策を意識して設計・実装しておくことで、自然と高パフォーマンスなWeb体験を実現できます。
地道な積み重ねが、ユーザーにも検索エンジンにも信頼されるサイトづくりにつながります。