この記事のポイント
この記事でおさえておきたいポイントは以下です。
-
Webサイトの表示速度とは
-
Webサイトの表示速度とは、そのWebページにユーザーがアクセスした際に、ページが表示されるまでにかかる時間のことで、目安となるのは、3秒以内といわれています。UXや離脱率、CVRなど、Webサイトのパフォーマンスにさまざまな影響を及ぼすため重要となります。
-
表示速度の測定方法
-
Googleが提供するWebページ計測ツール「PageSpeed Insights」では、表示速度を調べたいページのURLを入れて計測をするとそのページの表示速度や評価などが表示されます。その他GoogleアナリティクスやChromeのデベロッパーツールでも計測できます。
-
表示速度の改善方法
-
画像サイズの最適化、無駄なソースコードの削除、AMPの活用などのほか、キャッシュを効果的に使うことや通信プロトコルを最新のHTTP/2にすることでも表示速度を向上できます。サーバーのスペックを高めることも効果的です。
- 表示速度によってWebサイトにどのような影響があるのかわからない
- どのように表示速度を測ればいいのか方法を知りたい
- どうしたら表示速度が改善できるのかわからない
このような悩みを持つ担当者は少なくありません。
SEO的な観点でも、コンバージョン率の改善のためにも、Webサイトの表示速度はユーザビリティを向上させる大切な要素です。またモバイルユーザーの増加により、Googleはさらに表示速度を重視するようになりました。そのためWebサイトの表示速度を改善できれば、ユーザビリティが向上し、Googleからの評価を高められるかもしれません。
この記事では、Webサイトの表示速度の重要性や速いことのメリット、計測方法、改善方法まで詳しく紹介します。この記事を読めば、Webサイトの表示速度が遅い原因がわかるだけでなく、表示速度を改善する方法も理解できるでしょう。それによりWebサイトが得られる好影響も把握できるため、ぜひ自社サイトのパフォーマンスの向上に役立ててください。
SEOで順位が上がらない担当者様へ
実力のあるSEOコンサルタントが本物のSEO対策を実行します。
SEO会社に依頼しているが、一向に検索順位が上がらない・・・。
SEO対策をSEO会社に依頼していてこのようなお悩みはありませんか？SEO対策はSEOコンサルタントの力量によって効果が大きく変わるマーケティング手法です。弊社では価値の高いSEOコンサルティングをご提供するため、厳選した業界トップクラスの大手SEO会社出身で大規模サイト運用経験のあるトップコンサルタントが在籍しております。
SEO対策については、下記に詳しく記載させて頂いておりますので、宜しければご覧ください。
SEO対策とは？効果的なSEO対策の基本と実践方法【プロ監修】
SEOにおけるWebサイトの表示速度の重要性
Webサイトの表示速度とは、そのWebページにユーザーがアクセスした際に、ページが表示されるまでにかかる時間のこと。UX（ユーザー体験）や離脱率、CVRなど、Webサイトのパフォーマンスにさまざまな影響を及ぼすため、表示速度は重要だと言われます。
Webページの表示速度が遅いと、ユーザーの直帰率が上がったり、Webサイトの検索順位が下がったりと、Webサイト全体のパフォーマンス低下にもつながります。
あなたも過去に見たいページがなかなか表示されず、戻るボタンを押した経験がないですか？GoogleはWebサイトの表示に3秒以上かかる場合、ユーザーの50％以上が離脱すると言っています。
また、表示速度は検索順位を決めるアルゴリズムの要素でもあります。2010年からデスクトップ版のランキング要素に導入され、2018年からはモバイル版にも取り入れられました。
さらに、表示速度はSEOだけでなくユーザビリティにも関わってくるため、軽視してはいけません。ユーザーはWebに対してスムーズな動きを求めているため、Webページの表示速度が遅いとコンバージョン率も低下してしまうのです。これらのことから機会損失を防ぐためにも、表示速度の改善は必要です。
表示速度の基準は「3秒以内」が目安
Webサイトの表示速度の目安となるのは、3秒以内にページが表示されるかどうかです。3秒以上時間がかかるようなら改善するのがベスト。
2018年にGoogleが発表した調査結果では、表示速度が1秒の時と比べて、3秒かかった場合には直帰率が32％上昇するとされています。つまりユーザーにストレスなくWebサイトを使ってもらうためには、3秒以上待たせてはいけないと言い換えられます。
ただし、この調査は2018年時点のもの。通信環境やデバイスの性能が向上した現在では、さらにユーザーが待てる時間は短くなっているでしょう。また、スマホからのアクセスが主流になったため、表示速度についてはPCだけでなくスマホでの対策も必要です。
「スピードアップデート」によりスマホ向けページの対策も必要
表示速度は、2010年からGoogleによる検索順位アルゴリズムの要素として使われています。以降2018年には「Speed Update」が実施され、PC版にくわえモバイル版の検索ランキングにも表示速度が使われるようになりました。
これにより、明らかに表示速度が遅いWebサイトは検索順位が下がったと言われています。表示速度が極端に遅くなければランキングには影響しないと言われているものの、ユーザー体験を考慮すると、表示速度の改善は常に必要だと言えるでしょう。
表示速度を向上させるメリット3つ
Webサイトのページ表示速度が速いと以下のようなメリットがあります。
- UXが向上する
- SEOでの検索順位向上につながる
- CVRが向上する
それぞれのメリットについて詳しく解説します。
1.UXが向上する
Webサイトのページ表示速度の速さは、ユーザー体験の質に直結します。Webサイトの制作時には、コンテンツやビジュアルを充実させることに意識が向きがちですが、ページの読み込み速度が遅いとユーザーはストレスを感じ、そのWebサイト全体への評価が下がってしまいます。
一方、表示速度が速ければユーザーは快適にコンテンツを閲覧でき、Webサイト内を回遊できます。その結果として、直帰率や離脱率の改善にもつながるというわけです。
2.SEOでの検索順位向上につながる
Webページの表示速度を改善するとユーザー満足度が上がり、結果として検索順位の向上につながる可能性があります。表示速度が速くなれば、ユーザーの離脱率・直帰率・CVRが向上し、Webサイト全体のパフォーマンスが評価されるためです。
ただし、単純に表示速度が速いだけでは、SEOでの検索順位は上がりません。あくまでも、ユーザー行動の変化により間接的に向上することを理解してください。
3.CVRが向上する
いくら質の高いコンテンツを用意しても、そのページの表示速度が遅ければ、ユーザーはそれ以上ページを見ることはありません。これはつまり表示速度が遅いWebサイトほどコンテンツを見てもらう機会や時間が減るため、結果としてコンバージョン率が低下するということです。
しかしながらWebページの表示速度が速ければ、ユーザーはストレスを感じずに行動できます。表示速度を速ければ離脱するユーザーを減らせるため、機会損失を防ぐという意味ではCVRの向上にも影響すると言えます。
Webサイトにおける表示速度の4つの測定方法
Webサイトの表示速度を計測するツールには複数あり、それぞれ機能や特徴が異なります。
1.PageSpeed Insightsを使って調べる
PageSpeed Insightsは、Googleが提供するWebページ計測ツールです。表示速度を調べたいページのURLを入れて計測をすると、そのページの表示速度や評価などが表示されます。
Webサイトの表示速度は、FCPとDCLという項目で数値化され、表示速度によるユーザーの快適さを、ユーザーエクスペリエンススコアという数値で評価してくれます。
ちなみにユーザーエクスペリエンススコアは100点満点のうち70点が平均点とされています。80点を超えていれば改善点はほぼないと考えられますが、60点を下回る場合は改善が必要です。
またPageSpeed Insightsでは、表示速度を上げるための修正方法も提示されるため、その内容を確認しながら、表示速度の改善をしてみてください。
ページスピードインサイト(Google PageSpeed Insights)の使い方！見方や改善方法を解説
2.Googleアナリティクスの「ページ速度」を確認する
ページの表示速度はGoogleアナリティクスでも計測できます。
Webサイト全体の「平均読み込み時間」や「サーバーの平均応答時間」を見て、内容に問題ないか、ボトルネックとなっている箇所はないかを確認してください。
またPC／モバイルでの比較、ブラウザごとの比較など、ユーザーの環境ごとにWebサイトの表示速度を分けて比較することもできます。
さらにページごとの表示速度を確認することも可能です。サイト全体の平均よりも読み込みが遅いページは赤く表示されるため、重点的に改善点を探せます。
なおページごとの数値は、前述したPageSpeed Insightsと共通です。Googleアナリティクスで問題点を見つけたうえでPageSpeed Insightsに移り、詳しい改善点を洗い出すのも良いでしょう。
3.Chromeのデベロッパーツールを活用する
Chromeのデベロッパーツールでも、Webページの表示速度を測定できます。
デベロッパーツールは、Chromeのメニューの「表示」→「開発／管理」→「デベロッパーツール」と進むと表示されます。
Webページのソースなどを見る際に使用するケースが多いですが、デベロッパーツール内の「Network」というタブを開くと、表示速度が見られます。
正確な表示速度を計測するために、まず左上にある「Clear」ボタンを押してください。その後、windowsでは「Ctrl + Rキー」、Macでは「commnd + Rキー」を押すと計測できます。
ページ内の要素それぞれについて読み込み時間が表示されますが、表の下部に表示されるFinishの時間が、ページ全体が表示されるまでの時間です。ブラウザでWebページを確認しながら素早く計測できるので便利です。
4.Test My Siteを利用する
Test My SiteもPageSpeed Insightsと同じく、Googleが提供しているWebページ表示速度計測ツールです。
主な機能として、以下の3つが使えます。
- モバイル上でのページの読み込み時間
- 同じ業界内でのページの読み込み時間の比較
- ページの読み込み時間を向上するための修正点の提示
Test My Siteは機能的にはPageSpeed Insightsと似ていますが、モバイル専用ツールという点、モバイルページの中でもさらに3G回線での表示速度などの計測に特化している点が特徴です。
ただし日本で3G回線を使用しているスマホユーザーはほとんどいません。そのため海外向けWebサイトの運営以外では、重視されることは少なくなっています。
表示速度の9つの改善方法
表示速度の改善はまず、原因を解明することが大切です。ここではよくある原因と9つの改善方法を紹介します。
1.画像を最適化する
画像サイズの最適化は表示速度を改善するために有効です。
Webページを構成する要素の中で、画像はテキストに比べてデータのサイズが大きい傾向にあります。データ量が大きければ、Webページを表示する際に必要な通信量が増えるため、圧縮することで表示速度を改善できます。
Webページ内で使う画像は、そのページでの表示に適したサイズにトリミングしましょう。大きな画像を表示する時だけ縮小しても、画像のデータ量は大きいままです。また、画質を落とさずに画像のデータサイズを圧縮できるツールも多くあります。それらを活用して、品質を保ちながらできるだけ画像容量を小さくしてください。
2.無駄なソースコードを削除する
Webページ内で使われているHTMLやJavaScriptなどのソースコードが短くなれば、読み込み時間が短縮され、表示速度が上がります。
具体的には以下の内容を実施すればファイルサイズを軽くでき、結果として表示速度の改善ができます。
- HTML、JavaScript、CSSといったソースコードに含まれている余分な改行
- 作成者によるコメントアウトなどを削除
JavaScriptについては数が多くなるほど通信が発生する頻度が増え、ページ表示速度が遅くなります。そのため複数のファイルに分かれているJavaScriptを1つにまとめることで、通信回数を減らして表示速度の改善ができます。
ソースコードの圧縮については、手作業で修正することなく自動で圧縮してくれるツールが複数あるので、それらのツールの活用も検討してみてください。
3.サーバーの応答時間を短縮させる
Webサイトを表示するために必要なブラウザとサーバーのやりとりにかかる時間を短縮すれば、表示速度が速くなります。
Webサイトを表示する際は、ブラウザがサーバーに情報をリクエストし、サーバーから返ってきた情報をブラウザが画面上に組み立てる方法がとられています。その情報のやり取りにおいて、サーバーの反応が遅いと、結果としてWebページの表示速度も遅くなります。
特にWebページを構成するファイルが増えると、表示速度が遅くなる傾向があります。画像、CSS、JavaScriptなどの要素は可能な限り減らして、圧縮・統合しましょう。
それでもサーバーの応答時間が遅い場合には、サーバーのスペックが足りないか、アプリケーションに問題があることが考えられます。ブラウザ上での動作を見ても原因の特定は難しいので、専門知識のある人にサーバーやデータベース、CMSなどを調べてもらう必要があります。
4.ブラウザのキャッシュを使う
キャッシュを効果的に使うことで、表示速度を改善することができます。
キャッシュとは、ユーザーがWebページを訪れた時に、ブラウザがそのWebページのデータを保管しておけるようにし、再びじWebページにアクセスした際、保存していたデータを使えるようにする仕組みのこと。
キャッシュを使うとユーザーが再度Webページにアクセスした時に、サーバーにアクセスして情報を取得する必要がなくなるので、不要な通信が減り表示速度が速くなります。
5.gzip圧縮を設定する
Webページを構成するファイルのサイズを小さくすれば、表示速度は速くなります。そのためにファイルの圧縮が効果的です。
Webサイトに使われているHTML、javascript、cssなどのファイルを圧縮し、通信量を減らせればページの表示速度を改善できます。
ファイルのサイズを圧縮する方法としては、Googleが推奨しているgzip圧縮が多く使われています。gzip圧縮をするためには、Apacheサーバーのmod_deflateが有効になる設定や、「.htaccessファイル」での設定が必要です。わからない場合は専門知識を持つエンジニアなどに相談して進めましょう。
6.HTTP/2に対応する
通信プロトコルを最新のHTTP/2にすることで、表示速度を向上できます。自社のサーバーの通信方式が、旧式のHTTP/1.1となっていないか確認しましょう。
HTTP/2とは、インターネットを形成している通信プロトコル「HTTP」の新しいバージョンのこと。従来のものはHTTP/1.1と呼ばれ、2009年から使われています。HTTP/2は2015年の登場以来、徐々に浸透してきています。
HTTP/1.1では、ブラウザとサーバーの間で通信のリクエストが1つ行われると、そのリクエストが完了するまで他のリクエストは待機していました。そのため重たい処理があると、その後のリクエストに渋滞が発生してしまいます。そこでHTTP/2では、リクエストを並列処理できるようにしたのです。
Webサイトのコンテンツがリッチ化するにつれて、リクエストの数はどんどん多くなっています。それに伴う表示速度の低下を防ぐためにも、HTTP/2は有効です。
7.外部ファイルの読み込みスピードを改善する
Webページを構成するファイルの読み込みスピードを速め、ページを組み立てる工程をスムーズにするとWebサイトの表示速度を改善できます。
WebページはHTMLファイルを基に構築されますが、1つのファイルだけで作られているものではありません。HTMLファイル、CSS、画像、JavaScriptなど多数の外部ファイルを読み込むことでページが構成されます。
ですがこの中に不必要にサイズの大きなものや、読み込みに時間のかかるものがあると、ページを表示する際のボトルネックになってしまいます。
具体的には、以下のような設定を行います。
- CSSとJavaScriptファイルの読み込み時に、ページのレンダリングをブロックしないようにする
- 更新の頻度が低い複数のCSSを合併させて、サーバへの参照リクエストを減らす。
- JavaScriptファイルを読み込む順番を整理して、非同期での読み込みも可能ならば行う
技術的な処理が必要となるため、改善点をエンジニアと相談してみてください。
8.AMPを活用する
AMPは、Accelerated Mobile Pagesの頭文字を取ったもの。その名前の通り、モバイルデバイスでWebページの表示速度を速くするための手法で、導入すれば表示速度を改善できます。
AMPに対応しているWebページは、GoogleやTwitterといったサービスがキャッシュしています。つまりGoogleやTwitterがそのWebページを表示する際には、保存している情報を表示するためサーバーとの通信が発生せず、通常のWebページよりも速く表示されるのです。
Googleの検索順位にも影響すると言われているため、ぜひ活用したい方法です。ただし、WebページをAMPに対応させるには、HTMLの記述をAMPに対応させる必要があります。
AMP(アンプ)とは？UI/UX改善やSEO効果などメリット・デメリットを解説
AMP（アンプ）を導入するWebサイトが増えてきて、わが社もそろろろ…と考えていませんか？AMPを導入するメリット、デメリット、導入方法についてまとめてみました。
9.サーバーのスペックを高める
サーバーのスペックを高くして通信速度を速くすれば、それだけ応答時間を短くでき、表示速度が速くなります。Webサイトのデータを置いているサーバーの反応が遅いと、単純にWebサイトの表示速度が遅くなるのです。
また、共有サーバーではなく専用サーバーに置き換えることも、他のユーザーの影響を受けずに表示速度を高速化する方法の1つです。サーバーのスペックについては、速度を決める要素が複数あり、状況によってボトルネックとなっているものが変わります。主要な要素は以下のものがあります。
- 回線速度：数値が大きいほど表示速度が速い
- CPUのコア数：数値が大きいほど処理が速い
- HDDかSSDか：SSDのほうが処理が速い
- メモリ数：数値が大きいほど処理が速い
表示速度を遅くしている要因の特定は難しいので、エンジニアに確認してもらい、必要があれば置き換えを検討しましょう。
表示速度のまとめ
Webサイトのページ表示速度は、ユーザー体験に大きな影響を及ぼす要素です。またユーザー体験を通して、CVRや直帰率などWebサイトのパフォーマンスを示す数値も左右します。
さらにページ表示速度はGoogleが公式ガイドラインで提示しているうえ、アルゴリズムにも組み込まれており、SEOの観点からも非常に重要です。
表示速度が気になる方は、この記事で紹介した「PageSpeed Insights」や「Googleアナリティクス」を使って現状を把握し、改善項目の対処をぜひ進めてみてください。
＜無料＞資料ダウンロード
【成果に直結】Webサイトコンサルティング
Webのプロが成果の出るWebサイトへ改善いたします
