ホームページが重い、表示が遅いと感じたら、まず PageSpeed Insights(Googleの無料の診断。pagespeed.web.dev)で、遅いページを携帯電話の条件で測ります。原因はたいてい、①画像が大きすぎる、②プラグインやテーマが読み込むCSS・JavaScriptが多い、③サーバーの応答が遅い、④外部のタグ(解析、広告、チャット、地図、SNSの埋め込み)が多い、⑤動画や動きの多いデザイン、のどれか、またはその組み合わせです。
どれが原因かは、PageSpeed Insights でどの指標が悪いか、どんな改善項目が出たかで見当がつきます。直す順番は、①消すだけで済むもの(使っていないプラグインやタグ)、②画像、③動画・動き・埋め込みの見直し、④テーマやプラグインの読み込み方、⑤サーバー、の順がおすすめです。お金と手間がかからず、壊れにくいものから先に手を付けます。
なお、「直したのに変更が反映されない」という困りごとは、重さとは別の問題です。その場合はWordPressで変更が反映されないとき:キャッシュクリアの場所と順番をご覧ください。
まず測る:体感ではなく、ページごとの数字で
「重い」という感じ方は、人と端末と回線で大きく変わります。自分のパソコンで速くても、初めて来た人のスマホでは遅いことがありますし、その逆もあります。直す前に、次の手順で数字を取ります。
- 遅いと感じるページと、問い合わせにつながる主なページ(トップ、サービスや料金、問い合わせ、よく読まれる記事)のURLを書き出します。
- PageSpeed Insights に1本ずつURLを入れて「分析」を押し、「携帯電話」の結果を見ます。
- 5つの指標(FCP、LCP、TBT、CLS、Speed Index)と、改善項目の名前を控えます。2〜3回測ると、ばらつきが分かります。
- ページごとに、どの指標が赤やオレンジかを比べます。全ページで遅いのか、特定のページだけ遅いのかで、原因の当たりが変わります。
結果の読み方はPageSpeed Insightsの使い方と見方に、指標の意味と基準値はコアウェブバイタルとはにまとめました。
自分の端末で確かめるときは、ブラウザのシークレットウィンドウで開くと、一度見たページの控え(キャッシュ)を使わない、初めての訪問者に近い状態で見られます。
症状と数字から、原因の当たりをつける
PageSpeed Insights の結果と、実際の見え方を合わせると、5つの原因のどれを疑うかが絞れます。
| 見え方 | 目立つ数字・改善項目 | 疑う原因 |
|---|---|---|
| しばらく真っ白で何も出ない | FCPが遅い、レンダリングをブロックしているリクエスト | サーバー、テーマやプラグインのCSS・JavaScript |
| 文字は出るが、大きな写真がなかなか出ない | LCPが遅い、画像配信を改善する | 画像、一番上の動画やスライダー |
| 表示された後、押しても反応が鈍い | TBTが長い、使用していない JavaScript の削減 | プラグイン、外部のタグ、動きの多いデザイン |
| 読んでいる途中で文章がずれる | CLSが大きい | 大きさの指定がない画像、後から入る広告や埋め込み |
| 特定のページだけ遅い | そのページだけ数字が悪い | そのページの動画、地図、SNSの埋め込み、大きな画像 |
| 管理画面まで遅い | (訪問者側の数字では出にくい) | サーバー、プラグイン |
全ページで同じように遅いなら、全ページに共通する部分(サーバー、テーマ、全ページで動くプラグインや外部のタグ)が原因の候補です。特定のページだけ遅いなら、そのページにしかない画像や埋め込みを疑います。
原因ごとの見分け方と直し方
画像:自分で直しやすく、効き目も分かりやすい
スマホで撮った写真をそのまま載せると、表示する大きさの何倍もの画像を読み込ませることになります。PageSpeed Insights で「画像配信を改善する」という項目が出ていれば、どの画像を、どれだけ軽くできるかが一覧で出ます。Chromeの説明では、推定で4KiB以上軽くできる画像が対象です。
直し方は、表示する大きさに合わせて縮める、WebPなどの軽い形式にする、圧縮の度合いを調整する、の3つです。手順は画像の最適化:ホームページの画像を軽くする方法に書きました。
プラグインとテーマ:数より「何を読み込むか」
WordPress.org の公式の説明は、プラグインの数とその性能がサイトの速さに大きく影響し、使っていないプラグインを停止して削除することは、速さを良くする大きな手段だとしています。また、軽いテーマは、画像の多い重いテーマよりずっと効率よく動く、とも書いています。
ただ、数を減らすことが目的ではありません。問題は、そのページで使わないCSSやJavaScriptまで、全ページで読み込んでいるかどうかです。PageSpeed Insights の「使用していない JavaScript の削減」「使用していない CSS の削減」を開くと、該当するファイルのURLが出ます。URLの途中に「/plugins/プラグインの名前/」とあればそのプラグイン、「/themes/テーマの名前/」とあればテーマが読み込んでいるファイルです。
どのプラグインがどれだけ効いているかは、WordPress.org の説明にあるとおり、一つずつ止めて測り比べると分かります。本番のサイトで試すときは、先にバックアップを取り(WordPressのバックアップ方法)、問い合わせフォームや予約など止められない機能のプラグインは止めないでください。
サーバー:最初の応答が遅い
ページの中身を受け取る前の、サーバーの最初の応答が遅いと、どんなに画像を軽くしても速くなりません。疑うサインは、文字だけの軽いページでも最初の表示(FCP)が遅い、管理画面の操作まで遅い、時間帯によって遅さが変わる、などです。PageSpeed Insights の上の部分(実際のユーザーの環境)に数字が出ていれば、TTFB(最初の1バイトが届くまでの時間)も表示されます。Googleの説明では、800ミリ秒までが良好の目安です(試験運用中の指標)。
WordPress.org の説明は、サーバーの性能がサイトの速さに大きく影響すること、キャッシュの仕組みがないと閲覧が重なったときに遅くなること、新しいPHP(WordPressを動かすプログラムの言語)の版は性能の改善を含むことが多いことを挙げています。サーバー側で打てる手は、キャッシュの機能を使う、PHPを新しい版にする(WordPressのアップデート手順)、プランやサーバーを替える(WordPressの引っ越し)、の順に手間と費用が大きくなります。
外部のタグ:入れたまま誰も見ていないもの
アクセス解析、広告の計測、チャット、予約、地図、SNSの埋め込みなど、外部のサービスから読み込むプログラムを、ここでは外部のタグと呼びます。web.dev の説明は、こうしたサードパーティ(外部の事業者)のスクリプトがサイトのパフォーマンスを下げる可能性があるとし、サイトに明確な価値をもたらさないなら削除する、表示に必須でなければ async か defer(表示を止めずに読み込む指定)を使う、埋め込みは必要になるまで読み込まない(遅延読み込み)、といった対処を挙げています。
会社のサイトで多いのは、昔の広告の計測タグ、試しに入れたチャット、使っていない解析ツールが残っている状態です。一つずつ「このデータを、今だれが見ているか」を確かめ、誰も見ていないものは外します。どこに何が入っているか分からないときは、PageSpeed Insights の改善項目のURLに、外部のサービスのドメインが出ていないかを見ます。
動画と動きの多いデザイン:見た目の代わりに重さを払っている
ページの一番上で自動再生する背景の動画、何枚も切り替わるスライダー、スクロールに合わせて動く演出は、どれも読み込む量とJavaScriptの処理を増やします。一番上にある大きな要素はLCPの対象になりやすいので、ここが重いと数字に直接響きます。
YouTubeなどの埋め込みは、ページを開いた時点で読み込みが始まります。WordPressは5.7から、本文の iframe(外部のページを埋め込む枠)に、幅と高さの指定があれば遅延読み込みの指定(loading=”lazy”)を自動で付けますが、埋め込みの形によっては付かないこともあります。また、web.dev と Chrome の説明は、大きなアニメーションGIFは動画に比べて効率が悪いとし、動画(MP4やWebM)に置き換えることを勧めています。
動きを減らすかどうかは、デザインの判断です。その動きが、訪問者が問い合わせを決める助けになっているかで決めます。印象づけのための演出なら、スマホでは止める、静止画に替える、といった選び方もあります。
直す順番:お金と手間がかからず、壊れにくいものから
| 順番 | やること | 主にだれが |
|---|---|---|
| 1 | 使っていないプラグイン、見ていないタグ、使っていない埋め込みを外す | 自社 |
| 2 | 大きすぎる画像を縮め、形式と圧縮を見直す | 自社 |
| 3 | 一番上の動画、スライダー、動きの演出を見直す | 自社と制作会社 |
| 4 | テーマやプラグインのCSS・JavaScriptの読み込み方を直す | 制作会社や詳しい人 |
| 5 | サーバーのキャッシュ、PHPの版、プラン、引っ越し | サーバーの管理者 |
1と2は費用がかからず、失敗しても元に戻しやすい作業です。3はデザインの判断を伴うので、見た目を決めた人と相談します。4は効果が大きいこともありますが、CSSやJavaScriptの読み込み方を変えると表示が崩れたり、フォームが動かなくなったりすることがあるので、詳しい人に任せる方が安全です。5は費用と手間が一番大きいので、1〜4をやっても最初の応答が遅いときに考えます。
ただし、PageSpeed Insights の結果がはっきりサーバーを指している場合(文字だけのページでも遅い、管理画面も遅い)は、この順番にこだわらず、サーバーから見ます。
当社の記事ページの改善項目を、この順番に当てはめると
当社が2026年10月9日に自社の記事ページ(「クロール済み – インデックス未登録」の記事)を1回測ったとき、携帯電話のLCPは4.8秒、FCPは2.5秒で、改善項目として8つが出ました。原因の種類ごとに分けると、「レンダリングをブロックしているリクエスト」「使用していない JavaScript の削減」「使用していない CSS の削減」「CSS の最小化」「ネットワークの依存関係ツリー」の5つがテーマやプラグインの読み込み方、「強制リフロー」がJavaScriptの書き方、「効率的なキャッシュ保存期間を使用する」がサーバーの設定、残る「背景色と前景色には十分なコントラスト比がありません」は速度ではなく読みやすさの項目です。各項目の意味と優先順位はPageSpeed Insightsの使い方と見方で一つずつ説明しています。
画像の項目はこの中にありません。このページについては、画像は重さの原因になっていない、と読めます。一番多いのは、テーマやプラグインがCSSやJavaScriptをどう読み込んでいるか、です。当社のサイトは WordPress で、SANGOというテーマの子テーマに、問い合わせフォームの Contact Form 7、Googleの道具との連携の Site Kit by Google などのプラグインを入れています。こうした構成のサイトで、どのファイルが表示を止めているかを、改善項目に出たURLから確かめるのが、このページの次の一手になります。
このように、一般論の「画像を軽くしましょう」が、いつも当てはまるわけではありません。自社のページで、実際に何が出ているかから順番を決めてください。
直したあとの確かめ方
- 直す前と同じページを、同じ「携帯電話」の条件で、2〜3回測ります。
- キャッシュのプラグインやサーバーのキャッシュを使っているなら、消してから測ります。古い控えが返っていると、直したものが反映されていない結果が出ます。
- 見た目が崩れていないか、問い合わせフォームが送れるかを、スマホとパソコンで確かめます。速くするための変更は、見た目や動きを壊すことがあります。
- 直したことと、前後の数字を記録に残します。次に遅くなったとき、いつ何を変えたかをたどれます。
当社は、見た目に関わる変更を反映する前に、AIにブラウザ(Playwright)で320〜1920pxの複数の画面幅を撮影させ、横のはみ出しやエラーがないかを確かめています。手作業でも、スマホとパソコンで主なページを開き、フォームから1通送ってみるだけで、多くの不具合は見つかります。
キャッシュのプラグインを入れれば解決するか
キャッシュ(組み立てたページの控えを保存しておき、次からはその控えを返す仕組み)のプラグインは、WordPress.org の説明でも、あまり変わらないページなら大きく速くなるとされています。サーバーの応答が遅い場合には、よく効きます。
一方で、画像の重さ、外部のタグ、動きの多いデザインは、キャッシュでは解決しません。控えを返しても、訪問者のブラウザが読み込む画像やプログラムの量は変わらないからです。また、キャッシュの仕組みを二重に入れると、「直したのに反映されない」の原因になります。入れる前に、サーバーにキャッシュの機能があるかを確かめてください。
自分で直すところ、頼むところ
画像の差し替え、使っていないプラグインやタグの整理は、自社でできます。テーマの読み込み方やサーバーの設定は、制作会社や詳しい人に任せる方が安全です。頼むときは、PageSpeed Insights の結果と、この記事の「疑う原因」のどれに当たりそうかを添えると、話が早く進みます。
表示速度は、検索から問い合わせまでの道のりの途中にある関門の一つです。遅すぎれば読まれる前に帰られてしまいますが、速くしただけで問い合わせが増えるわけではありません(ホームページから問い合わせを増やす方法)。当社は、ホームページの運営に加わり、問い合わせが来るところまでを見ています。重さの原因の切り分けや、どこから手を付けるかの判断に迷ったら、相談するから遅いページのURLを添えてお知らせください。
参考にした公式の説明
- Google for Developers「PageSpeed Insights について」
- WordPress.org「Optimization」(英語)
- web.dev「サードパーティの JavaScript を効率的に読み込む」
- web.dev「LCP を最適化する」
- Chrome for Developers「Improve image delivery」(英語)
- Chrome for Developers「Render blocking requests」(英語)
- Make WordPress Core「Lazy-loading iframes in 5.7」(英語)
※内容は2026年10月時点の各公式の説明で確かめたものです。PageSpeed Insights の改善項目の名前は、版によって変わることがあります。当社の数字は、2026年10月9日に当社の記事ページを1回計測した結果です。