Webサイトパフォーマンスの重要性と改善のための調査方法

Webサイトのパフォーマンス（表示速度や動作速度）の重要性と、調査方法について解説しています。

Yahoo!ニュースで今年の6月に、月単位で初めてスマートフォンからのPV（ページ・ビュー）がPCからのPVを上回ったというニュースがありましたが、モバイルデバイスの普及に伴い最近ではPCより、モバイルデバイスでサイトを見る回数が増えてきています。

また、ニールセンの調査結果によると、2013年4月から2014年4月の1年間でスマートフォンからのインターネット利用者数が1,172万人（41%）増加したのに比べ、PCは522万人（−9%）減ってるというデータがあります。

このことから、従来通りのPCのみを考えたWebサイト制作ではなく、マルチデバイス対応がより一層必要となってきているのが分かります。

さて、マルチデバイス対応で問題となるのがパフォーマンスです。

モバイル端末はPCに比べて処理速度も遅く、回線も不安定ですが、ユーザーはPCと同じ様な速度で表示されることを期待していると言われます。しかし、それに反してWebサイトは、レスポンシブデザイン、JavaScriptを使ったWebアプリケーションなどの登場で、複雑化、リッチ化が進み、ファイルサイズも増え続けています。

その様な中では、サイトパフォーマンスの向上まで手が回らないといった状況があるのではないでしょうか。

Webサイトパフォーマンスがもたらす影響

ではサイトパフォーマンスが落ちるとどのような影響があるのでしょうか。

サイト表示速度の影響としまして、以下の調査結果があります。

Google

サイト表示が0.5秒遅くなると、検索数が20%減少する

Amazon

サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する

Aberdeen Groupの調査結果

表示速度が1秒遅くなるとページビューが11%低下、コンバージョン率が7%低下、顧客満⾜度が16%低下する

また、Webユーザビリティの第一人者・ヤコブ・ニールセン博士は、「Website Response Times」と題した記事（英語）で、反応速度について以下のように述べています。

0.1秒までのなら応答が瞬時に返ってきたという印象を与える
1秒までならユーザーの思考は途切れなく流れる。
10秒までならユーザーの注意力は続く。
10秒遅延してしまうと、ユーザーが即、サイトから離れてしまうことも多くなる

以上のことからサイトパフォーマンスが向上しなければ、コンバージョン率のアップ、ユーザビリティの実現は難しいことが分かります。そして、サイトパフォーマンスを上げることは、サイトの品質向上の1つだということが言えるのではないでしょうか。

Webサイトパフォーマンスを改善するには

ここでは大きく2つのカテゴリに分けて紹介したいと思います。

ページロード

ユーザーがWebページを見ることができる状態になるまでの表示速度です。

表示速度を調べるツールの代表的なものを紹介します。

これらのツールで指摘される多くはフロントエンド側での対応が可能です。

主に以下の項目の対応が必要と指摘されます。

リソース（HTML、CSS、JavaScript）を圧縮する
画像を最適化する
gzipによるファイル圧縮
リンク先ページでリダイレクトを使用しない

指摘された箇所を対応すれば一般的なWebサイトのページロードでの目標は達成できるはずですが、問題になるものがあるとすれば画像です。いくらHTML、CSS、JavaScriptファイルを圧縮しても、重たい画像を何枚も読み込んでいては意味がありません。

そこで、画像にする必要性があるのかもう一度考えることも大切ではないでしょうか。

最近ではCSS3でグラデーションであったり、角丸などを表現することができます。また、アイコンなどの画像は、CSSスプライトにするか、SVG、Webフォントの選択肢もあります。

実行時のパフォーマンス

ユーザーが何か操作をした際のリアクション速度のことです。

ボタンを押した際、スクロールした際にユーザーを待たせずに、応答することが必要となります。これにはブラウザのレンダリング処理やJavaScriptの実行速度などが関わってきます。

問題となる代表的なものとしては以下のものがあります。

border-radius、box-shadowの組み合わで組まれたものがスクロースした際に、ブラウザの処理が追いつかず重くなる
GPUを使った処理で関係ない部分まで巻き込んでしまう
スマートフォンではclickイベントが300ms遅れる

このようなパフォーマンスを調べるにはブラウザの開発者ツールを利用するのが一般的です。

以上、2つのカテゴリを紹介しましたが、パフォーマンスを改善する際に、重要なことはやりすぎないことです。

パフォーマンスを低下させている箇所を知り、適切に修正する必要があります。それにはデータを測り続けることが大切です。そこで初めてパフォーマンス改善の施策を打つことができるのではないでしょうか。