表示速度の計測の仕方｜ユーザーが求める速さはどれくらいか？

表示速度が重視される理由

表示速度を改善すると、サイトにはどのようなメリットがあるのでしょうか。改善しない場合に起こり得る問題と共にご紹介します。

表示速度の改善による効果

1．UXの向上

サイトやページの表示速度が改善されると、UX（ユーザーエクスペリエンス）が向上します。
UXとは、ユーザーがWebサイトを通じて得られる体験のことです。文字の読みやすいさや、お問い合わせフォームの入力が自動化されていること、クリックのしやすさなどが影響します。
表示速度が遅いと、ページがなかなか読み込まれず、ユーザーは「容量が重い」と感じる可能性があります。たとえ質の高いコンテンツを配信していても、表示速度が遅ければ、ユーザーには「不便なサイト」といった印象を与えてしまうでしょう。ユーザーは離脱して、ほかのサイトから情報を得ようとするかもしれません。

2．SEO対策

従来、表示速度は検索結果で表示される順位に影響しませんでした。しかし、Googleは2018年7月より「Speed Update」を実施し、ページの表示速度をモバイル検索のランキング要因に使う予定であることを発表しています。
「Speed Update」が実施されると、ページ単位で評価の影響を受けます。そのため、表示速度の測定結果によっては、改善に取り組んだほうが良いでしょう。
とはいえ、Googleがユーザーの検索意図を重視する姿勢は変わらないので、アンサー度が高く、優れたコンテンツを目指すことも大切です。

ページの読み込み速度をモバイル検索のランキング要素に使用します Google ウェブマスター向け公式ブログ

表示速度が遅いことにより発生する問題

Googleは、自社のモバイル広告LP90万ページを対象に、モバイルページの表示速度が下がるにつれて、離脱率も上がるかどうかを実験しました。人間の脳をモデル化した、機械学習システムを利用した調査です。

• モバイル用のランディングページが完全に表示されるまでの平均タイムは7秒短縮されたが、それでもまだ約15秒かかる。
• モバイルサイトを訪れたユーザーのうち、53％はページの読み込みに3秒以上かかると離脱している。
• テキストやタイトル、画像など、ページを構成する要素が400個から6000個になると、コンバージョン率は95％下がるだろう。

など、結果は上記の通りで、表示速度が遅いとユーザーの離脱率が上がることがわかりました。

Find out how you stack up to new industry benchmarks for mobile page speed think with Google

ユーザーが求める表示速度の速さ

ページの表示速度の検証ではありませんが、GoogleはWebサイトの反応時間の遅延と、それに対するユーザーの反応についてもまとめています。パフォーマンスの低下による「遅延&ユーザーの反応」に関する表を見てみると、ユーザーはかなり迅速なパフォーマンスを求めていることがわかります。
以下にも概要をまとめておきますので、Webサイトの表示速度を改善する際に、一つの指標にすると良いでしょう。
ページの表示速度とレスポンスはどちらも、最終的にはユーザーの満足度の向上につながります。

 RAIL モデルでパフォーマンスを計測する Google Developers

また、アプリベースではありますが、Googleのポール・キンラン氏が、508人を対象に、ニュース情報を収集するユーザーの属性や特徴について調査しています。
結果、約77.6%のユーザーがニュース情報を取得する際に最も欲している機能は、スムーズな操作であることがわかりました。
この調査結果からも、ユーザーにとって表示速度は重要な要素で、情報を収集する際に期待される項目の一つであると言えます。

レンダリング パフォーマンス Google Developers

ツールを利用した表示速度の測り方

「Speed Update」が実施されれば、ページの表示速度も重要視されるため、自身のサイトの表示速度を把握することが大切です。そのために必要な計測ツールを今回は5つ紹介します。

自社サイトの表示速度を計測する重要性

自社サイトの表示速度を調査し、分析することによって弱点がわかります。判明したマイナスポイントを直すことによって、UXも改善されるでしょう。

主な計測ツールの紹介と測り方

計測ツールについて、それぞれの機能と使用方法を解説しますので、自身のサイトに適切なものを選んで試してみましょう。

1．PageSpeed Insights

Googleが無料で提供しているツールです。モバイルとPCサイトの両方に使用できます。

機能

⑴読み込み速度（スコア）
⑵ユーザーエクスペリエンス（スコア）
⑶修正の必要性を三段階で評価。評価は「⑴修正が必要⑵修正を考慮⑶○個のルールに合格」という項目で行う。

⑵のユーザーエクスペリエンスについては、目安として100点満点のうち70点が平均点で、80点を取得すると高評価です。

使用方法

表示速度を計測したいページのURLを入力し、分析をクリックする。

2．Googleアナリティクス

Googleが提供している原則無料（有料プランあり）のツールです。一日当たりの訪問者数や訪問時間帯、アクセスの多いコンテンツ、検索で訪問したか直接URLを入力して訪問したか、検索されたキーワードなどの項目を把握できます。

「サイトの速度」のレポートでは、以下3つの反応時間を計測します。

機能

⑴ サイト上でサンプルに設定したページビューの表示時間。複数のディメンションを基準にデータを表示し、さまざまな観点からページの読み込み速度を確認できる（ブラウザ別・国別など）。これらのデータはページ速度レポートに表示される。
⑵ トラッキングの対象にしている個々のクリック、イベント、ユーザー操作の実行速度または読み込み時間（画像の表示時間やボタンのクリックの反応など）。「ユーザー設定速度」のレポートで参照できる。
⑶ ブラウザがドキュメントを解析し、ユーザーの操作が可能になるまでの時間。「ページ速度」レポートの「DOM速度」サブタブで参照できる。

使用方法

「目的のビューを表示」を選択し、「レポート」タブをクリックする。「行動」から「サイトの速度」を選択する。
サイトの速度について アナリティクスヘルプ

3．Test My Site

Googleが無料で提供している診断ツールです。モバイルサイトの速度をテストします。

機能

⑴ モバイルサイトでのサイト読み込み速度の確認
⑵ 読み込み中の想定離脱数の確認
⑶ 業種別平均速度との比較（サイトの読み込み速度を同業他社の平均と比較）
⑷ 速度改善に関する提案（テスト結果と問題点の改善方法をメールにて送信）

使用方法

速度を計測したいサイトのURLを入力し、矢印をクリックする。

4．GTmetrix

表示速度を計測し、具体的な改善ポイントを教えてくれるツールです。サイトパフォーマンスについて診断でき、表示速度に関する課題を抽出できます。Googleの表示速度計測サービス「PageSpeed」とYahoo！の表示速度計測サービス「YSlow」の2つを評価項目の基準にしています。

機能

⑴ URLを入力するだけで、調査したいサイトの高速化対策をABCDEF順に判定できる。
⑵ 各ファイルのダウンロード時間や順番を確認できる。
⑶JavaScriptを読み込むタイミングやCSSの配置、HTTPリクエストの削減などの基本的なことから、サーバー関係に関する高速化対策まで細かい項目で評価。

使用方法

速度を計測したいサイトのURLを入力し、「Analyze」をクリックする。

5．Pingdom Website

公開されているWebサイトの表示速度を計測し、速度を遅くしている要因を教えてくれるツールです。

機能

ファイルダウンロードの時間や順番が表示されるため、ファイルダウンロードに関する問題を見つけやすい。

使用方法

速度を計測したいサイトのURLを入力し、「START TEST」をクリックする。

表示速度を改善する方法

自身のサイトの表示速度に改善の余地がある場合、ユーザーの利便性を図るためにも早急に対処しましょう。ここでは改善方法について、お伝えします。

画像を最適化する

TinyPNGのような画像圧縮ツールを用いて、サイトに掲載する画像はなるべく圧縮して軽量化することを推奨します。
デバイスによって適切な大きさの画像を使用するのも有効です。

サーバーとの通信回数と通信量を減らす

Webサイトを表示する際には、htmlをサーバーにリクエストし、返ってきたhtmlをブラウザが表示する仕組みが用いられています。そのため、html以外のものも読み込む設定になっていると、表示が遅れる原因となります。
また、Webページの表示時間の80%は、画像やスタイルシート、スクリプト、Flashといったさまざまなパーツをダウンロードするのに使われています。各パーツに対してHTTPリクエストが送られるため、ページの要素が多いとそれだけページが表示されるのに時間がかかります。

対処法

⑴ 画像・CSS・JavaScriptは可能な限り量を減らす
⑵ ページの要素数を減らす
⑶ ファイルサイズの圧縮

上記の対策を取ることで、表示速度を改善できます。

ブラウザキャッシュを活用する

Webサイトを表示した際に画像やCSSなどのファイルを一時的に保存する機能を活用すると、ユーザーが再び訪問した際に、再度サーバーにアクセスして情報を取得する手間を省略できます。
データ通信の必要がなくなるので、結果として表示速度を上げることが可能です。
また、CDNを利用してデータを物理的に近い地域のサーバーにキャッシュしておくことでも、表示速度を短縮できます。特に海外ユーザーの閲覧があるサイトに有効です。

表示速度の改善がユーザーの満足度を上げる

調査結果も含めて、ユーザーは迅速なパフォーマンスを求めていることがわかりました。表示速度はUXの向上だけでなく、SEO対策においても重要なポイントです。「Speed Update」が実施されることを考慮して、自身のサイトの表示速度を計測し、把握することが求められます。計測結果で改善が必要と判断された場合は、早急に対処しましょう。