中小企業サイトのためのCore Web Vitals：LCP・INP・CLSをやさしく解説

Googleは現在、実際のユーザー体験をランキング要因として使用しており、中小企業のウェブサイトにとってCore Web Vitalsはこれまで以上に重要です。サイトが遅い、または動きが不安定だと、訪問者とランキングを失っています。良いニュースは、最大の問題を修正するために開発者である必要はないということです。

Core Web Vitalsとは、本当は何か？

Core Web Vitalsは、Googleがユーザーがあなたのページをどのように体験するかを評価するために使用する3つの具体的な測定値です。ウェブサイトの速度、応答性、視覚的な安定性の健康診断と考えてください。

• LCP（Largest Contentful Paint） – メインコンテンツ（通常はヒーロー画像や見出し）が表示されるまでの時間。2.5秒未満を目指しましょう。
• INP（Interaction to Next Paint） – 誰かがクリックまたはタップしたときにページがどれだけ速く応答するか。200ミリ秒未満を目指しましょう。
• CLS（Cumulative Layout Shift） – 読み込み中にページがどれだけ動くか。0.1未満を目指しましょう。

これらのいずれかが赤色の場合、Googleは気づきます—そして訪問者も気づきます。

自分のスコアを確認する方法（コード不要）

あなたの現在の状況を正確に教えてくれる無料ツールが2つあります。

PageSpeed Insights – pagespeed.web.devにアクセスし、URLを入力して「分析」をクリックします。モバイルとデスクトップのスコア、および具体的な改善機会のリストが表示されます。「パフォーマンスの問題を診断」セクションがあなたのToDoリストです。

Google Search Console – サイトを確認済みの場合は、「エクスペリエンス」>「Core Web Vitals」を確認してください。これは実際の訪問者からの実世界のデータをURLごとにグループ化して表示します。どのページが「不良」、「改善が必要」、または「良好」かを教えてくれます。

両方を実行してください。PageSpeed Insightsはラボデータと修正案を提供し、Search Consoleは実際のユーザーが時間の経過とともにサイトをどのように体験しているかを示します。

効果のある優先順位付きノーコード修正

コードを1行も触る必要はありません。次の3つの修正を順番に始めてください。

1. ヒーロー画像を圧縮してリサイズする

あなたのLCPはほとんど常に画像です。4MBのヒーロー写真はナンバーワンの殺し屋です。

• 画像を表示される正確な寸法にリサイズします（通常は幅1600px以下）。
• SquooshやTinyPNGなどの無料ツールで圧縮します—200KB未満を目指しましょう。
• プラットフォームがサポートしている場合はWebP形式を使用します。

webcekeを使用している場合、画像は自動的に最適化され、最新の形式で配信されるため、これは処理されます。

2. レンダリングをブロックするスライダーと重いフォントを削除する

スライダーやカルーセルは、他の何かが表示される前に複数の大きな画像とJavaScriptを読み込みます。それらはLCPを遅らせ、INPを悪化させます。それらを単一の静的ヒーロー画像またはシンプルなグリッドに置き換えてください。

重いフォントももう一つの原因です。各フォントファイルは別々のダウンロードです。フォントファミリーを1つか2つに制限し、可能な場合はシステムフォントを使用してください。カスタムフォントを使用する必要がある場合は、実際に必要なウェイトのみを読み込んでください。

3. 広告と埋め込み用のスペースを確保する

CLSは、コンテンツが固定サイズなしで読み込まれるときに発生します。広告、YouTube埋め込み、ソーシャルメディア投稿はよくある原因です。

• 画像とiframeに常に明示的な幅と高さの属性を設定します。
• 広告の場合、広告が読み込まれる前にレイアウト内に固定サイズのコンテナを確保します。
• 既存のコンテンツの上にバナーやポップアップを挿入しないでください。

これによりページのジャンプが止まり、CLSスコアが低く保たれます。

ビフォーアフター：実際の例

地元のベーカリーは、LCPが5.8秒、INPが340ms、CLSが0.32でした。ヒーロー画像を圧縮し、スライダーを削除し、Instagram埋め込み用のスペースを確保した後、スコアはLCP 1.9秒、INP 120ms、CLS 0.04に低下しました。

結果は速度だけにとどまりませんでした：

• オーガニックトラフィックは3ヶ月で42%増加しました。
• 直帰率は68%から41%に低下しました。
• オンライン注文は27%増加しました。

より良いCore Web Vitalsは、より多くの人が滞在し、探索し、購入することを意味しました。

次のステップ

中小企業サイトのCore Web Vitalsは単なる技術的なチェックボックスではありません—それらは何人の顧客があなたを見つけ、信頼するかに直接影響します。今日、PageSpeed InsightsとSearch Consoleでスコアを確認し、上記の3つの修正に取り組んでください。

手作業を避けたい場合は、webcekeが画像、フォント、レイアウトの安定性を自動的に最適化する高速でモバイルフレンドリーなサイトを構築します。webcekeを無料で試して、初日からグリーンのスコアを獲得するサイトを手に入れましょう。