標SHIRUSHI
運用・改善約8分で読めます

表示が遅いホームページは、読まれる前に閉じられている

検索結果からお店のホームページを開いて、真っ白な画面のまま数秒待たされた経験は、誰にでもあると思います。そのとき多くの人は、待たずに戻ります。せっかく検索で見つけてもらい、クリックまでしてもらったのに、中身を一文字も読まれないまま終わる——表示速度の問題は、この一点に尽きます。

もくじ(7項目)
  1. 01速度の話は、内容の話より手前にある
  2. 02Googleが見ている3つの数字(Core Web Vitals)
  3. 03意外な伏兵は、3つ目の「ずれ」
  4. 04順位には、どれくらい効くのか
  5. 05遅いサイトの原因は、たいていこの3つ
  6. 06無料で、いますぐ測る方法
  7. 07まずは一度、測ってみてください

速度の話は、内容の話より手前にある

ホームページの相談で話題になるのは、たいてい中身のことです。どんな写真を載せるか、どう説明するか、どこにボタンを置くか。どれも大事ですが、それらはすべて「ページが表示されたあと」に効いてくる話です。表示される前に閉じられてしまえば、何を書いていても関係がありません。

しかも、この取りこぼしは記録に残りません。開く前に戻った人のことは、こちらからは分かりません。問い合わせが少ない理由を内容のせいだと思い込んでいるあいだ、実は入口で止まっていた、ということが起こりえます。

Googleが見ている3つの数字(Core Web Vitals)

「速い・遅い」は感覚の話になりがちですが、Googleはこれを3つの数字で定義しています。ウェブに関する主な指標、いわゆるCore Web Vitalsです。難しそうな名前ですが、測っていることは、どれも人が実際に感じる不快さそのものです。

指標何を測っているか良いとされる目安
LCPいちばん大きな中身(多くは主役の写真や見出し)が表示されるまでの時間2.5秒以内
INPタップやクリックに対して、画面が反応するまでの時間200ミリ秒以内
CLS読んでいる最中に、表示がどれだけガタッとずれるか0.1以下
Core Web Vitals の3指標と、良いとされる目安(Google公式)

意外な伏兵は、3つ目の「ずれ」

1つ目と2つ目は分かりやすいと思います。見落とされやすいのは3つ目のCLS、表示のずれです。

文章を読み始めた瞬間に、上から写真が読み込まれて本文が下へ飛ぶ。押そうとしたボタンが、指を下ろす直前に位置を変える。誰でも一度は経験があるはずです。これは待たされること以上に不快で、誤タップの原因にもなります。飲食店のサイトで電話ボタンを押したつもりが別のページに飛んだ、というのはたいていこれです。

厄介なのは、作った本人がまず気づかないことです。一度見たページは手元に保存されているため、二度目からはずれずに表示されます。ずれを体験するのは、初めて来た人だけ——つまり、いちばん大事なお客さんだけが見ている、ということになります。

順位には、どれくらい効くのか

ここは正直に書きます。Googleは公式に、Core Web Vitalsをランキングシステムで使用していると説明しています。一方で、同じページにこうも書かれています。Google検索は、ページの利用体験が十分でなくても、最も関連性の高いコンテンツを表示しようとする、と。

つまり、速くしただけで順位が上がるわけではありません。中身が薄いページを速くしても、内容の足りなさは埋まりません。効いてくるのは、同じくらい役に立つページが並んでいるときです。Googleの説明でも、多くの検索語では有用なページがたくさんあり、そういう場合に良い利用体験が結果につながりうる、という言い方をしています。

遅いサイトの原因は、たいていこの3つ

  • 写真が大きすぎる:カメラやスマホで撮ったままの巨大な画像を、そのまま載せている。表示される大きさは画面の幅ぶんしかないのに、その何倍もの重さを毎回読み込んでいる
  • 外から呼んでくるものが多い:地図、SNSの埋め込み、チャット、解析、複数の書体。ひとつずつは小さくても、全部そろうと待ち時間になる。埋め込みは「置いてあるだけ」ではなく、毎回どこかへ取りに行っている
  • 土台が重い:多機能なテーマや大量の拡張機能を積んだまま使っている。使っていない機能のぶんまで、来た人が毎回ダウンロードしている

順番も大事です。ふつうは1つ目の写真から手を付けます。いちばん重く、いちばん簡単に軽くでき、見た目もほとんど変わらないからです。逆に、3つ目の土台の入れ替えは大がかりになりやすいので、後回しで構いません。

無料で、いますぐ測る方法

  1. 01PageSpeed Insights(Googleの無料ツール)に、自分のサイトのURLを貼って実行する
  2. 02パソコンではなく、まずモバイルのタブを見る。多くの訪問者はスマホから来ている
  3. 03上のほうに実際の利用者のデータがあれば、それがCore Web Vitalsの判定。無いのは訪問者数がまだ少ないためで、故障ではない
  4. 04下に出る改善案は、上から順に効果の大きいものが並んでいる。専門用語が多いので、意味が分からないところは飛ばしてよい
  5. 05Search Consoleを設定しているなら、ウェブに関する主な指標のレポートで、サイト全体の状況をまとめて見られる
Q. サイトが重いかどうか、自分の体感で判断してはいけませんか?+

体感も有効ですが、条件が良すぎることに注意してください。ご自身のサイトは一度見た情報が手元に残っているため、二度目以降は速く表示されます。判断するときは、ふだん使っていないスマホや、電波の弱い場所で開いてみるのが近い条件になります。

Q. 写真の枚数を減らすしかないのでしょうか?+

いいえ。減らすのではなく、軽くするのが基本です。表示に必要な大きさに合わせて縮小し、軽い形式で書き出し、画面に入ってから読み込む形にすれば、枚数を保ったまま体感は大きく変わります。お店のサイトで写真を削るのは、たいてい損のほうが大きい判断です。

Q. 動きのある演出は、やめたほうがいいですか?+

やめる必要はありません。問題になるのは、演出そのものより、最初の表示を待たせる作りになっている場合です。最初に見える部分は素早く出し、動きは後から足す。この順番さえ守れば、印象と速度は両立します。

Q. 今あるサイトの速度だけ、あとから直せますか?+

多くの場合、直せます。写真の入れ替えや読み込み方の調整だけで済むこともあります。ただ、土台そのものが重い場合は、部分的な手直しを重ねるより作り直したほうが結果的に早く安く済むこともあるため、まず現状を拝見してからご提案しています。

くわしくは

スマホで見づらいホームページは、それだけで損をしている

速さと同じくらい、スマホの画面で読めるかどうかも見られています。確かめ方をまとめました。

この記事を読む

くわしくは

ホームページを作っても集客できない7つの理由と、成果につなげる改善のポイント

速さを直しても問い合わせが増えないときは、導線のほうに原因があります。7つの理由です。

この記事を読む

まずは一度、測ってみてください

表示速度は、感覚で議論すると終わらない話ですが、測れば数字ではっきり出ます。そして直し方も、たいていは写真から順に決まっています。まずはPageSpeed Insightsに自分のサイトのURLを入れて、モバイルの結果を見てみてください。

見てみたものの、何をどう直せばよいのか分からない、という段階でも構いません。標 -SHIRUSHI- では、初回のご相談は無料です。今のサイトを拝見して、直す価値のある箇所から順にお伝えします。

RELATED

あわせて読む

運用・改善

ホームページをリニューアルすべきタイミングと、判断チェックリスト

「今のホームページ、そろそろ古いかも」と感じつつ、いつ手をつけるべきか迷っていませんか。リニューアルは、タイミングと範囲を見極めれば、費用も労力も最小限で成果を伸ばせます。判断のサインから整理しましょう。

制作・機能

スマホで見づらいホームページは、それだけで損をしている

自分のホームページを、最後にスマホで開いたのはいつでしょうか。文字が小さくて指で広げないと読めない、ボタンが押しにくい、電話番号をタップしても発信できない——お店のサイトでは今も珍しくありません。そしてそれは、見た目の問題だけでは終わりません。

料金

ホームページの維持費は年間いくら?ドメイン・サーバー・SSLの実費

「作るのにいくらか」は調べれば出てきますが、「持ち続けるのにいくらか」は意外と表に出てきません。ホームページは、公開したあとも毎年お金がかかります。この記事では、その内訳と実際の金額、そして“削れる費用”と“削ってはいけない費用”を、包み隠さずお話しします。

集客

「地域名+業種」で見つけてもらうには。Googleビジネスプロフィールとホームページの関係

「福岡 美容室」「糸島 カフェ」——お客さんがスマホで検索したとき、地図と一緒に3件ほどのお店が並びます。あの枠に入れるかどうかは、地域のお店にとって死活問題です。この記事では、あの順位が何で決まるのかをGoogleの公式説明にそって整理し、ホームページがそこにどう効いてくるのかをお話しします。