Smartphone スマホ

 
スマホ調査・データ

モバイルサイトの表示速度をMobifyで高速化

モバイルサイトの表示速度はMobifyで改善
モバイルサイトの表示速度について、しっかりと意識できていますか? LTEなどの高速通信やWi-Fiオープンネットワークの普及など、ここ数年でモバイルの回線環境が良くなっているからと、あまり気にしていない方も多いのではないでしょうか。しかし、依然として3G通信を基本で使っていたり、データ通信過多による速度制限を受けるユーザーや、地下施設など電波状況が整備されていない場所があることも事実です。

こうした一部のユーザーを含め、いかなる通信環境のユーザーに対しても最適なパフォーマンスでコンテンツを配信することが、サイトを運営する上での目的達成につながります。次項より解説する、ページの表示速度に関するヒントをぜひ自身のサイトにも活かしてみてください。

まずは現状の表示速度を確認

手始めとして、まずは自身で管理されているモバイルサイトの表示速度を確認してみましょう。ここでは筆者がお客様のサイトを調査する際に使っている、2つの計測ツールについて紹介します。

PageSpeed Insights

Google Developersで提供されているフリーツールで、こちらではページのパフォーマンスのうちネットワークに依存しない部分(サーバー設定、ページのHTML構成、画像やJavaScript、CSS などの外部リソースの使用方法)のみを考慮したスコアを100点満点で確認することができます。

一つの指標として85点以上で合格点、65点以上で及第点という考え方がありますが、あくまでサイトのつくりによる評価となるため、実際の表示速度と相関していないケースもあります(スコアが65点未満でも、表示速度は速いなど)。ただし計測結果と共に表示される解決策の提案は、ページのパフォーマンスを向上させる上で大事な項目となりますので、サイト改修やリニューアルなど、手を加える機会があればこれらを考慮して対応することをおすすめします。

PageSpeed Insights

WebPagetest

WebPagetest LLCによって無償提供されている測定ツールです。上記のPageSpeed Insightsとは異なり、指定したロケーションやブラウザ、接続環境などに応じた実測値を確認することができます。

右上にはFirst Byte Time、Keep-alive Enabled、Compress Text、Compress Images、Cache static contentといった各カテゴリ毎の評価がA~Fランクで表示されますが、本項では表で示されている実際の表示時間について見ていきます。

WebPagetest Test Result

まず確認したいのが「Start Render」の値です。これは何かしらのページの要素が画面上に表示されるまでの時間であり、この秒数までは何も表示されない真っ白な画面が続くことを意味しています。詳しくは後述しますが、この時間が長いようだとユーザーの離脱に直結してしまうため、該当する場合は最優先で対応する必要があります。

関連記事:Start Renderの重要性に気付いてる?
https://www.domore.co.jp/mobilelab/smartphone/start-render

WebPagetest Test Result 2

次に見るべき点としておすすめなのが「ファーストビュー内で表示が整うまでの時間」です。こちらは同表内で確認することはできないので、その下の表にある「Filmstrip View」(Videoの列、First Viewの行)をクリックしてみてください。すると指定されている時間単位(Thumbnail Interval)に応じた画面読み込みの動きを視覚的に見ることができます。ここから、ファーストビュー内でしっかり画像が表示し終わっているサムネイルを探し、その時間を確認してください。

WebPagetest - Visual Comparison

いかがでしょうか。「Start Render」と比較してさらに時間がかかっていることと思います。ユーザーの心理として、たとえ画像が表示され始めていてもそれが終わるまでは待機時間として待たされている印象を持ちます。そのためこの待機時間が長い場合でも、「Start Render」と同様に離脱につながる可能性が高いといえるでしょう。

表示速度が遅いと何が起こるか?

では、表示速度が遅いこで、具体的にどんな変化が起こるのか。以下の各企業が出した調査結果をご覧ください。

表示速度が0.1秒遅くなると、売上が1%減少する(Amazon)

Amazon

表示速度が10%速くなると売上が1%増加、35%速くなると5%増加する(ebay)

ebay

表示速度が1秒未満の場合に比べ、1~2秒ではコンバージョン率が半分以下に減少する(Walmart)

Walmart

表示時間に5秒以上かかると74%のユーザーが離脱する(Google)

Google

いかがでしょうか。ECサイトであれば表示速度の遅延はそのまま売上の減少に直結してしまい、それ以外であっても表示時間によっては多くのユーザーの離脱につながってしまうという恐ろしい実態が分かるかと思います。

表示速度を改善するには

表示速度の改善には、大きく分けて2種類の方法があります。一つはフロントエンドでの高速化。二つ目はバックエンド(サーバーサイド)での高速化です。ただしバックエンドでの高速化は、サーバーに関わる調整と専門知識が必要となるために時間も費用もかかります。加えて「ウェブサイトの待ち時間の90%はフロントエンドに起因」とするデータがあるように、その効果も大きくは見込めない可能性が高いです。

ウェブサイトの待ち時間の90%はフロントエンドに起因(SOASTA)

SOASTA

そこでフロントエンドでの対応に注力をしたいところですが、前述したPageSpeed Insightsでの解決策を一つ一つ手間暇をかけて対応していくというのも得策とはいえません。次項では、フロントエンドでの高速化を短期間かつ低コストで一括して実現できるサービスについて紹介します。

フロントエンドでの高速化を実現する「Mobify(モビファイ)」

モビファイは、PCサイトの機能とコンテンツの同一性を保ったまま、自由度の高いデザインでスマートフォンに最適な表示をおこなうことのできるプラットフォームです。また、以下の仕組みによってページの高速表示を実現します。

画像の最適化

ユーザーのデバイス画面サイズと種類に応じてグラフィックを調整するリサイズ機能と、圧縮エンジンによって画像を軽量化します。さらにCDN(Contents Delivery Network)によるキャッシュ配信で、高速表示が可能となります。

スクリプトの圧縮で容量・セッション数を削減

豊富な機能を維持しながら、ユーザーに配信されるJavaScriptなどのファイルサイズを縮小し、まとめて配信。リクエスト数を減らし、読み込みの遅延を防ぎます。

スマートにリソースを簡略化

モビファイでは、スマホ用にカスタムされた無駄のないテンプレートによって、スマホでは必要の無い情報(CSSやHTML)は一切読み込みません。PCサイトと機能は同一で、高速に表示することが可能です。

モビファイの仕組み
http://www.domore.co.jp/mobify/how-to-works/

モビファイでは高速化を実現するだけでなく、自由度の高いデザイン性と豊富な実績から培われた知見により、ユーザーにとって最適なUIの提案をおこないます。

そしてこれらを始めとした優れた特徴により、ユーザーがスマートフォンでページを閲覧する際の体験(UX)を最大化、サイト運営者が掲げる目的の達成を支援します。

この記事を書いた人
北澤 佑馬
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事