「PageSpeed Insights が赤いんだけど、どこから手を付けたらいい？」というのは、中小企業サイトのリニューアル相談で必ず出る質問です。Core Web Vitals は名前こそ硬いものの、内訳は LCP・INP・CLS の3つだけ。さらに改善も「画像・フォント・CSS・JS・キャッシュ」の5領域に整理できます。本記事ではコーポレートサイトや店舗系HPで効きやすい順に、判定基準と具体的な実装手順をまとめました。
Core Web Vitals が SEO に効く本当の理由
Core Web Vitals（CWV）は Google が定義する「ユーザー体験を数値化した3指標」です。検索順位に対する寄与は、コンテンツ品質や被リンクと比べれば小さい。ただしモバイル検索では「ページエクスペリエンス」のシグナルとして明確にカウントされ、特に同じ条件の競合が並んだ時のタイブレーカーとして働きます。
むしろ実務上のインパクトは、検索順位より先に問い合わせ数に出ます。Google が公開している社内データでも、LCP が 2.5 秒を超えると離脱率が顕著に上がることが繰り返し示されています。中小企業サイトは月間 PV が数百〜数千レベルのことが多く、離脱率が 10 ポイント変われば問い合わせ数に直接響きます。スコアそのものを追うのではなく、「実ユーザーの離脱を減らす指標」として読むのが正しい使い方です。
3つの指標 — LCP・INP・CLS の役割と目標値
Core Web Vitals の中身は、ページを開いてから操作するまでの体験を3段階に切り分けたものです。読み込み速度・反応速度・視覚の安定性。それぞれ役割が違うため、混同しないことが大事です。
| 指標 | 意味 | 目標値（Good） | 要改善ライン |
|---|---|---|---|
| LCP | Largest Contentful Paint。最大の要素（多くはヒーロー画像か見出し）が描画されるまでの時間 | 2.5 秒 以下 | 4.0 秒 超で Poor |
| INP | Interaction to Next Paint。クリック・タップ・キー入力に画面が反応するまでの遅延（2024 年 3 月に FID から置換） | 200 ms 以下 | 500 ms 超で Poor |
| CLS | Cumulative Layout Shift。読み込み中に要素がガタつく量の合計 | 0.1 以下 | 0.25 超で Poor |
LCP は「絵が出るのが遅い」、INP は「押しても反応しない」、CLS は「読んでる最中にズレる」という体感に対応します。中小企業サイトで最も詰まりやすいのは LCP、次いで CLS、INP は JavaScript の重い SPA でない限り大きく崩れません。優先度もこの順で考えると効率がいいです。
計測ツール — PageSpeed Insights と Search Console
計測は基本的に2つで足ります。PageSpeed Insights（pagespeed.web.dev）と Search Console の 「ウェブに関する主な指標」レポートです。
PageSpeed Insights は単一 URL を Lighthouse でシミュレーション計測する「ラボデータ」と、過去 28 日の Chrome 実ユーザー実測値「フィールドデータ（CrUX）」の両方を返します。改善作業中はラボデータを見て、定期モニタリングはフィールドデータを見る、という使い分けが鉄則です。ラボはあくまで再現条件下の数値なので、実環境と乖離します。
Search Console の「ウェブに関する主な指標」は、サイト全体を「Good / 要改善 / Poor」の3区分でグルーピングして見せてくれます。どの URL 群がボトルネックか分かるため、まずここで優先 URL を絞り、PageSpeed Insights で個別に診断、という順で回します。トラフィックの薄い古い記事を直しても CWV は動かないため、上位流入ページから着手するのが定石です。
中小企業サイトで効く施策5つ
ここからが実装パートです。中小企業向けのコーポレートサイト・店舗系HPで投資対効果が高い順に5つ並べます。WordPress でも静的 HTML でも考え方は同じです。
① 画像最適化（WebP・サイズ指定・遅延読み込み）
LCP 改善の8割はここで決まります。中小企業サイトでヒーローに巨大な JPEG をそのまま貼っているケースは今でも非常に多く、これだけで LCP が 4 秒を超えます。やるべきは3点。
- WebP（または AVIF）へ変換: JPEG/PNG をそのまま WebP にすれば、画質をほぼ維持したまま 25〜40% 軽くなります。Squoosh（Web 版）や ImageMagick の
magick input.jpg -quality 80 output.webpで一括変換可能 - 幅と高さを必ず指定:
<img width="1200" height="675">のように属性で寸法を入れる。これだけで CLS（レイアウトシフト）も同時に潰せます - 遅延読み込み: ファーストビュー外の画像に
loading="lazy"を付ける。逆に ファーストビューの主画像には絶対付けない。これを付けると LCP が遅くなります
さらに <picture> 要素で WebP と JPEG をフォールバック構成にすれば、IE 系の古い環境（業務向けで残っているケースあり）にも対応できます。
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="..." width="1200" height="675" fetchpriority="high">
</picture>fetchpriority="high" はファーストビュー画像の優先取得を指示する属性で、LCP を 0.3〜0.8 秒ほど縮めることが多いです。
② フォントの最適化（Web Font の読み込み戦略）
Noto Sans JP のような日本語 Web フォントは、それ単体で 200KB〜500KB になります。読み込み中にテキストが見えない時間（FOIT）が長いと LCP・CLS の両方を悪化させます。対策は3層。
- preconnect で接続を先行:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>をできるだけ上に置く - display=swap で即フォールバック表示: Google Fonts の URL に
&display=swapを付け、Web フォント読み込み中はシステムフォントで先にテキストを描画する - 使うウェイトだけ読み込む: 400/500/700 だけでよければ 300/600/800/900 は外す。指定ウェイトを減らすほど直接的に軽くなります
本気で軽くするなら、Noto Sans JP をやめてシステムフォント（system-ui, -apple-system, "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif）で済ませる選択肢も検討してください。ブランド要件と引き換えになりますが、見た目への影響は実機で確認すると意外に小さく、フォント由来の LCP 悪化は完全に消えます。
③ CSS の最小化と遅延読み込み
WordPress テーマ + プラグインの組み合わせで、何も考えずに作ると CSS が 5〜10 ファイル、合計 300KB を超えることが普通にあります。これは描画ブロッキングになり、LCP を直撃します。
- 1ファイルに結合 + 圧縮: 静的サイトなら
cssnanoやesbuild --minifyで 1 つのstyle.min.cssにまとめる。WordPress なら Autoptimize や WP Rocket で同等のことが可能 - クリティカル CSS のインライン化: ファーストビューに必要な最低限の CSS だけ
<style>として<head>に直接書き、残りはmedia="print" onload="this.media='all'"パターンで非同期読み込みする - 未使用 CSS の削除: Chrome DevTools の Coverage タブで、各ページで実際に使われていない CSS 行が可視化できます。50% 以上が未使用なら整理対象
④ JavaScript の遅延・不要削除
INP の改善はほぼここに集約されます。中小企業サイトでよく見るのが、機能を使っていないのに jQuery・slick.js・aos.js・wow.js などが残っているパターン。読まなくていい JS は削除が最強です。
- defer / async の使い分け: 描画前に必要ない JS は
defer（順序保持）かasync（順不同）を付ける。インライン<script>をやめるだけでも体感が変わります - サードパーティタグの整理: Google Analytics・Tag Manager・チャットウィジェット・ヒートマップ・SNS 埋め込み。これらは1つで 100ms 以上の INP 悪化要因になります。本当に全部必要か、四半期に1回は棚卸しが必要です
- 動画埋め込みは「ファサード」化: YouTube の iframe をそのまま貼ると、JS が大量に読み込まれます。サムネ画像 + クリック後に iframe 差し替え、で同等の体験を維持できます
⑤ サーバ応答時間とキャッシュ（.htaccess 活用）
ここまでフロント側の話でしたが、レンタルサーバの応答時間（TTFB）が遅いと、何をしても LCP の上限が決まってしまいます。共有サーバで TTFB が 600ms を超えるようなら、まずキャッシュを効かせるのが先決です。
静的サイトなら Apache の .htaccess で 1 ファイル追加するだけで十分効きます。
# 静的ファイルのキャッシュ（ブラウザキャッシュ）
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType font/woff2 "access plus 1 year"
</IfModule>
# Gzip / Brotli 圧縮
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml
</IfModule>WordPress の場合は WP Super Cache・W3 Total Cache・LiteSpeed Cache のいずれかでページキャッシュを必ず有効化します。レンタルサーバ側にキャッシュ機能（さくら・ConoHa WING・Xserver）がある場合はそれを最優先で使うのが手間とトラブルが少ない選択です。CDN（Cloudflare 無料プランで十分）を被せれば、地理的に離れた閲覧者の TTFB も均一化できます。
よくある失敗3つ
改善作業で起きがちな事故を3つ挙げます。やる前に読んでおけば回避できる類のものばかりです。
- ファーストビュー画像に
loading="lazy"を付けてしまう: 一括置換ツールでやると起きがち。LCP がかえって悪化するため、ヒーローだけは必ず除外する - キャッシュ設定の cache buster を忘れる:
style.cssを 1 年キャッシュしたまま中身を更新すると、ユーザー側に古い版が残り続ける。style.min.css?v=20260602rのようにバージョン文字列を URL に付け、更新時に変えるのが定石 - プラグインを入れて測りもせず満足する: 「キャッシュプラグイン入れたから速いはず」で終わるケース。実機の PageSpeed Insights で Before / After を必ず比較する。むしろプラグインの設定不整合で遅くなる例もある
改善前後の効果目安
当社で実際に改修した中小企業サイトでの観測値を一般化すると、以下の幅に収まることが多いです（あくまで典型ケースで、サーバ・テーマ・コンテンツ量によって上下します）。
| 項目 | Before の典型 | After（5施策実施後） |
|---|---|---|
| LCP | 3.8 〜 5.5 秒 | 1.5 〜 2.3 秒 |
| INP | 250 〜 500 ms | 80 〜 180 ms |
| CLS | 0.18 〜 0.30 | 0.00 〜 0.05 |
| PageSpeed スコア（モバイル） | 40 〜 60 点 | 85 〜 95 点 |
| ページ全体サイズ | 3 〜 5 MB | 700KB 〜 1.5MB |
スコアの伸び幅より、ページサイズが 1/3 になる効果のほうが、回線が細い地方・モバイル環境では体感に直結します。同時に Search Console の「Good」判定 URL 数が増えるため、ページエクスペリエンス由来の SEO シグナルも自然に改善されます。
まとめと、当社の制作・保守
Core Web Vitals は「3指標 × 5施策」の組み合わせで整理できる、地味な実装作業の積み重ねです。難しいテクニックは要らない代わりに、画像を変換し、不要な JS を消し、キャッシュを設定する、という基本動作を地道にやり切るかどうかで結果が分かれます。順位が動かなくとも、離脱率・問い合わせ数には先に効きます。
株式会社スマートマッチング（京都市伏見区）では、コーポレートサイト・店舗HPの新規制作と、月額のWeb保守をセットで提供しています。既存サイトに対する Core Web Vitals 改修（画像最適化・キャッシュ設定・不要 JS 整理）は保守プラン内の標準作業として対応可能です。業務AI組み込み事例や歯科向けのサンプルサイトもあわせてご確認ください。