モバイルサイトの読み込みスピード1秒が、成果を大きく左右する【電通デジタルコラム】

※所属・役職は記事公開当時のものです。

モバイルサイトにおいて、ユーザー体験価値の向上は、どの企業でも優先的に取り組むべき課題です。

多くのWeb担当者が日夜頭を悩ませている課題は、

• ユーザーに刺さるコンテンツは何か？

• 商品、サービスをどう魅力的に伝えるか？

• インタラクティブで利便性の高いインターフェースをどう構築するか？

• コンバージョン率を上げる導線設計は？

といったことでしょう。

確かに、これらの視点は非常に重要ですが、上記の課題はすべて、「ユーザーがストレスなくWebサイト（以下、サイト）を閲覧できる」という前提に立って初めて成立することを忘れてはなりません。

ユーザーにとって、コンテンツは「すぐに表示される」のが当たり前の世界になりつつあります。しかし、モバイルサイトのユーザー体験価値向上のために、「Webページ（以下、ページ）の読み込みスピード」の重要性を理解し、最適化できているサイトは、果たしてどれくらいあるでしょうか。

現代では、ちょっとした読み込み遅延のストレスが、ユーザーの可処分時間の奪い合いにおいて、致命的な敗因になりえます。

本稿では、現在におけるモバイルサイトのスピード最適化を検討する意義から、具体的な対策について、改めて考えます。

モバイルサイトの"ユーザー体験価値向上"はどの企業も無視できない喫緊の課題

数年前から多くのサイトの対応策として、モバイルファースト（スマートフォンユーザー中心の開発・設計）への必要性が高まっていました。

現在も、モバイルの重要度は年々高まっており、かつてはPCが占めていた情報収集のメインデバイスの座は、モバイルにとって代わられたと言えます。

2019年1〜6月のPCとスマートフォンの利用実態をまとめたレポート^[1]では、以下のようなトピックが発表されています。

• 50〜60代のスマートフォン利用率が過去4年間で大きく上昇し、PC利用率を上回った

• スマートフォンからの動画視聴時間は、5年間で約4倍に成長した

• ECはスマートフォンのみで利用する人が大きく増加した

特に注意しておきたいのが、これらのモバイル化の波は特定の業種によったものではない、ということです。

たとえば、比較的複雑な商材・情報を取り扱うBtoBサイトでは、まだまだPCで見られている、という固定観念が持たれがちです。

しかし、実際に私が制作・運用担当している多くのBtoBのサイトにおいて、モバイルユーザーの割合は、PCユーザーの割合を大きく上回っています。

BtoBの人材募集サイト。ターゲットは40代前後、応募要件や人事制度など比較的複雑な情報を取り扱うサイトであるのにも関わらず、モバイルユーザーの割合は全体の70％を超えている

ターゲットのデモグラフィック（性別、年齢、居住地域、所得、職業、学歴、家族構成など）にかかわらず、各企業サイトに訪れるユーザーの大部分が目にしているのは、スマートフォン上で表示された情報なのです。

各企業のモバイルサイトにおけるユーザー体験価値の向上は、どのサイトにおいても「したほうがいい」から「しなければならない」という喫緊の課題となっていることを、まずはしっかりと認識すべきです。

1秒単位がマーケティング全体の成果を大きく左右する、モバイルサイトの読み込みスピード

サイトスピードの最適化が、各企業のマーケティング施策において後回しになりがちな理由としては、「アウトプットや施策効果が明確に測りづらい」ということが挙げられます。

確かに、エントリーフォーム最適化やバナー最適化、導線強化などの施策と比較すると、サイトスピードを改善したところで、それがどのくらいCV（コンバージョン）に寄与しているかについては、判断しづらい部分があります。

また、施策の結果に伴う見た目上の変化という点でも、コンテンツやナビゲーションの改修などの施策と比較すると、「改善した」という実感がわきにくいこともあるでしょう。

しかし実際は、モバイルサイトのスピード最適化は、秒単位で各サイトのCVに大きく影響します。

以下は、2017年にGoogle が発表している、モバイルサイトの読み込みスピードと直帰率（the probability of bounce）の関係性に関する統計データです。

Find out how you stack up to new industry benchmarks for mobile page speed^[2]

Google によると、ページの読み込みに3秒以上かかると、アクセスしたユーザーのうち実に53％が閲覧を止めてしまう、という結果が出ています。

また、直帰率はページ読み込み完了時間が長くなるのと比例して高くなり、ページの読み込みスピードが、

• 1秒から3秒に増えると、直帰率は32％増加する

• 1秒から5秒に増えると、直帰率は90％増加する

• 1秒から6秒に増えると、直帰率は106％増加する

• 1秒から10秒に増えると、直帰率は123％増加する

というように増えていきますが、日本国内の多くのサイトにおいては、モバイルページの読み込み速度は、3秒を大きく超えています。

国内における、業界別のモバイルサイトの読み込みスピードの平均スコア。多くのサイトが表示に5秒前後かかっていることがわかる^[2]

これは言い換えれば、国内企業の多くのサイトが、「顧客となりうる消費者のうちの半数以上を、サービスを説明する前に逃してしまっている」と言えるでしょう。

いかに顧客心理を分析し、サービスへの申込意欲を促進するコンテンツを設計していたとしても、実際にユーザーに閲覧してもらえなければ意味がありません。

また、米顧客分析ツール「Kissmetrics」による2017年の調査によると、「表示が1秒遅れることで、コンバージョン率が7%低下する」とのデータもあります^[3]。

このデータにのっとれば、仮に1日100万円の売り上げがあるECサイトの読み込み秒数が1秒遅れると、実に7万円の売り上げの損失、通年で約2500万円の損失を発生させることになります。

これは単純な換算にはなりますが、実際の売り上げに置き換えて考えてみると、モバイルサイトのスピードが与える施策全体の成果への影響がとても大きいことに気づきます。

また、つい最近の2020年5月28日、Google は検索順位のランキング要素として、ページの全般的な「エクスペリエンス」をシグナルとしてより重視することを発表しました^[4]。

具体的には、2021年以降、「Core Web Vitals」といった指標セットを導入し、「読み込み時間」「サイトがインタラクティブになるまでのスピード」「コンテンツ読み込み時の安定性」といった、サイトスピードに関連する要素を定量化し、評価していくとしています。

モバイルサイトのスピード最適化は、ユーザビリティ向上だけではなく、SEO（検索エンジン最適化）による、ユーザーの流入数の向上、という観点から見ても、非常に重要な要素となっていると言えます。

モバイルサイトのスピード最適化は、オウンドメディアを活用したマーケティング施策を考える際、ROIが高く、優先順位の高い施策として挙げられることがわかります。

モバイルサイトのスピード最適化の実践

では、具体的にページ読み込み速度を向上させる（サイトスピードの最適化）アプローチについて考えてみましょう。

各ページの読み込み速度は、

①サーバー性能
②ブラウザの処理速度

の2つに依存します。

①のサーバー性能については、回線速度の改善、CPUの処理速度向上、メモリの増設、HTTP/2の導入などが挙げられます。これらについては、影響範囲や開発・維持コストが②と比較すると高い場合が多いです。また、②がページ読み込みの遅延における主原因となっているケースも多いため、ここでは、②ブラウザの処理速度を中心としたスピード最適化のアプローチを簡単にご紹介します。

ブラウザ処理速度の最適化という観点で、すぐに思い浮かぶ施策は、

• ページで読み込む画像サイズの圧縮

• CSSファイル、JavaScriptファイルの圧縮

でしょう。実際、同じ画像を異なる解像度で複数用意して、デバイスの解像度に応じて出し分けをするのは、効果の出る施策の筆頭に挙げられます。

これらは基本的な施策として、すでに検討・実施されている場合も多いと思われますが、対応できていないサイトについては、まずはここからしっかりと始めていきましょう。

では、よりモバイルサイトのスピード向上のために実践していくべき次のステップは何でしょうか。

画像やCSS、JavaScriptファイルの圧縮といった基本的な施策が実践できている場合、次に考えるべきは、「画像の読み込み処理の工夫」です。

各サイトが保有するコンテンツの画質が向上し、データ容量がどんどん大きくなるにつれて、これらの画像をどう処理するかはサイトスピードの観点で非常に重要な問題であり、ここで筆頭に挙げられる施策が、Lazy Loadの導入です。

Lazy Loadを導入すれば、オフスクリーン（ブラウザでまだ見えていないページ領域）の画像を最初はフルサイズで読み込ませず、ユーザーが画面をスクロールし、画像がブラウザで見え始めたタイミングで、それぞれを順番にフルサイズで読み込みます。これによって、回線にかかる負荷を低減し、サイトスピードの高速化を実現することができます。

Lazy Loadの実装にあたっては、すでにさまざまなライブラリが存在しているため、これらを利用して、低予算かつ短時間で実装ができるため、サイトスピード最適化には効率的な方法です。

また、画像ファイルを大きく圧縮するため、そもそもの画像のフォーマットを変更してしまう、という手もあります。

現状、ページに表示する画像のフォーマットは、多くの場合、JPEG、PNG、GIFが使用されていますが、たとえばこれらの画像フォーマットを、Google が開発し、推奨している次世代の静止画フォーマット「WebP（ウェッピー）」に変換すれば、「画像の品質を落とさず、ファイル容量を大幅に圧縮できることができます。Google の報告によれば、WebPは、同一画像、同等画質のJPEGと比較して、画像サイズを25～34%小さくできるとのことです^[5]。ただ、Safariなど一部のブラウザに対応していない、という問題があるため、未対応ブラウザについてはJPEGやPNGを表示する、など記述方式の検討は必要になります。

さらにほかの競合サイトと差をつけていきたい場合であれば、最新のWeb技術への対応施策が検討されます。具体的にモバイルサイトのスピードの向上に非常に大きな効果をもたらすモダンWeb技術の1つとして、Google が提唱するAMP・PWAの導入があります。

AMP対応しているページは、あらかじめGoogle のサーバーにキャッシュされたデータを読み込むことで、未対応ページよりも速くコンテンツを表示することが可能になります。AMPへの対応前後を比較すると、平均で1/4ほど読み込み時間が短縮すると言われています。

また、PWA（Progressive Web Apps：モバイルユーザーの体験向上を目的とし、モバイルサイトにネイティブアプリのような機能を持たせたWebアプリ）の技術の一種である、Servise Workerを導入すれば、キャッシュを有効活用することで、一度読み込んだページの読み込み速度を劇的に上げたり、オフラインで表示させたりすることが可能です。

AMP・PWAは、それぞれ開発における制約も多く、導入にあたっては、実装方法やリスクを慎重に検討する必要がありますが、モバイルサイトのパフォーマンスにおいて他者サイトと差をつけていくためには、有効な手段の1つです。

以上をまとめると下記となります。

1. ページで読み込む画像サイズの圧縮（CSSファイル、JavaScriptファイルの圧縮）

2. 画像の読み込み処理の工夫（Lazy Loadの導入、「WebP（ウェッピー）」に変換）

3. 最新のWeb技術への対応施策（AMP・PWAの導入）

5Gの開始によって、スピード最適化の施策は不要になるのか？

2020年3月、NTTドコモ、KDDI、ソフトバンクが5Gサービスを開始しました。5Gと聞けば、「通信速度が上がる」というイメージを思い浮かべる方も多いのではないでしょうか。

5Gとは、第5世代移動通信システムの略称で、「高速・大容量」「高信頼性」「低遅延性」「多数端末との同時接続が可能」という特徴があります。通信速度について言えば、最大で20Gbps（理論値）の通信速度が実現すると言われています。

これまで紹介してきたサイトスピード最適化施策は、基本的に4Gでの通信を前提としたものです。5Gの通信速度がそんなに速いのであれば、今後サイトスピード最適化の施策は不要になるのでしょうか？

結論から言うと、まだまだサイトスピード最適化は必要です。

第一に、5G回線が日本全国に普及するにはまだ時間がかかります。5G回線が利用可能なエリアは、2020年3月のサービス開始時点で、3キャリアともまだ一部施設や地域に限られています。4Gの場合で見てみますと、サービス開始から人口カバー率が90％に達するまでに、1、2年程度かかっていますので、5G回線も最低それぐらいの時間がかかるのではないかと思われます。

第二に、すべての年齢層において、大多数のユーザーが5G対応デバイスを持つようになるには、さらに時間がかかります。参考までに、スウェーデンの通信機器メーカーEricssonが、2019年7月に公開した「Mobility Report」によると、5Gの契約者数は、2024年の終わりまでに、全世界で19億件、全モバイル通信のトラフィックに占めるシェアは35％に達すると見られています。^[6]仮に日本でも同程度の普及率だとすると、4年後の時点でも、まだ65％のユーザーは3Gや4G環境で通信していることになります。

第三に、5Gに対応するだけのサーバーといったインフラ側のアップデートがまだ不十分である、といった問題もあります。5Gによる「多接続」「低遅延・超高信頼性」を実現するためには、それだけサーバー側で高負荷な演算処理を行う必要があります。それらを行うためには、既存のサーバー性能ではまだ十分とは言えないようです。

つまり、5Gの導入によって、必ずしも20Gbps（理論値）のような圧倒的な通信速度がすぐに実現できるようになるわけではない、ということも考えなくてはなりません。

5Gサービスが開始したとはいえ、今後数年はまだまだ多くのユーザーは3G、4Gの通信環境でサイトにアクセスする状況が続きます。しっかりと直近のCV獲得効率を高めるという観点からも、即効性の高く、費用対効果の高い施策であるサイトスピード最適化を検討してみてはいかがでしょうか。

脚注

出典