SEOだけのためじゃない！ページ表示スピードを改善してユーザビリティを高めよう。

以前のエントリ「Webサイトのパフォーマンスを改善する3つのテクニック」では、外部のHTTPリクエストを最適化することでサイト表示スピードを改善するテクニックについてお伝え致しました。
今回のエントリでは改めてサイト表示スピードの重要性と表示スピードを簡単に確認する方法をお伝え致します。

サイト表示スピードがユーザーの購買行動にどれほどの影響があるかをレポートした有名なインフォグラフィックがあります。

・ネット顧客の47%が2秒以内にウェブページが表示されると考えている。
・ユーザーの40%は表示に3秒以上かかってしまうサイトから離脱する。
・79%の顧客は表示スピードに不満を感じたサイトを再び利用することはない。
・顧客の52%が表示スピードがサイトの信頼性において重要と述べている。
・表示が1秒遅れると16%の顧客満足度を低下させる
・ネット顧客の44%がネット上の良くない体験を友人に伝える。

参照元：「 Kissmetrics Blog 」 https://blog.kissmetrics.com/loading-time/

上記の資料のように、Eコマースでは、サイト表示スピードが非常に大きな要素としてショップの評価、売り上げに関わってくるかがわかります。

2010年4月、米Googleが検索順位の決定要素のひとつとしてサイト表示スピードを考慮することを発表しています。

Google incorporating site speed in search rankings
Using site speed in web search ranking
Googleは上記で影響度はそれほど大きくないものの、ランキング要因の一つであることを公表しています。

このようにユーザビリティの観点からもSEOの観点からも重要なサイト表示スピードですが、改善のために現状がどういった状態なのかを明らかにする必要があります。
チェックツールは様々なものがリリースされていますが、代表的なものをご紹介します。

PageSpeed Insightsは、Googleが提供するページ表示スピード測定ツールで、速度を測りたいページURLを入力し分析ボタンをクリックするだけでページの表示スピードを100点満点で評価してくれます。
採点だけでなく、ネックとなる画像の圧縮やソースコードの最適化など対策をアドバイスしてくれるので具体的な改善点が浮き彫りになります。
ちなみに下記の分析結果は私の黒歴史の個人ブログ。

モバイルでのページ表示についてと、

PCでのページ表示について分析とアドバイスが表示されます。

おなじみのアクセス解析ツール、Google Analyticsでも、「サイトの速度」を確認する事が可能です。
左メニューの「行動」→「サイトの速度」→「ページの速度」で各ページの平均読み込み時間が計測できます。

まずGoogle Analyticsでサイトの各ページについて一覧で確認し、その後パフォーマンスの低いページについて個別の対策をとるためにPageSpeed Insightsで詳細にチェックする、という手順がスムーズです。

上記2つのサービスはそれぞれサイト全体、ページ個別の表示スピードと課題を把握するのにとても便利です。
その他にも今見ているページについて即、何がネックになっているのか確認したいといった場合にはChromeの開発者向けツールを使用することでサイトの表示スピードを確認することができます。

Macの場合はCommand＋Option＋Iキー、WindowsだとF12キーを押すか、右クリックから「検証」を選択することで開発者向けツールを呼び出すことができます。
いくつかあるタブの中から「Network」のタブを選び、ページを再読み込みすると画像（紫）、HTML（青）、CSS（緑）、JavaScript（オレンジ）のそれぞれグラフが横に伸びて示されます。

それぞれの棒グラフが横に長いほど、表示もしくは実行に時間がかかっていることになります。

モバイルのアイコン（図の①）をクリックするとスマホ環境での表示スピードを確認することも可能ですし、回線スピードを設定（図の②のプルダウンメニュー）することもできるので対象とするユーザー層や表示されるシチュエーションを仮想立てて検証する事ができます。
下の図は同じURLでスマホでの表示を確認してみた結果です。

PegeSpeed InsightsではPCが27/100、モバイルが44/100という散々な結果でしたが、確かにモバイルの方が灰色（読み込み・実行待ち）のバーが若干短いのが分かります。
右クリックで簡単にページの表示順、それぞれの処理にかかる時間が可視化されるので、気になるページがあったら確認してみてはいかがでしょうか

いつまでも表示されずじりじりとさせられてしまうようなサイトは論外として、たとえ数秒でも表示スピードの違いがユーザーに与える心理的な影響がいかに大きいかを意識すべきです。
サイト改善の際に、デザインやコンテンツと同時に表示速度のパフォーマンスにも配慮しページ構成を考えてみてはいかがでしょうか？
上記のPageSpeed Insights、Chorome DeveloperToolは自社サイトだけでなく他社のページでも確認可能です。
競合ページをベンチマークし、より快適なユーザー体験を提供することでビジネスの成果につなげていきましょう。