ホームページを作ったものの、開くまでに間がある。スマートフォンで見ると本文が出るまで白い画面が続く。こうした状態は、見た目の問題にとどまらず、検索からの流入にも、問い合わせの数にも関わってきます。この記事では、専門の担当者を置いていない小さな会社やお店を想定して、表示速度をどう測り、どこから直すのかを順番に整理します。数字の根拠は、公式に公開されている基準だけを使います。
表示速度が集客に関わる二つの筋道
表示速度が成果に影響する経路は、大きく二つに分かれます。一つは訪問した人の行動、もう一つは検索順位です。
前者は分かりやすい話です。人は待たされると別の選択肢を探します。特に検索結果から来た人は、まだその会社に関心を持ったわけではなく、答えを探している最中です。手元に検索結果の一覧が残っている状態なので、戻って次を開くことへの抵抗は小さいままです。表示が遅いページは、この「まだ関心が薄い段階」の人を取りこぼします。
後者については、検索エンジン側が公式に説明しています。検索の公式ドキュメントでは、ページの体験に関する指標である Core Web Vitals について「ランキングシステムで使用している」と明記されています。ただし同じ文書には、内容の関連性が最優先であり、体験が多少劣っていても最も関連性の高い内容を表示する、という趣旨の補足も添えられています。つまり、速度は順位を決める唯一の要素ではなく、内容が近い競合が並んだときに効いてくる要素だと考えるのが実情に近い読み方です。
この二つを踏まえると、優先順位が見えてきます。まず内容を整え、そのうえで表示速度を整える。順番を逆にすると、速く表示される薄いページができあがります。
Core Web Vitals の三つの指標と基準値
表示速度を「なんとなく遅い」で扱うと、直したかどうかを判断できません。公開されている共通の物差しがあるので、そちらを使います。
| 指標 | 測っているもの | 良好とされる値 |
|---|---|---|
| LCP | 画面の中でいちばん大きな要素が表示されるまでの時間 | 2.5秒以内 |
| INP | 操作してから画面が反応するまでの時間 | 200ミリ秒以内 |
| CLS | 読み込み中に表示位置がずれる量 | 0.1以下 |
この三つの基準値は、いずれも公式の解説ページに記載されているものです。判定は「ページの読み込みの75パーセンタイル」で見る、とも定められています。訪問の四分の三が基準内に収まっていれば良好、という読み方になります。平均ではなく上位側の四分の一を切り捨てて評価する形なので、たまに速く表示されるだけでは足りません。
なお、以前この三番目に入っていた FID という指標は、2024年3月に INP へ置き換わり、同年9月9日をもって役目を終えています。数年前の解説記事を参考にすると FID が出てくることがあるので、そこは読み替えてください。
三つの指標が示している中身
LCP は「本文や主要な画像がいつ見えるか」を表します。上部に大きな写真を置いているサイトでは、たいていこの写真が対象になります。
INP は「押したのに反応がない」という体感に対応します。ボタンを押してから画面が変わるまでの遅れで、背後で重い処理が走っていると悪化します。
CLS は「読もうとした瞬間に文字が下へずれる」現象です。あとから読み込まれた画像や広告が割り込んで押し下げるときに起きます。読み手にとっては、押したいボタンが直前に動くという形で実害が出ます。
この三つは、それぞれ原因も対処も違います。ひとまとめに「速度」と呼んで一つの作業で片付けようとすると、手をつけた項目と改善した項目がずれます。どの指標が基準を外れているかを先に確かめてから、対応する作業を選ぶ順序で進めます。
まず現状を測る
改善を始める前に、いまの値を記録します。ここを飛ばすと、作業のあとで効果を判断する材料が手元から消えます。
実際の訪問者の値を見る
Search Console には、実際に訪れた人の環境で計測された Core Web Vitals の結果がまとまっています。自社サイトを登録していれば無料で確認できます。ここで見られるのは実測値なので、改善の判断材料としてはこちらが本命になります。
注意点として、実測値は一定量の訪問が集まってから表示されます。開設したばかりのサイトや、アクセスの少ないページでは空欄になります。その場合は次の方法で代用します。
その場で一ページずつ測る
PageSpeed Insights にページのアドレスを入れると、その場で計測した結果と、改善の候補が一覧で出てきます。同じ計測の仕組みは Lighthouse という名前でブラウザの開発者向け機能にも入っており、公開前のページでも試せます。
この方法で出る値は、決められた条件でその場で計った結果です。実際の訪問者の回線や端末とは条件が違うので、値そのものより「どの項目が重いと指摘されたか」を見るために使います。測るたびに数値が上下するのは仕様の範囲なので、一回の結果で一喜一憂しない進め方が向いています。
測る対象を決める
測る対象は絞って構いません。トップページ、検索から人が来ている記事の上位数本、問い合わせや予約のページ。この三種類を押さえておけば、成果に関わる範囲はおおむね覆えます。特に問い合わせのページは、そこまで来た人を逃す場所なので、優先して確認します。
遅くなる原因を切り分ける
| 原因 | 訪問者に起きること | 手当て |
|---|---|---|
| 撮ったままの大きな写真を置いている | 本文より先に画像の枠だけが出て、待たされる | 表示する幅に合わせて縮小し、形式を変える |
| 使っていない拡張機能が動き続けている | 操作しても反応が遅れ、押し直しが起きる | 使っていないものを止め、残すものを絞る |
| 外部の読み込みが本文より先に走る | 本文が出る前に画面が動き、読む位置を見失う | 本文を先に出し、それ以外は後から読み込む |
| 画像の表示領域を指定していない | 画像が入った瞬間に文字が下へずれる | 縦横の寸法を指定し、場所を先に確保する |
| 共用の安価なサーバーを使っている | 時間帯によって表示が大きく遅れる | 契約内容を見直すか、配信の仕組みを足す |
この表の上から二つが、小さなサイトでは原因の大半を占めます。逆に言えば、写真と拡張機能を整理するだけで、体感はかなり変わります。
手をつける順番
1. 画像を整える
スマートフォンで撮った写真は、そのままだと表示に必要な大きさをはるかに超えています。まず表示する幅に合わせて縮小します。本文中の写真なら、横幅1200ピクセル程度あれば足りることがほとんどです。
そのうえで形式を見直します。WebP という形式は、従来の形式と比べて同じ見た目でも容量を抑えられます。主要なブラウザはすでに対応しているので、変換して置き換える価値があります。WordPress を使っているなら、アップロード時に自動で変換する拡張機能が複数あるので、どれか一つを入れておけば以後は手作業が要りません。
あわせて、画面外の画像を後から読み込む設定と、画像の縦横の寸法指定を入れます。前者は LCP に、後者は CLS に効きます。どちらも標準の機能として用意されているので、新しい道具を買わずに済みます。
2. 使っていない機能を止める
運用を続けていると、試したまま残っている拡張機能が溜まります。有効にしてあるだけで読み込まれる CSS や JavaScript が増え、INP を押し下げます。
棚卸しの手順は単純です。一覧を開き、直近三か月で使った覚えのないものを書き出す。一つずつ止めて、サイトの表示と問い合わせフォームの動作を確認する。問題がなければ削除する。まとめて止めると、どれが原因で崩れたか分からなくなるので、一つずつ進めます。
止める判断に迷うものは、いったん残して構いません。判断がつかないものを無理に消すより、明らかに使っていないものだけを確実に減らすほうが、事故なく進みます。また、問い合わせフォームや予約の仕組みに関わる部分は、止めた影響が表からは見えにくい場所です。停止したあとに必ず一件テスト送信を通して、受信まで確認します。
3. 読み込みの順番を整える
ページの読み込みは、上から順に処理されます。本文の表示に関係しない処理が先に走ると、そのぶん本文の表示が後ろにずれます。
対策の考え方は「本文を先に、それ以外は後に」の一点です。アクセス解析や各種の埋め込みは、本文が出たあとに読み込む設定に変えます。多くの拡張機能には、この設定が最初から用意されています。手作業で書き換える前に、設定画面を一度確認してみてください。
4. 画像以外に容量を取っているものを探す
写真を整理しても軽くならないときは、画像以外の要素が効いていることがあります。よく出てくるのは次の三種類です。
一つは動画です。自社のサーバーに置いた動画は、ページを開いただけで読み込みが始まる設定になっていることがあります。動画共有サービスに置いて埋め込む形にすれば、再生を押すまで本体は読み込まれません。
2つ目は地図の埋め込みです。店舗案内などで便利ですが、外部の処理を丸ごと呼び込むため負担も相応にかかります。トップページに常時置くより、アクセス案内のページに限って置くほうが、影響を抑えられます。
3つ目が書体の読み込みです。デザイン性を高める目的で外部の書体を使う場合、特に日本語の書体は収録文字数が多く、容量がかさみます。使う書体は一種類か二種類までに絞り、太さの種類も実際に使うものだけに限定します。
5. 配信と契約を見直す
ここまでを整えても改善が頭打ちになる場合、置いている場所そのものが原因のことがあります。月額が極端に安い共用の契約では、同じ機械を使っている他のサイトの影響を受けます。
選択肢は二つあります。一つは契約内容を見直すこと。もう一つは CDN と呼ばれる配信の仕組みを挟み、利用者に近い場所から届くようにすることです。どちらも月額の負担が増えるので、先に画像と拡張機能の整理を済ませ、それでも足りない場合の手として持っておくのが順当です。
やりがちな遠回り
計測ツールの点数を満点に近づけること自体を目的にすると、労力の割に成果が動かない領域へ入っていきます。点数はあくまで診断の手がかりであり、成果とは別ものとして扱います。
また、高速化をうたう拡張機能を複数入れると、同じ処理が重なって逆に遅くなったり、表示が崩れたりします。同じ役割のものは一つに絞ります。入れる前に、いま入っている拡張機能と役割が重なっていないかを確認する手順を挟むと、後戻りが減ります。
加えて、作業の前にバックアップを取っておきます。表示に関わる設定は、変更した直後は問題なく見えても、特定の端末でだけ崩れることがあります。戻せる状態を作ってから触るほうが、結果的に早く進みます。
改善を続ける仕組みにする
表示速度は、一度整えたら終わりという性質のものとは違います。記事を足せば画像が増え、機能を追加すれば読み込みも増えます。放っておくと、半年ほどで元の状態に戻ります。
そこで、月に一度、決まった日に同じ三ページを測って記録する運用にしておきます。表計算のシートに、日付と各指標の値、その月に行った変更を一行ずつ書き足すだけで十分です。悪化したときに、どの変更が原因かをたどれるようになります。
記録の効用はもう一つあります。制作会社や運用の担当者を替えるとき、この一枚があれば経緯を説明する手間が省けます。口頭で引き継いだ内容は残りませんが、記録は残ります。
社内で共有するときの伝え方
技術的な指標をそのまま社内で共有すると、話が止まりがちです。LCP や CLS という語を使う代わりに、「本文が出るまでの待ち時間」「読もうとした瞬間に文字がずれる度合い」と言い換えると、判断する側にも意味が通ります。
改善を依頼する場面でも同じです。「速くしてほしい」だけでは、どこまでやれば完了なのかが決まりません。「問い合わせページの LCP を2.5秒以内にしたい。現状は測るとこの値です」と、対象と基準と現状の三つを添えて伝えると、見積もりも作業範囲も具体的になります。
よくある質問
何秒を目標にすればよいですか
公開されている基準では、LCP が2.5秒以内であれば良好とされています。まずはここを目標に置き、Search Console の実測で四分の三の訪問が基準内に入る状態を目指します。
パソコンとスマートフォンで対策は違いますか
やることは共通ですが、優先度が違います。判定は端末ごとに分けて見ることになっており、回線も端末の性能も条件が厳しいのはスマートフォン側です。どちらか一方から手をつけるなら、スマートフォンを先に見ます。
速くしたら順位はすぐ上がりますか
速度は順位を決める要素の一つであり、内容の関連性のほうが優先される、というのが公式の説明です。競合と内容が拮抗している場面では効いてきますが、単独で順位を動かす要素として期待するのは無理があります。速度改善は、訪問した人を取りこぼさないための施策として位置づけるほうが実態に合います。
どこまで自社でやれますか
画像の整理と拡張機能の棚卸しは、設定画面の操作だけで完結します。ここまでは自社で進められます。読み込み順の書き換えやサーバーの移行が必要な段階になったら、制作を依頼した会社に現状の計測結果を添えて相談するのが早道です。計測結果を添えると、どこが重いかの説明から始める手間が省けます。
まとめ
表示速度の改善は、大がかりな作り直しを伴う作業だと思われがちですが、入口は写真の整理と使っていない機能の停止という、地味な二つの作業です。
進め方は、測る、原因を絞る、一つずつ直す、また測る。この繰り返しになります。判断の物差しには、公開されている Core Web Vitals の基準値を使えば、社内で議論が割れる余地も減ります。
そして、速度はあくまで土台です。速く表示されるようになったページに、訪れた人が次に何をすればよいかが書かれているか。そこまで含めて整えて、はじめて問い合わせの数が動きます。
自社のマーケティング課題を根本から解決しませんか？
ウェブサイトから要素を引き算し、訪れた人が迷わず次の一歩に進む形へ組み直す。初回60分のオンラインで御社のサイトを一緒に読み、どこから直すべきかをお伝えします。手順をまとめた無料の診断と解説動画もご用意しています。
初回は無料・60分・オンライン完結・その場で契約のお願いはいたしません
