表示スピードは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上のテクニックとして採用されているのが、*「スケルトンスクリーン」*と呼ばれる表示スタイルです。

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