ホームページの表示速度を速くする方法 測り方と改善

ホームページの表示速度は、PageSpeed Insightsで測り、遅くしている原因を大きいものから順に直していくのが、いちばん確実な改善の方法です。

「サイトが重い」と言われても、原因が画像なのか、プラグインなのか、サーバーなのかで、直し方はまったく変わります。やみくもにプラグインを足したり、サーバーを替えたりする前に、次の順で進めてください。

1. 測る：PageSpeed Insightsで、スマートフォン向けの結果を見る。
2. 原因をしぼる：3つの指標のうち、どれが悪いのかで原因の見当がつきます。
3. 自分で直せるものから直す：画像を軽くする、使っていないプラグインを消す、埋め込みを減らす。
4. 作りやサーバーに原因があるなら頼む：制作会社やサーバー会社に、測った結果を見せて相談する。

速さは使いやすさそのものですし、検索とも無関係ではありません。Googleは、ランキングのしくみでCore Web Vitals（ウェブに関する主な指標）を使っていると説明しています。一方で、ページの体験が平均を下回っていても、いちばん関連性の高い内容を表示するよう設計している、とも書いています（Google 検索セントラルのページ エクスペリエンスの説明）。中身を良くしたうえで、速さで足を引っぱらない、という考え方がちょうどいいと僕らは考えています。検索の基本はSEOの基礎にまとめています。

表示速度の目安は、Googleが示すCore Web Vitalsの3つの指標、LCP・INP・CLSで、それぞれに「良好」の基準があります。

web.devによると、目安を満たしているかどうかは、モバイルとパソコンに分けて、ページの読み込みの75パーセンタイルで見るのが適切とされています（web.dev の Web Vitals の説明）。ページが開かれた回数のうち、4回に3回が目安を満たしているか、という見方です。自分のパソコンで速く見えても、回線の遅いスマートフォンで見ている人の多くが待たされていれば、「良好」にはなりません。

なお、操作への反応を見る指標は、2024年3月12日にFID（初回入力遅延）からINPに切り替わっています。少し前の解説でFIDの話が出てきたら、INPに読み替えてください。

PageSpeed Insightsの結果は、上の段が実際の利用者のデータ、下の段が機械で試しに測ったデータで、先に見るべきなのは上の段です。

使い方はかんたんで、PageSpeed Insightsを開いて自社のページのURLを入れるだけです。結果はスマートフォンとパソコンの2つに分かれて出ます。

• 上の段（実際の利用者のデータ）：Chromeの利用者から集めた「Chrome ユーザー エクスペリエンス レポート（CrUX）」の、過去28日間のデータです。LCP・INP・CLSが目安を満たしているかが、ここでわかります。
• 下の段（試しの測定のデータ）：Lighthouseという道具が、決まった端末と回線を想定してページを読み込んだ結果です。0〜100点のスコアと、遅くしている原因の候補、直し方のヒントが並びます。

スコアの色分けは、90以上が良好、50〜89が改善が必要、50未満が不良です。スコアは、LCPやCLS、Total Blocking Time（TBT）などの指標を重み付けして出したもので、INPは入っていません。また、配信される広告やネットワークの状態、ブラウザの拡張機能などで、測るたびに多少ぶれます。1回の点数に一喜一憂せず、何度か測って傾向を見るのがコツです。

見る人が少ないページや公開したばかりのページでは、上の段のデータが足りないことがあります。その場合はサイト全体（オリジン）のデータに切り替わり、それも足りなければ表示されません。アクセスがまだ多くないサイトでは起こりうることなので、その時は下の段の結果と、次の章の原因の表を手がかりにしてください。

サイト全体の傾向は、Search Consoleの「Core Web Vitals」レポートでも見られます。こちらも実際の利用者のデータをもとに、似たページをまとめて「良好」「改善が必要」「低速」に分け、モバイルとパソコン別に表示します。登録と見方は、Search Consoleの使い方の記事が参考になるはずです。

サイトが重くなる原因は、大きく分けると画像、プラグインやスクリプト、サーバー、外部の埋め込みの4つで、どの指標が悪いかで見当がつきます。

「悪くなりやすい指標」は目安です。PageSpeed Insightsの下の段には、遅くしている原因の候補がページごとに具体的に出るので、この表と見比べながら当たりをつけてください。サーバーの選び方はレンタルサーバーの選び方、書体の話はWebフォントとはにまとめています。

自分でできる改善で効き目が大きいのは、画像を軽くすること、すぐ見えない画像を後から読み込むこと、使っていないプラグインや埋め込みを減らすことです。

1. 画像を軽くする

写真は、表示する大きさに合わせて縮めてから載せます。スマートフォンで撮ったままの写真は、画面に出す大きさよりずっと大きいことが少なくありません。web.devのLCPの改善のすすめでも、画像のサイズを小さくすることと、AVIFやWebPといった新しい画像の形式を使うことがあげられています。WordPressなら、5.8からは、サーバーが対応していればWebPの画像をJPEGやPNGと同じように載せられます。写真の選び方と権利の話は、ホームページの写真素材の記事をどうぞ。

2. すぐ見えない画像は、あとから読み込む

画面の下のほうにある画像は、loading="lazy" という指定で、スクロールして近づいてから読み込ませることができます（遅延読み込み）。WordPressは5.5から、幅と高さの指定がある画像に、この指定を自動で付けるようになりました（5.9からは、最初に見えると判断した画像には付けないよう、改良が重ねられています）。ただし、ページを開いてすぐ見える大きな写真にまで付けると、かえってLCPが遅くなります。最初に見える画像、特にLCPになる画像は遅延読み込みしない、というのがweb.devのすすめです。あわせて、画像には幅と高さを指定しておくと、読み込みの途中のずれ（CLS）を防げます。

3. 使っていないプラグインを止めて消す

WordPressの公式の手引きは、要らないプラグインは止めて削除し、1つずつ止めてみて速さへの影響を測るようすすめています。「昔入れたまま使っていない」「同じ役目のものが2つある」といったプラグインがないか、一覧を見直してみてください。止める前にはバックアップを取り、止めたあとはお問い合わせフォームなどの動きも確かめます。

4. 埋め込みを減らす・下に置く

動画や地図、SNSの投稿の埋め込みは便利ですが、web.devは、第三者のコンテンツがレンダリングを止めたり、Core Web Vitalsに響いたりすることがあると説明しています。トップページに何本も並べず、必要なページの下のほうに置く、クリックされるまで軽い画像を見せておく形（ファサード）にする、といった工夫が効果的です。

5. キャッシュを使い、PHPを新しくする

WordPressなら、ページを静的なファイルとして保存しておくキャッシュのプラグインで、応答が速くなることがあります。新しいPHPのほうがたいてい性能もよい、というのがWordPressの公式の手引きの説明です。PHPを上げる手順と注意は、古いWordPressを放置するリスクにまとめました。

画像やプラグインを整理しても目安に届かない時は、ページの作りやサーバーに原因があることがあり、制作会社やサーバー会社に頼む改善になります。

• 最初に見える画像を優先して読み込む：LCPになる画像をブラウザが早く見つけられるようにし、fetchpriority="high" で優先度を上げる。web.devのLCPの改善のすすめにもある方法です。
• 表示を止めるCSSやJavaScriptを整理する：読み込む順番を見直し、使っていないものを外す。
• 画像や埋め込みに大きさを指定する：CLSのずれを防ぐ。
• サーバーの応答を速くする：キャッシュの設定、サーバーのプランや会社の見直し、画像の配信にCDN（利用者の近くから届けるしくみ）を使う。
• テーマから作り直す：重いテーマに手直しを重ねるより、作り直したほうが早い場合もある。

頼む時は、PageSpeed Insightsで測ったページのURL、測った日、スマートフォンとパソコンのどちらの結果か、悪かった指標を伝えると話が早くなります。「速くしてほしい」だけだと、どこまでやるのかがあいまいになりがちです。どの指標をどこまで良くするのかを、費用と日数と合わせて確かめておきましょう。作り直すかどうかの目安は、作り直さずにホームページを直すも参考にしてください。

スマートフォンでの速さは、PageSpeed Insightsのモバイルの結果と、自分のスマートフォンで開いた時の体感の両方で確かめます。

1. モバイルの結果を基準にする：Googleがインデックス登録とランキングに使うのも、モバイル版のページの中身です。まずモバイルの結果から見ます。
2. 自分のスマートフォンで、Wi-Fiを切って開く：社内のWi-Fiではなく、外出先に近い条件で見ます。
3. 最初の画面が出るまでを見る：いちばん大きな写真や見出しが、待たずに出るか（LCP）。
4. ボタンやメニューを押してみる：押してすぐ反応するか（INP）。
5. 読み込みの途中でずれないか：読もうとした文字や押そうとしたボタンが動かないか（CLS）。
6. Search Consoleで傾向を見る：「Core Web Vitals」レポートのモバイルで、「低速」や「改善が必要」のページがないか。

スマートフォンでの見やすさそのものはスマホ対応はなぜ必須かに、押しやすさや迷いにくさはUIとUXの違いの記事にまとめています。

格安HP屋のホームページ制作は、スマホ最適化が標準で入っていて、HP新規制作25万円・リニューアル30万円（税込）の中で、スマートフォンでも見やすく作ります。

SEOの基本（構造化データ（検索エンジンに内容を伝える記述）・サイトマップ（ページの一覧）・OGP（SNSで共有されたときの見え方）・GA4（アクセス解析）の設定）も標準で、ページ数や機能の数で金額は変わらず、追加料金はかかりません。サーバーとドメインは別に実費（年1〜2万円ほど）で、名義はお客様です。なお、検索順位の約束はしていません。

僕らはテンプレートを使わず、一社ずつゼロからオリジナルでデザインします。初稿は画像ではなく、実際に動くHTMLのデザインでお見せするので、この記事の「スマホでの確かめ方」と同じように、ご自身のスマートフォンで開いて、見え方や動きを確かめていただけます。遠方の方も、URLを開くだけです。

今のサイトが重く、作りから直したい時は、HPリニューアル（30万円・税込）で、今のサイトの分析と作り直しの設計、全ページの移行、URLの転送、SEOの引き継ぎまでまとめて行います。作ったあとは、WordPress本体・プラグインの更新や定期バックアップが入った月額2万円（税込）の保守管理プランも選べます（基本は月額0円の都度依頼）。保守管理プランに最低契約期間はなく、必要な時期だけスポットで頼めます。まずはお問い合わせから、気になっているページのURLを送ってください。相談と見積もりは無料です。料金の中身は料金、これまで作ったサイトは制作事例で見られます。

表示速度の改善は、PageSpeed Insightsで測り、どの指標が悪いかで原因をしぼって、効き目の大きいところから直していくのが近道です。

• 目安はCore Web Vitalsの3つ。LCPは2.5秒以内、INPは200ミリ秒以下、CLSは0.1以下が「良好」
• PageSpeed Insightsは、上の段の実際の利用者のデータを先に見る。点数は測るたびにぶれるので傾向で
• よくある原因は、画像・プラグイン・サーバー・外部の埋め込み・Webフォント
• 自分でできるのは、画像を軽く、すぐ見えない画像は後から、要らないプラグインと埋め込みを減らすこと
• 作りやサーバーが原因なら、測った結果を添えて頼む。スマートフォンの実機でも確かめる

僕ら格安HP屋は、新規25万円・リニューアル30万円（どちらも税込・追加料金なし）で、テンプレートを使わないオリジナルのデザインを作っています。初稿は動くHTMLで、スマートフォンでも確かめられます。重いサイトの作り直しを考えていたら、お問い合わせからどうぞ。