サイトの表示速度改善の進め方｜効果の大きい施策から着手する手順

表示速度の改善は、「測る」「遅い指標を1つに絞る」「手間の小さい施策から1つずつ試す」「同じ条件で測り直す」の4段で進めると迷いません。表示速度改善とは、ページの読み込みから操作できるようになるまでの待ち時間を縮める取り組みのことです。Mobilisticaが自社のECサイトで記録した実測値も交えながら、着手する順番を整理しました。

Googleは検索セントラル「Core Web Vitals と Google 検索の検索結果について」で、次のように書いています。

「Core Web Vitals は、その他のページ エクスペリエンス要素とともに、Google のコア ランキング システムがランキングを決定する際に考慮する要素です。」

ただし、速さだけで順位が決まるわけではありません。この点は後半の「注意点」で、Googleの説明をもとに補足しています。

表示速度改善とは？まず「どの指標が遅いか」を測る

手をつける前に、施策を選ぶのではなく、遅い場所を数字で確かめるのが先です。サイトによって遅い原因は違います。画像が重いページもあれば、JavaScriptの処理で反応が鈍いページや、読み込み中にレイアウトがずれるページもあります。

基準として使うのが、Googleが定めるCore Web Vitalsの3指標です。web.dev「Web Vitals」は、目標値を次のように示しています。

指標	何を測るか	良好の目安（web.devより）
LCP（Largest Contentful Paint）	読み込みパフォーマンス	読み込み開始から2.5秒以内
INP（Interaction to Next Paint）	インタラクティブ性（操作への反応）	200ミリ秒以下
CLS（Cumulative Layout Shift）	視覚的な安定性（表示のずれ）	0.1以下

合否の決め方も同じページにあります。web.devは「3 つの Core Web Vitals 指標すべてで 75 パーセンタイルの推奨目標値を満たしている場合、ページは合格と見なされます」と説明しています。3つのうちどれが目安を外れているかで、効く施策は変わってきます。

測るときは、PageSpeed Insightsの2種類のデータを区別しておくと便利です。PageSpeed Insightsの公式ドキュメントによると、ラボデータは「制御された環境で収集されるため、問題のデバッグに役立ちます」。一方のフィールドデータは「実際のユーザー エクスペリエンスをそのまま把握するのに役立ちます」とされ、過去28日間の実際のユーザーのデータに基づいています。

施策の効果をその日のうちに確かめるならラボデータ、利用者の体感が良くなったかを見るならフィールドデータ、と使い分けると混乱しません。アクセスが少なくフィールドデータが出ないページの読み方は、フィールドデータが出ないサイトのCore Web Vitalsの読み方にまとめています。

遅い指標ごとに、効く施策の当たりをつける

3指標のどれが遅いかが分かれば、試す施策をかなり絞れます。各指標の原因の切り分けと手順は、Mobilisticaの個別記事で実測データとともに詳しく扱っています。

遅い指標	まず疑う場所	詳しい手順
LCP	大きな画像、読み込みを止めるWebフォントやCSS、サーバーの応答	LCP改善の方法
INP	クリックやタップの後に走るJavaScriptの処理	INPとは？改善の手順
CLS	サイズ指定のない画像、後から差し込まれる広告や埋め込み	CLSの原因と改善方法

3指標の全体像をまだ押さえていない場合は、先にCore Web Vitalsとは？LCP・INP・CLSの合格ラインを読んでおくと、PageSpeed Insightsの画面が読みやすくなります。

施策比較表：手間の大きさと自社での実測値

代表的な施策を、実装の手間と、Mobilisticaが運営するECサイトで測った結果で並べました。手間の大小はMobilisticaの作業経験にもとづく目安です。実測値の欄が「未実施」の施策は、自社ではまだ試していません。

施策	実装の手間	Mobilisticaの実測（同じ条件で測り直した結果）
画像の圧縮とレスポンシブ化	小〜中	JPEGを904KBから202KBに圧縮し、レスポンシブ画像とWebP配信を組み合わせて、LCPが6.2秒から4.6秒に
日本語Webフォントの見直し	小（見た目の確認は必要）	システムフォントへの切り替えで転送量1,580KBを削減
Webフォントの読み込みを非ブロッキングにする	小	テーマファイル1つ・十数行の修正で、LCPが5.76秒から3.22秒に
使わないJavaScriptを読み込まない	中	機能を使わないページでの読み込みをやめ、163KBを削減
CSSの分割	中	126KB相当の1本を、共通部分35KBとページ固有91KBに分割
計測タグなど外部スクリプトの遅延読み込み	中	初回操作または5秒後に読み込む方式へ変更（計測は止めない）
CDNの導入	中	未実施（検討中）
サーバー・ホスティングの見直し	大（移行作業が発生）	未実施

画像とフォントの数字は、モバイルPageSpeedスコアを28点から76点に改善した実測記録と十数行の修正でLCPを2.5秒縮めた実測から取りました。28点から76点への改善は、表の上から6つのうちCDN以外の施策を組み合わせた結果です。画像だけで達成した数字ではありません。

手間の小さい施策でも、効き方はサイトの作りで変わります。自社の例では、フォント1か所の修正が画像の圧縮と同じくらいLCPに効きました。表の順番を絶対視せず、自分のサイトで遅い指標に関係する行から試してください。

優先度別のおすすめの進め方

Mobilisticaでは、次の4ステップで進めています。

1. ステップ1：無料診断ツールで現状のボトルネックを特定する

   PageSpeed Insightsで3指標の値を確認します。Mobilisticaが公開しているモバイルECサイト無料診断でも、URLを入力するだけで、どの項目から直すべきかを優先順位付きで確認できます。会員登録は不要です。

2. ステップ2：遅い指標に関係する施策を1つだけ試す

   比較表のうち、遅い指標に関係していて手間の小さいものを1つ選びます。自社のECサイトでは、画像・フォント・JavaScript・CSS・外部スクリプトを1つずつ直していき、モバイルのPerformanceスコアが28点から76点になりました。

   改善前

   28

   →

   改善後

   76

   運営ECサイト（コーヒー豆通販）トップページ モバイルPerformanceスコアスコア

3. ステップ3：同じ条件で測り直し、効いたかを確かめる

   変更のたびに、同じページ・同じ端末区分（モバイルかパソコンか）で測り直します。ラボデータの値は回ごとに揺れるので、1回の数字で判断しないことも大切です。

4. ステップ4：記録を残し、サイトを更新したら再診断する

   何を変えて、どの値がどう動いたかを記録しておきます。プラグインの追加やデザインの変更で、いったん改善した数値が戻ることもあります。大きな更新の後には診断をやり直してください。

注意点・よくある失敗

いちばん多い失敗は、施策を同時に複数入れてしまい、どれが効いたのか分からなくなることです。不具合が出たときに元へ戻す箇所も特定しにくくなります。

「定番の高速化テクニック」が逆効果になる場合もあります。Mobilisticaの例では、ブロックエディタ用のCSS（wp-block-library）の読み込みを止めたところ、Speed Indexが2.9秒から4.8秒に悪化しました。初期表示に必要なスタイルまで削ってしまったためで、この変更は採用していません。

高速化をうたうプラグインを入れただけで終わるのも避けたいところです。導入後も、PageSpeed Insightsで値が変わったかを確かめてください。

もう一つの注意点は、速さと検索順位の関係です。Google検索セントラル「ページ エクスペリエンスが Google 検索の検索結果に与える影響について」には、次の一文があります。

「Google 検索は、ページ エクスペリエンスが平均を下回るコンテンツも含め、常に最も関連性の高いコンテンツが表示されるように設計されています。」

同じページでは、検索語句に一致する有用なコンテンツが多数ある場合に、優れたページ エクスペリエンスが重要になるとも説明されています。表示速度は中身の代わりにはなりません。中身を整えたうえで、差をつける土台として取り組むのが妥当です。

よくある質問（表示速度改善 FAQ）

表示速度改善は何から始めればいいですか？

PageSpeed InsightsでLCP・INP・CLSのどれが目安を外れているかを確かめることから始めます。遅い指標が分かれば、試す施策を絞れます。

表示速度と検索順位はどのくらい関係がありますか？

Google検索セントラルは、Core Web Vitalsをコア ランキング システムが考慮する要素の一つと説明しています。一方で、最も関連性の高いコンテンツが表示されるように設計されているとも書いており、速さだけで順位が決まるわけではありません。

ラボデータとフィールドデータはどちらを見ればいいですか？

施策の効果をすぐ確かめるにはラボデータ、実際の利用者の体感を見るにはフィールドデータが向いています。フィールドデータは過去28日間の実データなので、変更が反映されるまで時間がかかります。

効果が出るまでどのくらいかかりますか？

施策によります。Mobilisticaの例では、Webフォントの読み込み方の修正は約15分の作業で、反映後すぐのラボデータでLCPが2.5〜2.9秒短くなりました。フィールドデータに表れるのは、その後の28日間で集計が入れ替わってからです。

全部の施策を一度にやる必要がありますか？

一度にまとめて入れるのはおすすめしません。どれが効いたのか分からなくなり、不具合の原因も切り分けにくくなります。遅い指標に関係するものから1つずつ試し、そのたびに測り直して記録を残してください。

まとめ

表示速度の改善は、施策を手当たり次第に試すより、遅い指標を確かめてから関係する施策を1つずつ入れるほうが結果につながります。

• PageSpeed InsightsでLCP・INP・CLSのどれが遅いかを確かめる
• 遅い指標に関係していて手間の小さい施策から1つずつ試す
• 変更のたびに同じ条件で測り直し、記録を残す

Mobilisticaでは、運営するサイトで測った改善前後の数値を、うまくいかなかった施策も含めて今後も公開していきます。まずは自分のサイトでモバイルECサイト無料診断を試すところから始めてみてください。

---

※本記事の実測値は、Mobilisticaが運営するサイトをPageSpeed Insightsで計測した記録です。値はサイトの構成や計測のたびに変わります。
※Core Web Vitalsの目安とPageSpeed Insightsの説明は、2026年10月20日時点のGoogle公式ドキュメントによります。
最終更新: 2026年10月20日
Mobilisticaの運営者情報はこちらをご覧ください。