ページ表示速度が遅いことの影響は?測定方法や改善方法について

サイトの表示速度は、ユーザーとサイト構築者の双方にとって非常に重要な指標です。表示速度の目安や、速度を改善するためには、どのような手法があるか知っておくことが大切です。表示速度が与える影響について解説します。

Offers」では、エンジニア・PM・デザイナー向けにキャリア、スキル、働き方についての役立つイベントを開催しています。無料登録・ログインで、人気のイベント動画は今すぐアーカイブ視聴可能です。動画を視聴して、最新の技術トレンドや実践的なノウハウを手に入れましょう!

【限定配信】アーカイブ動画を今すぐ視聴する!

表示速度の重要性

表示速度は、検索結果で表示されたリンク先にアクセスし、そのリンク先ページが表示されるまでの時間を指します。

表示速度は『検索者が必要としているページを反映するまでの時間』であるため、時間がかかってしまうことは仕方ないと思われるでしょう。しかし、表示速度は、検索者とサイト構築者の双方にとって重視すべきポイントです。

SEOへの悪影響

SEOとはWebサイトの検索結果を上位に表示させるための取り組みを指し、基本的にSEO順位が高いほど、有益な成果を上げやすいものとされます。表示速度の悪化は、SEO順位にも悪影響を及ぼします。

PCとスマートフォンのそれぞれに表示速度が関係しており、検索結果の上位に表示させようと思うと、表示速度も重要な項目の一つです。

ユーザー離脱率や売上への悪影響

表示速度が遅いと、サイトに興味を持ったユーザーの離脱に繋がるケースもあります。

サイトの特性にもよりますが、『約3秒で、半数のユーザーが離脱する』という見解があります。3秒は非常に短い時間のように感じますが、ユーザーに快適な時間を過ごしてもらうには、表示速度の改善はマストであるといえます。

特にスマホ向けサイトは重要?

パソコンとスマートフォンでは、より重視すべきは『スマホでの表示速度』です。

2018年にGoogleから公式に、スマホでの表示速度をSEO順位により優先すると発表されました。名称は『モバイルファーストインデックス(MFI)』とし、この背景は、全体の検索のうち半数以上がスマホを使用していることが調査で明らかになったためです。

スマホの普及に伴い、場所や時間を問わず、気になったことをその場で検索できるだけでなく、ショッピングなども楽しめるようになりました。

現在では、パソコンとスマホが同一サイトであることも多いですが、それぞれのサイトが分かれている場合には、一度確認してみましょう。

表示速度の測定方法と目安

表示速度は、インターネット上のサービスを使って簡単に計測することができます。計測方法とあわせて、表示速度の目安についても紹介します。

測定サイトの利用

表示速度は測定サイトのサービスを用いて測定しましょう。

ここでは、多くの人が使用しているGoogleのサービスを紹介します。

Googleからリリースされている『PageSpeed Insights』は、ページ中央に表示されている検索窓に対象のURLを挿入し「分析」ボタンをクリックするだけで分析することが可能です。

表示速度の目安とは

表示速度は『2秒以内』が目安です。

膨大な情報量を取り込んだサイトをたった2秒で表示させることは難しいように感じますが、表示までの時間が3秒以上の場合には、半分以上のユーザーが離脱してしまいます。

サイト内の情報が多いほど表示速度は遅くなってしまうため、こまめに見直す習慣をつけましょう。

表示速度改善を図るためのポイント

表示速度が遅い原因は、さまざまです。サイト内には、サイトそのもののデザインだけでなく、テキストや画像・動画を用いることが多く、サイトの基盤によっても表示速度が変動するためです。

表示速度の遅延に繋がっている箇所を明確にし、ピンポイントに改善を図りましょう。

フロントエンドではサーバーへの負担減を

フロントエンド(HTML、JavaScript、CSSなどの技術)では、サーバーへの負担箇所を明確にすることで表示速度を速めることができます。具体的には、以下を見直してみましょう。

  • サーバーへの通信の回数
  • サーバーへの通信量
  • レンダリングの速度

フロントエンドでの改善は、HTMLコードを書けることがポイントです。HTMLコードを書くことができれば、表示速度が遅い箇所に対して、明確な打ち手を見つけられる可能性が高まります。

バックエンドではレスポンス速度向上を

フロントエンドに対してバックエンド(サーバサイド)では、状況に応じて対応すべきポイントが異なるため、専門的な知識が求められます。

サーバサイドで必要となる知識は、プログラミング言語(主に、Ruby、Perl、Python、Java、NodeJS、PHP等)ごとの特徴や、アプリケーションの対象ターゲット(BtoC、BtoBかなど)によっても異なります。

非常に複雑ですが、常に『どのポイントを改善すれば、ブラウザに返すレスポンスの速度を上げられるか』という点を意識しましょう。

参考例として、以下を紹介します。

  • データベースの見直し(使用しなくて済むものは使用しない)
  • キャッシュを積極的に使用する
  • 使われているSQLが最適かを見直す
  • 不要なデータを保存しない
  • データベースを分割する

フロントエンドの場合は、HTMLコードが書ければ比較的簡単に対処することができますが、バッグエンドは、自分だけで対処するのではなく、専門家の意見を参考にしてみるとよいでしょう。

まとめ

表示速度はSEO順位やサイトの売り上げにも関わる重要な指標です。また、表示速度は2秒が目安とされています。

速度は計測ツールを用いて計ることができ、速度の改善には、フロントエンドとバックエンドからのアプローチが可能です。フロントエンドに比べバックエンドでは、より専門的な知識が必要とされますが、ケースに応じてピンポイントに改善できます。

表示速度がユーザーへ与える影響は大きいため、積極的に見直しましょう。

見逃し無料配信!続々追加!
45本以上の人気テックイベントが見放題

業界トップクラスの開発者たちが"実践で使える"最新技術トレンドを徹底解説!React、Next.js、Go、TypeScript、セキュリティ、テスト設計まで幅広くカバーした45本の厳選イベントを見逃し配信中。すでに4,000人以上のエンジニアが視聴申込み!⇒ 全45本のイベント一覧をもっと見る

【2025年3月最新】Offersで人気のテックイベントランキングTOP3

【1位】「どこまで安定してる?Express/NestJS/Hono運用者に聞く バックエンドTSのイマ」

【1位】「どこまで安定してる?Express/NestJS/Hono運用者に聞く バックエンドTSのイマ」

最新TypeScriptバックエンドフレームワークの実運用比較と今後の展望

【2位】なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステ

【2位】なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステ

大規模サービスの開発現場が語るデザインシステム導入の実際

【3位】「テストしやすいコードとは?tenntenn氏、渋川氏、zoncoen氏に聞くGoテスト設計最前線」

【3位】「テストしやすいコードとは?tenntenn氏、渋川氏、zoncoen氏に聞くGoテスト設計最前線」

Go言語の第一人者たちが語る、実践的なテスト手法とベストプラクティス

45本の人気テックイベントを今すぐ見放題
※Next.js最新版解説、実践的なLLM活用法など旬のテーマも多数!期間限定見逃し配信中
この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

デザイン

お金

採用・組織

イベントレポート

転職