スマホサイトの表示速度が重要な理由
Googleはモバイルファーストインデックスを採用しており、スマホでの表示速度はSEO評価に直結します。さらに、表示に3秒以上かかるページからはユーザーの53%が離脱するというデータもあります。つまり、スマホサイトの表示速度改善は集客・コンバージョンの両面で不可欠です。
Googleが定めるCore Web Vitals（CWV）は、ページ体験を数値化する3つの指標で構成されています。2026年現在の基準は以下のとおりです。
指標 | 測定内容 | 良好の基準 |
|---|---|---|
LCP（Largest Contentful Paint） | 読み込み速度 | 2.5秒以内 |
INP（Interaction to Next Paint） | 操作への応答性 | 200ms以内 |
CLS（Cumulative Layout Shift） | 視覚的安定性 | 0.1未満 |
これらは実ユーザーデータ（CrUX）の75パーセンタイルで評価されます。特にINPは43%のサイトが基準を満たせていない、最も難易度の高い指標です。
PageSpeed Insightsの正しい読み方
まず現状把握から始めましょう。PageSpeed InsightsにURLを入力すると、スコアと改善提案が表示されます。
フィールドデータとラボデータの違い
- フィールドデータ：実際のユーザー（Chrome UX Report）から収集された過去28日間のデータ。SEO評価に使われるのはこちら
- ラボデータ：Lighthouseによるシミュレーション結果。改善の方向性を把握するのに有効
よくある誤解として「スコア90点以上でないとSEOに不利」という考えがありますが、Googleが検索順位に使うのはフィールドデータのCWV合否であり、Lighthouseスコアそのものではありません。スコアは改善の目安であり、絶対的な指標ではないことを理解しておきましょう。
改善提案の優先順位の付け方
- 「機会」セクションの節約可能時間が大きい項目から対応
- フィールドデータで赤（Poor）の指標を最優先
- 「診断」セクションは補助情報として活用
自分でできる表示速度改善（7つの施策）
専門知識がなくても取り組める施策を、効果が大きい順に紹介します。
1. 画像の最適化（LCP改善に最も効果的）
Webページの容量の60〜70%を画像が占めます。ここを改善するだけでスコアが大幅に向上するケースが多いです。
- WebP形式に変換する（JPEGより30〜50%軽量化）
- スマホ向けに適切なサイズ（横幅750px程度）にリサイズ
- ファーストビュー外の画像に
loading="lazy"を付与 - 注意：LCP要素（メインビジュアル等）にはlazy loadingを使わない
2. レンダリングブロックの排除
- 使っていないCSSを削除する
- JavaScriptに
defer属性またはasync属性を付与 - クリティカルCSSをインライン化し、残りを非同期読み込み
3. ブラウザキャッシュの設定
画像やCSS・JSファイルのキャッシュ期間を長めに設定します。2026年現在、Lighthouseは以前より長い期間を推奨しています。
4. Webフォントの最適化
font-display: swapを指定してテキストの表示を遅延させない- 使用する文字だけサブセット化する（日本語フォントは特に効果大）
5. サードパーティスクリプトの整理
- 不要なアナリティクスタグ・広告タグを削除
- 必要なタグもGTM経由で遅延読み込み
6. CLS対策（レイアウトずれ防止）
- 画像・動画に
widthとheight属性を明記 - 広告枠にCSSで固定サイズを指定
- Webフォント読み込み時のレイアウトずれを
font-display: optionalで軽減
7. INP対策（操作の応答性改善）
- 長いJavaScriptタスクを分割する（50ms以下に）
- イベントハンドラ内の処理を最小限にする
requestAnimationFrameやsetTimeoutで重い処理を分散
WordPress高速化プラグインと設定
WordPressを使っている場合、以下のプラグインが表示速度改善に効果的です。
- EWWW Image Optimizer：画像を自動でWebP変換・圧縮
- Asset CleanUp：ページごとに不要なCSS/JSを無効化
- WP Super Cache / W3 Total Cache：ページキャッシュ生成
- Autoptimize：CSS/JSの結合・圧縮
ただし、プラグインの入れすぎ自体が速度低下の原因になります。定期的に使用していないプラグインを整理し、本当に必要なものだけに絞りましょう。
プロに依頼すべき高度な対策
以下の対策は専門的な知識が必要で、自社で取り組むとかえって不具合を起こすリスクがあります。
サーバーサイドの最適化
- CDN（コンテンツ配信ネットワーク）の導入
- サーバーレスポンスタイム（TTFB）の改善
- HTTP/2またはHTTP/3への対応
サイト構造の見直し
- SSR（サーバーサイドレンダリング）やSSG（静的サイト生成）への移行
- Speculation Rules APIによるプリレンダリング実装
- Fetch Priority APIを使ったリソース優先度の制御
プラットフォーム移行
WordPressからNext.jsなどのモダンフレームワークに移行すると、画像最適化（自動WebP変換・サイズ調整）やコード分割が標準で組み込まれており、根本的な速度改善が見込めます。
表示速度改善の進め方（5ステップ）
- 現状測定：PageSpeed Insightsでフィールドデータを確認
- 課題の優先順位付け：赤い指標 → 節約時間が大きい項目の順
- 自分でできる施策の実行：画像最適化から着手
- 効果測定：改善後に再度測定し、Before/Afterを記録
- 専門家への相談：自力で改善しきれない部分はプロに依頼
表示速度の改善は一度やれば終わりではなく、新しいコンテンツ追加のたびにチェックすることが重要です。サイトの更新頻度とSEOの関係についても合わせて確認しておきましょう。
まとめ：スコアより実ユーザー体験を重視する
スマホサイトの表示速度改善で最も重要なのは、PageSpeed Insightsのスコアを追うことではなく、実際のユーザー体験を良くすることです。フィールドデータでCWVの3指標を「良好」にすることを目標に、効果の大きい施策から着手しましょう。
サイト全体のSEO強化についてはコーポレートサイトのSEOチェックリストも参考になります。また、表示速度改善を含むリニューアルを検討している方はホームページリニューアル費用の相場と内訳をご覧ください。