モバイルページにとってたった1つの重要なこと、それは「スピード」
企業がデザインを外部委託して、ハイクオリティなデザインのWebサイトを作ったとしても、なぜか ユーザー の直帰率が高くなってしまうことがあります。一方で、デザインはイマイチでも、 ユーザー が心地よく使えるように設計されていれば、 ユーザー の直帰率は下がる可能性があります。
多くのWebデザイナーやWebディレクターは、オンボーディングや ページ 遷移などの ユーザー 体験( UX )デザインに気をかけますが、昨今では、それ以上に重要だとされている要素があります。それは「スピード」です。
今回は、 UX における ページ の表示速度について、 Google が新たに発表した 検索結果 に関する重要な「予告」も踏まえながら、ポイントをまとめていきます。
「 ユーザー 体験」が悪化する原因
イメージ画像 / BURST
いくら素晴らしいサービスを提供していても、 アプリ やWebサイトの使い心地が悪ければ、 ユーザー はサービスから離れていきます。今ですら「 ユーザー 体験」( UX )という言葉はすっかり定着していますが、それでも UX がないがしろにされているサービスもたくさんあります。
ユーザー がサービスに定着することを リテンション (定着率)と呼びます。 ユーザー リテンション が低い原因としては、以下のようなものが考えられます。
・オンボーディングに失敗している
・ログインしにくい
・
ページ
レイアウト
が使いにくい
・読み込み速度が遅い
他にも数えきれない要素が リテンション に関係してきますが、特に致命的なものは最後に挙げた「読み込み速度が遅い」という点です。
2017年に Google が公表した調査によれば、 ページ の表示速度が1秒から3秒になるだけでも、 ページ の離脱が32％まで上昇し、6秒になれば106％(つまり2倍以上)にまで急激に上がることが分かっています。
Think with
Google
それにも関わらず、大抵 ページ スピードは他の UX の改善項目に比べると後回しになりがちです。しかし、 ページ の読み込み速度が数秒変わるだけでも 離脱率 が減るのであれば、優先的に改善する価値が大いにあるといえます。
表示スピードに左右される3つのパフォーマンス
1. 直帰率
日本では4GやLTEが主流になってきていますが、世界規模で見ると、3Gや2Gを採用している国も依然として残っています。また、日本でも4GやLTE回線が使えない場合は、一時的に3G回線が利用されることがあります。
3G通信では、1.5MBのデータをダウンロードするのに7秒かかると言われており、先ほども引用した Google の調査に従えば、少なくとも ページ 全体の容量が1MBを超える場合には大きく離脱・直帰することが考えられます。
WebPageTest
WebPageTestという ページ の速度を測るサービスでは、「Advanced Settings」(詳細設定)でConnection(接続)を3Gに設定することで、3Gの場合のページの読み込み時間を測定することができます。 ページ スピードが気になる方はぜひ実際にテストを行なってみましょう。
2. 検索順位
Google が2018年3月末に出した発表では、いよいよ Google の検索指標としてモバイルファースト インデックス (MFI)の使用を開始したことが報告されました。
これまではデスクトップ版とモバイル版で コンテンツ 内容が大きく異なる場合、モバイル検索 ユーザー に大きな問題が発生する可能性がありました。これからは、順次検索にMFIが採用されるWebサイトが増え、モバイル版の コンテンツ が インデックス の対象となります。
検索順位はさまざまな要素が複雑に絡み合って評価されますが、その中でもページの「表示スピード」は無視できない要素です。 Google の別の発表では、2018年7月からは ページ の読み込みに改善が見られないサイトはモバイル検索のランキング要素に少なからず影響するという予告が出されています。 Google では、この改善のことを「Speed Update」と呼び、Webサイトの運営者に注意喚起を行なっています。
3. リファラル
ページ の UX を改善するための項目にはさまざまなものがありますが、とりわけ ページ スピードが遅くなると悪い 口コミ に影響します。
不思議なことに、使いにくい、デザインがイケてないなどの理由であれば、 ユーザー はそのまま ブラウザ を閉じるだけです。しかし、 ページ の読み込み速度が遅いと Twitter などのSNSの書き込みが増えるようです。
表示スピードは UX だ ─ ユーザー を満足させるためにできる5つのこと
1. 画像の圧縮
Optimzilla
今では多くのWebサイトがたくさんの画像を使っていますが、これらの画像の解像度が不必要に大きい場合には画像を圧縮しましょう。また、「PNG」ファイルよりも「JPG」の方が一般的に ファイルサイズ が軽くなるので、極力JPGファイルを使うように心がけましょう。また、アイコンは画像を使うよりも「SVG」を使った方が、画像劣化も防げるので一石二鳥となります。
画像を圧縮する際には、Photoshopなどの画像編集ソフトを利用するのが最も確実ですが、OptimizillaのようにWeb ブラウザ 上で画像を変換してくれるサービスもあります。また、Macの「Automator」やiOS「Workflow」などの アプリ を使えば、画像の変換やリサイズを自動化することも可能です。
2. CSS ＆ JavaScript の圧縮
イメージ画像 / BURST
CSS や JavaScript は テキスト ファイルですが、余計なコードが入っている場合は、不要なコードを削除することでファイル自体を軽くすることができます。
CyncerのCSS Minifierに代表されるツールを使うことで、 CSS や JavaScript などの テキスト スクリプトを圧縮することが可能です。
参考：
Googleも重要視！Webサイトの表示速度アップに欠かせないJavaScript/CSSの圧縮ツール10選
3. 使っていない外部ファイルの削除
イメージ画像 / BURST
CSS や JavaScript 以外にも、外部ファイルを見直すことで、 ページ の読み込み速度を高速化することができます。例えば、以下の項目を見直してみましょう。
・過剰なアニメーション
・カスタム
フォント
・動画や音声
・背景画像
・jQueryなどの
プラグイン
リッチな表現はサイト表示を豊かにしてくれますが、 ページ を読み込む前に ページ から離脱されてはせっかくのエフェクトも台無しとなってしまいます。アニメーションは最低限にしたり、カスタム フォント は使っていない文字を削除して軽量化したりと、工夫すべきところは山ほどあるでしょう。
4. サーバー環境を見直す
イメージ画像 / BURST
ページ の読み込み速度が遅い原因を大きく3つに大別すると、「通信インフラ」「クライアントサイド」「サーバーサイド」となります。クライアントサイドは端末側の処理速度などの問題がありますが、 ページ を軽量化することで解決することができます。通信インフラはユーザーの利用しているキャリアやネットワーク設定に依存するので、思うように変えられません。もう一歩進んで工夫するとすれば、 サーバ ーサイドでしょう。
Webサイトを構築しているサーバーの性能が悪いと、いくら ページ を軽量化したり ユーザー が通信速度の速いキャリアに乗り換えても、 ページ の読み込みが遅くなってしまいます。もしご自身が運営するWebサーバーが遅いのであれば、乗り換えを検討してみるのもよいでしょう。
5. スケルトンスクリーンを用意する
Instagramでは、1の「スピナー」から2の「スケルトンスクリーン」に変えることで、
UX
を向上させることに成功 / Grafix Artist
それでも ページ の表示速度を1秒以下にするのは「至難の技」だと感じるひとは多くいるでしょう。そこで UX 上のテクニックとして採用されているのが、「スケルトンスクリーン」と呼ばれる表示スタイルです。
スケルトンスクリーンとは、 コンテンツ が表示される前のプレイスホルダーを、 ページ が完全に読み込まれる前に見せる方法です。 ページ の読み込み時にストレスを与えないように「スピナー」(読み込み時にくるくる回転するアニメーション)を表示することが当たり前でしたが、スピナーよりもプレイスホルダーの方がユーザーの 離脱率 が低くなることが明らかになっています。
まとめ
ダイヤルアップ回線が主流だった時代と比べると、 ユーザー は、 ページ が高速で表示されるのは「当然」だと感じているはずです。昨今の UX では、 ページ の読み込みが「遅い」のをなんとかしなければならない、というレベルではなく、文字通り「パッ」と表示されるような、本当にシームレスな表示が求められています。
Radwareの調査では、なんとモバイル ユーザー の85％が「少なくともデスクトップより早く表示されるか、同じ表示速度で表示される」ことを期待しています。
もしあなたがWebデザイナーなら、 レイアウト やビジュアルなどに気を払っているかもしれません。しかし、これらはすべて「 ページ 速度」次第で台無しになってしまうことを、忘れてはいけません。