HOME/お役立ち記事/スマホで遅いホームページは客を逃す|表示速度の無料診断と改善策
WEBサイト

スマホで遅いホームページは客を逃す|表示速度の無料診断と改善策

スマホで遅いホームページはお客様を逃す原因に。PageSpeed Insightsでの無料診断の手順と、Googleの基準(LCP・INP・CLS)での結果の読み方、遅くなる主な原因、自社でできる対策と専門家に任せる対策を解説します。

スマホで遅いホームページは客を逃す|表示速度の無料診断と改善策WEBサイト

「自分のパソコンで見ると問題ないのに、スマホで開くとなかなか表示されない」。ホームページについて、こんな違和感を持ったことはありませんか。お客様の多くは、外出先や移動中にスマホでお店や会社を調べます。そのとき画面が真っ白なまま待たされたり、押そうとしたボタンが急にずれたりすると、内容を読む前に戻られてしまうかもしれません。

この記事では、Webの専門知識がない店舗・中小企業・クリニック・士業事務所の経営者やWeb担当者の方に向けて、ホームページの表示速度を自分で確かめる方法と、遅くなる主な原因、自社でできる対策と専門家に任せたい対策を解説します。基準や数字は、Googleの公式ドキュメントで確認できたものだけを使っています。

スマホで遅いサイトは、何が困るのか

表示速度の問題は、大きく2つの面で影響します。

お客様にとって「使いにくいサイト」になる

1つ目は、訪れた人の使い心地です。表示が遅い、タップしても反応が鈍い、読み込み中にレイアウトがずれて別のボタンを押してしまう。どれも、予約や問い合わせの直前でお客様を迷わせる原因になります。特に、店舗の地図・電話番号・予約ボタンなど、スマホで急いで確認したい情報ほど影響を受けやすい部分です。

Googleも「ページ エクスペリエンス」を評価している

2つ目は検索です。Googleは、ページの使い心地を測る指標「Core Web Vitals(コア ウェブ バイタル)」について、Googleのコア ランキング システムがランキングを決める際に考慮する要素の一つだと説明しています(Google 検索セントラル「Core Web Vitals と Google 検索の検索結果について」)。

ただし、Googleは同時に、スコアが良くても上位表示が保証されるわけではなく、検索のためだけに満点を目指すのは有効な時間の使い方とは言えないとも述べています(ページ エクスペリエンスに関するドキュメント)。検索では内容の関連性がまず重視されます。そのうえで、同じような内容のページが多い場合に、使い心地の良さが差になると考えるのが現実的です。

表示速度の「ものさし」Core Web Vitalsとは

Core Web Vitalsは、実際の利用者の体験を3つの面から測る指標です。それぞれ「良好」とされる基準は次のとおりです(web.dev「Web Vitals」、Search Console ヘルプ「Core Web Vitals レポート」)。

指標何を測るか良好改善が必要
LCPページのいちばん大きな画像や文章が表示されるまでの時間(読み込み)2.5秒以下2.5秒超〜4秒以下
INPタップやクリックへの反応の速さ(応答性)200ミリ秒以下200ミリ秒超〜500ミリ秒以下
CLS読み込み中のレイアウトのずれ(見た目の安定性)0.1以下0.1超〜0.25以下

「改善が必要」の範囲を超えると「低速」と判定されます。また、評価は一部の速い訪問ではなく、訪問全体の75%がこの基準を満たしているかで判断されます。たまたま自分のスマホで速く見えても、通信環境の悪い場所から見る人が多ければ評価は下がる、ということです。

スマートフォンでお店のホームページを開き、表示を待ちながら困った表情を浮かべる日本人女性と、店舗の街並みのイラスト

PageSpeed Insightsで自社サイトを診断する手順

自社サイトの速さは、Googleの無料ツール「PageSpeed Insights」で誰でも調べられます。

  1. PageSpeed Insightsを開き、調べたいページのURL(まずはトップページ)を入力して「分析」を押す
  2. 結果画面で「モバイル」が選ばれていることを確認する(パソコンの結果は別タブ)
  3. 上段の、実際のユーザーのデータを示す欄で、Core Web Vitalsの評価が「合格」か「不合格」かを見る
  4. 下段の、パフォーマンスを診断する欄で、スコアと改善のヒントを確認する

上段と下段は「別のデータ」

結果の読み方で大切なのは、上段と下段の違いです(PageSpeed Insights について)。

  • 上段(フィールドデータ):Chromeを使った実際の訪問者の、過去28日間の体験をまとめたもの。LCP・INP・CLSの3指標とも75%の訪問で「良好」なら合格です
  • 下段(ラボデータ):中程度の性能のスマホとモバイル回線を想定して、その場で1回読み込みを再現した結果。0〜100のスコアで、90以上が良好、50〜89が改善が必要、50未満が不良とされます

まず見るべきは、実際のお客様の体験を表す上段です。アクセスが少ないサイトでは実データが足りず上段が表示されないこともあり、その場合は下段を目安にします。なお、下段のスコアはページを変えていなくても実行するたびに多少変わります。1点2点の上下に一喜一憂せず、何度か測って傾向を見ましょう。

Search Consoleでサイト全体の状態を見る

1ページずつではなく、サイト全体の傾向はSearch Consoleの「ウェブに関する主な指標(Core Web Vitals)」レポートで確認できます。モバイルとパソコンに分けて、ページが「良好」「改善が必要」「低速」のどれにあたるかが表示されます。Googleは技術者以外の方に向けて、まず「低速」から直し、その後に多くのページや重要なページに影響する問題に取り組むこと、そしてレポートを担当の技術者と共有することをすすめています。月1回の点検の中で見る方法は、GA4・サーチコンソールで自社サイトを月1点検|30分の手順でも紹介しています。

表示が遅くなる主な原因

中小企業や店舗のサイトでよく見かける原因は、次の4つです。

1. 重い画像・サイズの指定がない画像

Googleの解説では、モバイルのページの73%で、LCP(いちばん大きな要素)が画像だったというデータが紹介されています(web.dev「Core Web Vitals を改善する最も効果的な方法」)。スマホで撮った写真をそのままの大きさで載せると、表示が遅くなる大きな原因になります。また、画像に縦横のサイズが指定されていないと、読み込み後にレイアウトがずれてCLSが悪化します。

2. プラグインや外部タグの増えすぎ

WordPressのプラグイン、SNSの埋め込み、チャット、広告や計測のタグなどは、それぞれ読み込む処理を増やします。Googleも、反応の速さ(INP)を改善する方法として不要なJavaScriptを避けることや、タグマネージャーの古いタグを整理することを挙げています。「昔のキャンペーンで入れたタグがそのまま」というケースは珍しくありません。

3. サーバーの応答が遅い・環境が古い

ブラウザは、サーバーから最初の応答が届くまで画像などの読み込みを始められません。サーバーの性能が足りない、設定が古いままといった場合は、どれだけ画像を軽くしても限界があります。WordPressの公式サイトでは、推奨環境をPHP 8.3以上としており、PHP 7.4などの古いバージョンは公式サポートが終了していると案内しています(WordPress「必須要件」)。

4. 読み込み中に動く・後から出てくる部品

上からスライドして出てくるお知らせバナーや、後から読み込まれる広告・埋め込み動画は、レイアウトのずれ(CLS)の原因になりやすいとされています。

自社でできる対策と、専門家に任せたい対策

自社でできること

  • 写真は載せる前に、表示サイズに合わせて縮小・圧縮する。WEBeffectの無料ツール「画像圧縮」「画像リサイズ」「画像フォーマット変換」も、ブラウザだけで使えます
  • 使っていないプラグインや、終わったキャンペーンの埋め込み・タグを洗い出す(削除の判断は担当者と相談)
  • スライドショーのように、トップに大きな画像を何枚も並べる構成を見直す
  • 更新のたびにPageSpeed Insightsで測り、結果を記録しておく

専門家に任せたいこと

  • 画像のサイズ指定や遅延読み込みの設定。Googleは、最初の画面に映る画像には遅延読み込みを使わないようにすすめており、設定を誤るとかえって遅くなります(web.dev「画像の遅延読み込み」)
  • プラグインの入れ替えやテーマの修正、計測タグの整理
  • PHPのバージョンアップやサーバーの見直し(事前に動作確認が必要)
  • 修正後の効果検証。Search Consoleでは修正後に「トラッキングを開始」を押すと、28日間かけて問題が解消したかを確認できます

PHPの更新やプラグインの管理は、表示速度だけでなく安全面にも関わります。保守の考え方はWordPressの保守管理に関する記事もあわせてご覧ください。

オフィスでノートパソコンとスマートフォンを並べ、サイトの表示速度を確認しながら相談する日本人の経営者とWeb担当者のイラスト

表示速度のセルフチェックリスト

  • PageSpeed Insightsで、トップページと主要なサービスページを「モバイル」で測った
  • 上段の評価(合格/不合格)と、LCP・INP・CLSの値を記録した
  • Search ConsoleのCore Web Vitalsレポートで「低速」のページがないか確認した
  • サイトに載せる写真は、縮小・圧縮してからアップロードしている
  • 使っていないプラグイン・埋め込み・計測タグがないか確認した
  • サーバーのPHPバージョンを把握している
  • 読み込み中にボタンや文章がずれないか、実際のスマホで確かめた

まとめ:まず「測る」ことから始めよう

表示速度は、見た目のデザインと違って気づきにくい問題です。しかし、スマホで調べてくれたお客様にとっては、最初に体験する「お店の入口」でもあります。まずはPageSpeed InsightsとSearch Consoleで現状を測り、「良好」の基準と比べるところから始めましょう。点数を満点にすることより、お客様が迷わず目的の情報にたどり着けることが大切です。

WEBeffectでは、表示速度の診断、画像やプラグインの見直し、サーバー・PHP環境の更新、その後の保守まで、ホームページの改善をまとめてお手伝いしています。「診断結果の見方がわからない」「何から直せばいいか知りたい」という段階でもかまいません。初回のご相談と概算のお見積りは無料です。お気軽に下記よりお問い合わせください。

j

jiji

Web Production Partner

小田原でWEB制作をしている jiji です。「何から相談すればいいかわからない」という段階からのご相談も歓迎していて、現状を伺いながら必要なことを一緒に整理するところから始めています。ホームページ制作、WordPress改修、日々の業務を少し楽にする仕組みづくりまで対応しています。

この記事に関連するサービス

この記事に関連する無料ツール

SEO、文章作成、SNS投稿、画像確認など、Web運用に役立つ無料ツールを公開しています。

無料ツールを見る

WEBまわりのご相談はありませんか?

管理画面の使いづらさ、フォーム改修、投稿機能の追加、検索機能の追加など、既存サイトの状態を確認したうえで対応可能な範囲をご案内します。