表示が遅いサイトは損をする——Core Web Vitalsとページ速度改善の基本

Googleは表示速度を検索ランキングの評価要素に含めています。「Core Web Vitals」とは何か、なぜ重要か、そして具体的に何をすれば改善できるのかを解説します。

表示が遅いサイトは損をする——Core Web Vitalsとページ速度改善の基本

「重いサイト」はユーザーもGoogleも見捨てる

あなたのホームページ、スマホで開いてみてください。表示されるまで何秒かかりますか?

Googleのリサーチによればモバイルサイトはページロードが1秒から3秒になると直帰率が32%増加します。5秒では90%増加します。つまり、サイトが遅ければ遅いほど、せっかく来てくれたユーザーがすぐに離れてしまうのです。

さらに2021年以降、Googleは**Core Web Vitals(コアウェブバイタル)**という指標を検索ランキングの評価要素として採用しました。サイトの速度・安定性・インタラクティビティが検索順位にも影響するようになったのです。

Core Web Vitalsとは何か

Core Web Vitalsは、ユーザー体験を測る3つの指標から構成されています。

LCP(Largest Contentful Paint)——最大コンテンツの表示速度

ページを開いたときに、最も大きな画像やテキストが表示されるまでの時間です。

  • 良好: 2.5秒以内
  • 要改善: 4.0秒以内
  • 不良: 4.0秒超

ファーストビューのヒーロー画像や大きなテキストブロックが対象になることが多いです。

INP(Interaction to Next Paint)——インタラクション応答速度

ボタンをクリックしたりフォームに入力したとき、画面が反応するまでの速さです。2024年にCLSから入れ替わった比較的新しい指標です。

  • 良好: 200ms以内
  • 要改善: 500ms以内
  • 不良: 500ms超

CLS(Cumulative Layout Shift)——レイアウトのずれ

ページを読み込んでいる最中に、コンテンツが突然ずれる現象を数値化した指標です。「読もうとしたら広告が表示されてボタンを押してしまった」という体験がCLSの悪化です。

  • 良好: 0.1以下
  • 要改善: 0.25以下
  • 不良: 0.25超

自分のサイトを計測する

PageSpeed Insights(無料)

Googleが提供する無料ツールです。URLを入力するだけで、モバイル・デスクトップ別にCore Web Vitalsの数値とその改善提案を表示してくれます。

https://pagespeed.web.dev/ でアクセスできます。

Google Search Console

Search Consoleの「ウェブに関する主な指標」レポートで、サイト全体のCore Web Vitalsの状況を把握できます。どのページが「不良」「要改善」になっているかを一覧で確認できます。

LCPを改善する具体的な方法

画像の最適化が最優先

LCP悪化の原因の大半は、大きすぎる・最適化されていない画像です。

やること:

  • WebP形式に変換する(JPGより30〜50%軽量)
  • スマホ表示用に適切なサイズにリサイズする(幅1200px程度で十分なケースが多い)
  • loading="lazy" 属性をファーストビュー以外の画像に付与する
  • ファーストビューの画像には fetchpriority="high" を付与する

サーバーの応答速度を上げる

ホスティングサービスの品質も影響します。格安の共有サーバーから、ConoHa WINGやさくらのクラウドなどパフォーマンスの良いサービスへの移行を検討してください。

CDN(コンテンツデリバリーネットワーク)の活用

Cloudflareなどのサービスを使うと、ユーザーの近くにあるサーバーからコンテンツを配信できるため、ロード時間が大幅に短縮されます。

CLSを改善する具体的な方法

画像・広告のサイズを事前に指定する

HTMLのwidthheight属性、またはCSSで画像の表示サイズを事前に指定しておくと、読み込み前後でレイアウトがずれなくなります。

<!-- 悪い例 -->
<img src="photo.jpg" alt="写真">

<!-- 良い例 -->
<img src="photo.jpg" alt="写真" width="800" height="600">

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

WebフォントはCLSの一因になります。font-display: swap を指定し、フォント読み込み中もテキストが表示されるようにしましょう。

どの順番で対応すべきか

全部一度にやる必要はありません。優先順位をつけて対応しましょう。

  1. PageSpeed Insightsで現状把握(スコアと課題を確認)
  2. 画像の最適化(最も効果が大きい)
  3. 不要なプラグイン・スクリプトの削除(WordPress利用者向け)
  4. ホスティング環境の見直し
  5. CDN導入

まとめ

表示速度の改善は地味な作業ですが、集客(SEO)とコンバージョン(問い合わせ・購入率)の両方に直結する重要な投資です。

月に1回でもPageSpeed Insightsでスコアを確認する習慣をつけることをお勧めします。スコアが大きく落ちていれば、サイトに何か問題が起きているサインである可能性があります。

「サイトが重くなった気がする」「PageSpeed Insightsのスコアが低い」という方は、ぜひご相談ください。


パフォーマンスを考慮したホームページ制作もご支援しています。海老名市のホームページ制作では、AI活用で高品質かつ高速なサイトを構築しています。

CONTACT

ご相談・お問い合わせ

記事の内容についてのご質問、プロジェクトのご相談など、
お気軽にお声がけください。

お問い合わせ