企業がデザインを外部委託して、ハイクオリティなデザインのWebサイトを作ったとしても、なぜかユーザーの直帰率が高くなってしまうことがあります。一方で、デザインはイマイチでも、ユーザーが心地よく使えるように設計されていれば、ユーザーの直帰率は下がる可能性があります。

多くのWebデザイナーやWebディレクターは、オンボーディングやページ遷移などの*ユーザー体験(UX)デザインに気をかけますが、昨今では、それ以上に重要だとされている要素があります。それは「スピード」*です。

今回は、UXにおけるページの表示速度について、Googleが新たに発表した検索結果に関する重要な「予告」も踏まえながら、ポイントをまとめていきます。

「ユーザー体験」が悪化する原因

phone.jpg
イメージ画像 / BURST

いくら素晴らしいサービスを提供していても、アプリやWebサイトの使い心地が悪ければ、ユーザーはサービスから離れていきます。今ですら*「ユーザー体験」(UX)*という言葉はすっかり定着していますが、それでもUXがないがしろにされているサービスもたくさんあります。

ユーザーがサービスに定着することを*リテンション(定着率)*と呼びます。ユーザーリテンションが低い原因としては、以下のようなものが考えられます。

・オンボーディングに失敗している
・ログインしにくい
・ページレイアウトが使いにくい
・読み込み速度が遅い

他にも数えきれない要素がリテンションに関係してきますが、特に致命的なものは最後に挙げた*「読み込み速度が遅い」*という点です。

2017年にGoogleが公表した調査によれば、ページの表示速度が1秒から3秒になるだけでも、ページの離脱が32％まで上昇し、6秒になれば106％(つまり2倍以上)にまで急激に上がることが分かっています。

mp.jpg
Think with Google

それにも関わらず、大抵ページスピードは他のUXの改善項目に比べると後回しになりがちです。しかし、ページの読み込み速度が数秒変わるだけでも離脱率が減るのであれば、優先的に改善する価値が大いにあるといえます。

表示スピードに左右される3つのパフォーマンス

1. 直帰率

日本では4GやLTEが主流になってきていますが、世界規模で見ると、3Gや2Gを採用している国も依然として残っています。また、日本でも4GやLTE回線が使えない場合は、一時的に3G回線が利用されることがあります。

3G通信では、1.5MBのデータをダウンロードするのに7秒かかると言われており、先ほども引用したGoogleの調査に従えば、少なくともページ全体の容量が1MBを超える場合には大きく離脱・直帰することが考えられます。

wpt.jpg
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. 画像の圧縮

optim.jpg
Optimzilla

今では多くのWebサイトがたくさんの画像を使っていますが、これらの画像の解像度が不必要に大きい場合には画像を圧縮しましょう。また、「PNG」ファイルよりも「JPG」の方が一般的にファイルサイズが軽くなるので、極力JPGファイルを使うように心がけましょう。また、アイコンは画像を使うよりも「SVG」を使った方が、画像劣化も防げるので一石二鳥となります。

画像を圧縮する際には、Photoshopなどの画像編集ソフトを利用するのが最も確実ですが、OptimizillaのようにWebブラウザ上で画像を変換してくれるサービスもあります。また、Macの「Automator」やiOS「Workflow」などのアプリを使えば、画像の変換やリサイズを自動化することも可能です。

2. CSS＆JavaScriptの圧縮

code.jpg
イメージ画像 / BURST

CSSやJavaScriptはテキストファイルですが、余計なコードが入っている場合は、不要なコードを削除することでファイル自体を軽くすることができます。

CyncerのCSS Minifierに代表されるツールを使うことで、CSSやJavaScriptなどのテキストスクリプトを圧縮することが可能です。

参考：
Googleも重要視！Webサイトの表示速度アップに欠かせないJavaScript/CSSの圧縮ツール10選

3. 使っていない外部ファイルの削除

clean.jpg
イメージ画像 / BURST

CSSやJavaScript以外にも、外部ファイルを見直すことで、ページの読み込み速度を高速化することができます。例えば、以下の項目を見直してみましょう。

・過剰なアニメーション
・カスタムフォント
・動画や音声
・背景画像
・jQueryなどのプラグイン

リッチな表現はサイト表示を豊かにしてくれますが、ページを読み込む前にページから離脱されてはせっかくのエフェクトも台無しとなってしまいます。アニメーションは最低限にしたり、カスタムフォントは使っていない文字を削除して軽量化したりと、工夫すべきところは山ほどあるでしょう。

4. サーバー環境を見直す

server.jpg
イメージ画像 / BURST

ページの読み込み速度が遅い原因を大きく3つに大別すると、*「通信インフラ」「クライアントサイド」「サーバーサイド」*となります。クライアントサイドは端末側の処理速度などの問題がありますが、ページを軽量化することで解決することができます。通信インフラはユーザーの利用しているキャリアやネットワーク設定に依存するので、思うように変えられません。もう一歩進んで工夫するとすれば、サーバーサイドでしょう。

Webサイトを構築しているサーバーの性能が悪いと、いくらページを軽量化したりユーザーが通信速度の速いキャリアに乗り換えても、ページの読み込みが遅くなってしまいます。もしご自身が運営するWebサーバーが遅いのであれば、乗り換えを検討してみるのもよいでしょう。

5. スケルトンスクリーンを用意する

skelton.jpg
Instagramでは、1の「スピナー」から2の「スケルトンスクリーン」に変えることで、UXを向上させることに成功 / Grafix Artist

それでもページの表示速度を1秒以下にするのは「至難の技」だと感じるひとは多くいるでしょう。そこでUX上のテクニックとして採用されているのが、*「スケルトンスクリーン」*と呼ばれる表示スタイルです。

スケルトンスクリーンとは、コンテンツが表示される前のプレイスホルダーを、ページが完全に読み込まれる前に見せる方法です。ページの読み込み時にストレスを与えないように「スピナー」(読み込み時にくるくる回転するアニメーション)を表示することが当たり前でしたが、スピナーよりもプレイスホルダーの方がユーザーの離脱率が低くなることが明らかになっています。

まとめ

ダイヤルアップ回線が主流だった時代と比べると、ユーザーは、ページが高速で表示されるのは「当然」だと感じているはずです。昨今のUXでは、ページの読み込みが「遅い」のをなんとかしなければならない、というレベルではなく、文字通り「パッ」と表示されるような、本当にシームレスな表示が求められています。

Radwareの調査では、なんとモバイルユーザーの85％が*「少なくともデスクトップより早く表示されるか、同じ表示速度で表示される」*ことを期待しています。

もしあなたがWebデザイナーなら、レイアウトやビジュアルなどに気を払っているかもしれません。しかし、これらはすべて「ページ速度」次第で台無しになってしまうことを、忘れてはいけません。