「サイトが重い」と言われても、何が原因でどこから手を付ければいいのか分からない。この状態で制作会社に相談すると、いきなりサーバーの上位プランやCDNの導入を提案されることがあります。しかし中小企業サイトで表示が遅い原因は、9割が画像です。この記事では、専門知識がなくてもPageSpeed Insightsを使って原因を自分で切り分ける手順を解説します。
まずPageSpeed Insightsでスコアではなく指摘項目を見る
表示速度の測定にはGoogleが提供するPageSpeed Insightsという無料ツールを使います。URLを入力するだけで、数十秒後に結果が表示されます。
点数に一喜一憂しても意味がない
結果画面には0から100のスコアが大きく表示されますが、最初に見るべきはスコアではなく、下部の改善項目です。スコアは測定のたびに10点前後変動するため、数字を追いかけても得るものがありません。改善項目には具体的に何をすればいいかが書かれています（出典 Google PageSpeed Insights について）。
モバイルとPCで結果が大きく異なる
PageSpeed Insightsは、モバイルとPCで別々のスコアを出します。モバイルの方が厳しい条件で測定されるため、PCで90点、モバイルで40点という結果は珍しくありません。中小企業サイトの閲覧はスマートフォンが中心のため、優先して見るべきはモバイルのスコアと指摘項目です。
見るべき3つの指標の意味
| 指標 | 意味 | 目標値 | 主な原因 |
|---|---|---|---|
| LCP | 最も大きい要素が表示されるまでの時間 | 2.5秒以内 | メイン画像のサイズ、サーバー応答 |
| CLS | 表示中にレイアウトがずれる量 | 0.1以下 | 画像の縦横指定漏れ、広告の後読み |
| INP | 操作してから反応するまでの時間 | 200ミリ秒以内 | 過剰なJavaScript、プラグインの多重読み込み |
この3指標はCore Web Vitalsと呼ばれ、Googleがユーザー体験を測る指標として定義しているものです（出典 web.dev Web Vitals）。
指摘項目の上から3つだけ見れば原因はほぼ分かる
改善項目は10個以上並びますが、上位に表示されるものほど改善効果が大きい順になっています。
「次世代フォーマットでの画像の配信」が出たら画像が原因
この指摘が出ている場合、画像のファイル形式が古いか、サイズが過大です。JPEGやPNGをWebPという新しい形式に変換すると、画質をほぼ維持したまま容量を3割から7割削減できます。この1項目だけで表示速度が2秒改善することもあります。
「適切なサイズの画像」は縮小されていない画像がある証拠
表示される枠は幅600ピクセルなのに、幅4000ピクセルの画像を読み込んでいる状態です。スマートフォンで撮った写真をそのままアップロードしているサイトで必ず出ます。指摘欄には該当する画像のURLと、削減できる容量が具体的に表示されます。
「レンダリングを妨げるリソースの除外」はプラグインの読み込み過多
ページの表示を開始する前に、CSSやJavaScriptの読み込み完了を待っている状態です。プラグインを多く入れているサイトで発生します。プラグインの整理か、キャッシュプラグインの遅延読み込み設定で改善します。
指摘項目と対処の対応表
| 指摘項目 | 原因 | 対処 | 難易度 |
|---|---|---|---|
| 次世代フォーマットでの画像の配信 | 画像形式が古い | WebP変換プラグインを導入 | 低い |
| 適切なサイズの画像 | 画像が大きすぎる | アップロード前に縮小、圧縮プラグイン導入 | 低い |
| オフスクリーン画像の遅延読み込み | 画面外の画像も先に読み込んでいる | 遅延読み込み（Lazy Load）を有効化 | 低い |
| レンダリングを妨げるリソースの除外 | CSS・JSの読み込みが先行している | キャッシュプラグインの最適化設定 | 中程度 |
| 使用していないJavaScriptの削減 | 不要なプラグインが読み込まれている | 使っていないプラグインを削除 | 中程度 |
| サーバーの応答時間が遅い | サーバー性能またはDB負荷 | サーバー移行、キャッシュ導入 | 高い |
画像の最適化だけで大半のサイトは十分速くなる
中小企業サイトの改善は、画像への対処で完結することがほとんどです。
アップロード前に幅1600ピクセル以下へ縮小する
フルスクリーンで使うメイン画像でも幅1920ピクセルあれば十分で、通常のコンテンツ画像は幅1200〜1600ピクセルで足ります。スマートフォンの写真は幅4000ピクセル前後あるため、そのまま使うと必要量の何倍ものデータを送ることになります。（回線が細い環境では、写真1枚のためにユーザーを10秒待たせています）
圧縮プラグインで既存画像を一括処理する
すでにアップロード済みの画像が数百枚ある場合、手作業での差し替えは現実的ではありません。EWWW Image OptimizerやConverter for Mediaなどの圧縮プラグインを使えば、既存画像を一括で圧縮・WebP変換できます。
- プラグインを導入する前に必ずバックアップを取得する
- 圧縮設定は「可逆圧縮」から始め、画質を確認してから強度を上げる
- 一括処理は画像枚数によって数十分から数時間かかる
- 処理後に主要ページの画像表示を必ず確認する
- WebP非対応環境向けの代替表示が有効か確認する
遅延読み込みは効果が大きく副作用が少ない
遅延読み込みは、画面に表示されていない画像を後から読み込む仕組みです。WordPress 5.5以降は標準で有効になっていますが、テーマやプラグインの実装によっては無効化されていることがあります。ページ下部に画像が多いサイトほど効果が大きい施策です。
画像圧縮プラグインの中には、元画像を上書きして戻せなくなるものがあります。導入前に必ずバックアップを取り、元画像の保持設定を確認してください。
サーバーの増強を検討するのは画像対応が終わってから
順番を間違えると、費用だけかかって効果が出ません。
サーバー応答時間が0.6秒を超えていれば移行を検討する
PageSpeed Insightsの「サーバーの初期応答時間の短縮」という項目に表示される数値が0.6秒を超えている場合、サーバー側にボトルネックがあります。この場合はプラン変更やサーバー移行が有効です。逆に0.3秒以下なら、サーバーは十分な性能を持っており、増強してもほとんど変わりません。
CDNは月間1万PV以下のサイトには不要
CDN（世界中に配信拠点を置く仕組み）は、アクセスが多いサイトや海外からの閲覧が多いサイトで効果があります。国内向けで月間1万PV以下のサイトにCDNを導入しても、体感できる差はほぼありません。（提案されたら、まず画像の状態を見せてもらってください）
プラグインの数が20を超えていたら整理を優先する
プラグインが増えるほど、読み込まれるCSSとJavaScriptが増えます。使っていないプラグイン、機能が重複しているプラグイン、2年以上更新されていないプラグインを整理するだけで、体感速度が変わることがあります。サーバー増強より安く、セキュリティ面でも効果があります。
改善後は同じ条件で測定して効果を確認する
対応したら必ず測り直します。
測定は同じ時間帯・同じページで行う
PageSpeed Insightsの結果は測定タイミングで変動します。改善前後を比較する際は、同じページ・同じ時間帯で複数回測定し、平均で判断してください。1回の測定結果だけで良くなった悪くなったと判断するのは正確ではありません。
実際のユーザーデータも確認する
PageSpeed Insightsの上部には、実際のChromeユーザーから収集されたデータが表示される場合があります。これは実測値であり、下部のシミュレーション結果より実態を反映しています。アクセス数が少ないサイトでは表示されないことがあります。
体感速度をスマートフォンの実機で確認する
数値がすべてではありません。改善後、自分のスマートフォンをモバイル回線に切り替えて実際にサイトを開いてみてください。Wi-Fi環境での確認では、遅さの本質が分かりません。ユーザーの多くは移動中の回線で見ています。
最後に
表示速度の改善は、専門知識よりも順番が重要です。PageSpeed Insightsで指摘項目を上から3つ確認し、画像に関する指摘があればそこから着手する。この手順を踏めば、費用をかけずに大半のサイトは十分な速度になります。サーバー増強やCDNの検討は、画像とプラグインの整理が終わってからで遅くありません。
Web管理では、月額1万円からホームページの運用保守を代行しています。表示速度の診断、画像の一括最適化、プラグイン整理まで対応可能です。「重いと言われるが何をすればいいか分からない」という状態のご相談も歓迎します。まずはお気軽にお問い合わせください。
