メインコンテンツへスキップ
Website Booster (ホーム)
ヒント

Core Web Vitals を改善する5つの実践的なヒント

公開日:
  • #performance
  • #core-web-vitals

Core Web Vitals はユーザー体験を数値化した指標であり、検索順位にも影響します。ここでは静的サイトを運用するうえで効果の大きい5つの施策を紹介します。

1. 画像を適切に配信する

LCP(最大コンテンツの描画)の犯人は、たいていファーストビューの大きな画像です。次世代フォーマット(WebP / AVIF)への変換、適切なサイズ指定、そして遅延読み込みの使い分けで、描画時間は大きく改善します。

2. レイアウトシフトを防ぐ

CLS(累積レイアウトシフト)は、画像や広告枠の寸法を事前に確保していないことで発生します。すべての画像に widthheight を明示し、フォント読み込み時の置換による揺れも抑えます。

3. JavaScript を送りすぎない

INP(次の描画までの応答性)はメインスレッドの混雑に左右されます。静的サイトでは、本当にインタラクティブな要素にだけスクリプトを限定し、不要な JavaScript をクライアントへ送らないことが基本です。

4. フォントの読み込みを最適化する

フォントは表示の遅延要因になりがちです。重要なウェイトだけをプリロードし、font-display: swap でテキストの即時表示を確保します。

5. 計測してから改善する

推測で最適化するのは時間の無駄です。実際のフィールドデータと Lighthouse のラボデータを照らし合わせ、ボトルネックを特定してから手を入れます。

これらは一度きりではなく、運用のなかで継続的に計測し続けることで初めて効果が定着します。