Webサイトの表示速度が遅いと「ユーザーが快適にWebサイトを閲覧できなくなる」「検索順位に悪影響を及ぼす」など様々なデメリットが生まれます。
そこで表示速度を改善させるために、表示速度がUX(ユーザーエクスペリエンス)やSEOに与える影響や、遅くなってしまう原因から改善策まで詳しく解説していきます。
Contents
Webサイトの表示速度が遅いとどうなる？
Webサイトの表示速度が遅いと、ユーザーが快適に閲覧できないため
- 直帰率の増加
- 問い合わせや申込みに繋がりにくくなる
- 検索順位が上がりにくくなる
など、様々な不都合が起こります。
それぞれの原因と起こる不都合について確認していきましょう。
直帰率が増加する
ユーザーは、ネットで検索をする際に”できるだけ速く簡潔に情報が知りたい”と思っています。
そのため、開いたサイトが中々表示されなければ『表示速度が速い別のサイト』を求めてすぐに出ていってしまいます。
現在Googleが離脱率や直帰率は検索順位との直接的な因果関係は無い言っているので検索順位に影響は無いと思われますが、
直帰率が高い=Webサイトの中を回遊してくれていない
ということです。
せっかく問い合わせや申込みなどのコンバージョンに繋げるための動線を用意していても、ユーザーがそこを通ってくれなければ全く意味がありません。
また、ページの表示速度と直帰率の因果関係に付いてはGoogleが過去に2017年に一度公式で発表しています。
引用：Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed
上記の画像は、ページの表示速度が1秒~3秒に落ちると、直帰率が32%上昇、1秒~5秒まで落ちると90%、6秒かかると106％まで上昇するというデータを示しています。
このことからも、ページの表示速度が速度が遅いだけでかなりの機会損失に繋がることがわかるので、集客や収益を上げるためのWebサイトを運営しているのであれば必ず表示速度は意識しましょう。
検索順位にも影響する
Webサイトの表示速度は多少ですが検索順位にも影響があり、2018年7月に『スピードアップデート（Speed Update）』が実施され、表示速度に関するアルゴリズムの変更があったことをGoogleも公表しています。
検索ユーザーはできるだけ早く質問に対する回答を見つけたいと考えています。研究（英語）では、ユーザーはページの読み込み速度を非常に気にかけていることがわかっています。 読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
引用：Google 検索セントラル ブログ/ページの読み込み速度をモバイル検索のランキング要素に使用します
しかし、何秒以内に表示されれば評価が高いといった明確な基準などはなく、『ユーザーがかなり遅いと感じるサイト』を対象としており、アップデート当時も検索結果に大きな変動はありませんでした。
また、最も重要なのはあくまで”コンテンツの質”なので、表示速度が遅いサイトでも関連性が高い内容のページが上位に表示されることはあります。
そのため、検索順位に与える影響は微々たるもので、極端に読込みが遅いサイトでなければ表示速度が原因で検索順位が落ちることはないと思われますが、ユーザーエクスペリエンスが年々重要視されている傾向もあるので、より快適にサイトが閲覧できるように表示速度も改善していきましょう。
Webサイトの表示速度が遅くなる6つの原因
表示速度が遅くなる理由は下記の通りで、主にサーバー内の容量をたくさん使ったり、サイトが処理する動作を増やしたりなどサイトに不可をかけるものが原因としてあげられます。
それぞれについて詳しく見ていきましょう。
画像のファイルサイズが大きすぎる
画像のファイルサイズが大きすぎると、サーバーに負荷がかかったり単純に読み込むのに時間がかかるため表示速度が遅くなります。
画質に拘るあまり知らず識らずのうちに重たい画像をアップしまくっていたということは起こりがちなのでアップロードする前にツールを使用して画像を圧縮するようにしましょう。
圧縮の方法や使用するツールなどは後述します。
動画をサイト内部に直接アップロードしている
動画は画像とは比較にならないくらい容量が大きいです。
できるだけWebサイト内に直接アップロード避けて、一度YouTubeにアップしたものを読込むなどサーバーに負荷がかからない方法を選びましょう。
外部ファイルの読込みが多い
外部ファイルの数が多いと、その分だけサイトは通信を行いファイルを読み込むための処理を行わなければならないためサーバーに負担がかかり、表示速度が遅くなる原因になります。
外部ファイルとは、画像や、CSS、JavaScriptなどが該当します。
JavaScriptを多用している
現代ではJavaScriptのライブラリの一つであるJqueryを使用することで、ロールオーバーやスライドなど様々なアニメーションを実装した動的なサイトを比較的簡単に作ることが出来るようになりました。
非常に便利で、Webサイト制作においては他の言語よりJavaScriptの使用が適しているケースも多いですが、多用すると当然サイトが行う処理が多くなり表示速度の低下に繋がります。
不要なアニメーションを減らしたり、CSSで対応できたり、コードを省略出来るような記述がある場合はできるだけ処理が少ない方法を選ぶようにしましょう。
アプリやプラグインを多用している
アプリやプラグインの多用も速度低下に繋がります。
プログラミングの知識がなくてもサイトの中に新しい機能を追加できたり、面倒な装飾が簡単に行えるようになったりと便利なものですが、追加するとその分サイト内にコードが増えます。
一括でコードが追加される分、不要な機能まで実装され過剰にサイトを重くしてしまっている可能性もあるので不要な物や使用していないものは削除するようにしましょう。
サーバーのスペックが低い
利用しているサーバーのスペックが低いこともサイトの表示速度が遅い原因の一つです。
Webサイトが表示されるまでの流れはざっくり下記のようになります。
『ユーザーがブラウザから見たいページにアクセス(URLを開く)』
⇩
『ブラウザがそのWebサイトが属しているサーバーにリクエスト』
⇩
『サーバーがブラウザにリクエストされたサイトを渡す』
⇩
『ユーザーが見ているブラウザに表示される』
そのため、サーバーの性能が低いと上記のような処理が遅くなりサイトが表示されるまでに時間がかかります。
利用しているレンタルサーバーやプランによって性能は異なり、PCと同じで値段が安いとその分スペックも低い物が多いので新規契約の際はよく下調べをして、現状で遅いと感じている方はプランアップやサーバーの引越しを検討しましょう。
Webサイトの表示速度を速くする方法
それでは、表示速度を改善する方法について見ていきましょう。
画像のファイルサイズを小さくする
Webサイトに使用する画像のファイルサイズを小さくすることが、一番簡単にWebサイトの表示速度を改善する方法です。
その際に圧縮することを意識しすぎて画質が悪くなってしまわないように注意しましょう。
下記のツールなら画質を保ちながら画像の圧縮を行なってくれるためおすすめです。
また、WordPressを使用している人であれば『EWWW Image Optimizer』というプラグインを使うことで、今までアップロードした画像を一括して圧縮することもできます。
外部ファイルを圧縮する(Minifyを行う)
外部ファイルとして使用しているCSSやJavaScriptのファイル内の改行やスペースを無くすことで軽量化され、動作はそのままで読込みが速くなります。(この作業のことをMinifyと呼びます)
ファイル内の記述を一つ一つチェックしながら手作業で圧縮するのはとても大変なので下記のツールがおすすめです。
使用していない外部ファイルやプラグインは削除する
Webサイトにとって不要な動作があると表示速度が落ちる原因になるので定期的にチェックし、使用しなくなった外部ファイルやプラグインは削除しましょう。
キャッシュを利用する
キャッシュとは、一時的にページのデータをブラウザに保存しておくことで次にページを開いた時に素早く表示させるための仕組みです。
『.htaccess』記述を追加することでキャッシュする日数を調整することも出来るので必要に応じて適切に設定しましょう。
Webサイト内の動画ファイルをYouTubeの埋め込みに変更する
動画ファイルは容量が大きいものがほとんどで、Googleも一度YouTubeに上げた動画を読み込んで表示させる方法を推奨しています。
少数であれば問題ないかもしれませんが、数が増えてくるとそれだけサーバーに負荷がかかるようになるので早めにYouTubeの動画に置き換えるようにしましょう。
サーバーのプランを見直す
格安で低スペックなサーバーを利用している人は変更やプランアップを検討しましょう。
サーバーのスペックが低いと、どんな対策を行なったとしてもサイトの表示速度が改善されることはありません。
新規で契約をする場合はしっかりと下調べを行なった上で、最低限ではなくある程度余裕があるスペックのサーバーを選ぶことをおすすめいたします。
画像の遅延読込みを行う
画像の遅延読込みとは、ページを開いた時にすべての画像を読み込まず、ページをスクロールした時に画面に表示された画像だけを読み込んで表示させる方法のことで、『遅延ロード』とも言います。
実装することで、読込みを行わない画像の分だけ表示速度が上がるため最近では実装しているサイトが多いです。
『Lazy Load』というJavaScriptのライブラリを使用することで簡単に実装することができますが、適切に設定を行わないと、Googleのクローラーが画像を読み取れなくなってしまうこともあるのでしっかり確認しながら設定しましょう。
スマホ用サイトの場合はAMPを導入する
AMPはGoogleとTwitterが共同で立ち上げたモバイルユーザーが快適にWebサイトを閲覧できるようにすることを目的としたオープンソースプロジェクトです。
AMP HTML に準拠したウェブページを公開すると、Google のクローラーが AMP ページをキャッシュします。キャッシュされたコンテンツが検索クエリに関連が深いと判断された場合、検索結果にはキャッシュされたページの URL がリンクされます。検索結果に表示されたキャッシュ済みの AMP ページにユーザーがアクセスする場合には、キャッシュ済みのためコンテンツの取得までの時間が短く、記事の表示が瞬時に行われます
引用：Google Developers Japan
キャッシュを利用し、モバイル端末でページを高速表示させる仕組みで検索結果に雷マークがついているページがAMP対応しているページです。
対応させることでサイトが素早く表示されたり、検索結果にカルーセル表示される場合があるなどのメリットがありますが、デザインを上手く表現できない場合やHTMLの他にAMP HTMLを管理・制作する必要があり手間がかかるなどのデメリットもあるため知っておきましょう。
Webサイトの表示速度はPageSpeed Insights計測で計測しよう
『PageSpeed Insights』はGoogleが提供しているWebサイトの表示速度をチェックしてスコアリングしてくれる無料の測定ツールです。
調査ページのURLを入力するだけでPC、スマホ両方の表示速度のスコアや改善のポイントを教えてくれます。
サイトの表示速度を計測してくれるツールは他にもいくつかありますが、いろんなものを使用しても度のデータを信用していいのかわからなくなってしまいます。
また、過去にGoogleはSearch ConsoleやAnalyticsなど他のアクセス解析ツールに表示速度を計測する機能を設けていましたが、それぞれ最新版では無くなっているので、このことからも『PageSpeed Insights』を使用して計測するのが望ましいと考えられます。
計測の際はこちらを使用し、サイトの改善を図るようにしましょう。
まとめ
いかがでしたでしょうか。
ページの表示速度は検索順位への影響こそ微々たるものですが、ユーザーに快適にサイトを閲覧してもらう上で必ず意識すべき項目となっています。
来るはずだったアクセスや問い合わせを逃さないためにもこの記事を参考に今一度自分のサイトの表示速度を見直してみましょう。
コンテンツSEOを主力とした企業に勤めるマーケターの副業ブログ。主にブログやSEO初心者に向けて基礎知識からWeb業界のニュースまで役立つ情報を発信中。
