「Webサイト・アプリ高速化テクニック徹底解説」ということで、本連載はWebサイト・アプリの高速化テクニックについて幅広く解説していく予定です。今回は、具体的な高速化のテクニックに触れずに、高速化が必要な理由や、スピード測定ツールなど基本的な部分について解説します。
第1回 Webサイト・アプリの高速化ファーストステップ
皆さんはじめまして、「Webサイト・アプリ高速化テクニック徹底解説」というタイトルでこれから連載させて頂く、HTML5 エキスパートの吉川です。連載の初回ということもあり、今回はWebサイト・アプリの高速化に関する全体的な概要や最新情報、今後連載で触れていくトピックスなどを紹介していきます。
何故、高速化が必要なのか？
最近では、HTML5とその周辺技術などによってWebの表現力が非常に豊かになりました。そのため、これまでのWebでは考えられなかったような多彩なWebサイトが増え、多機能なWebアプリも多く見られるようになっています。同時に、スマートフォンやタブレットなどのようなモバイル端末をはじめとして、最近では家電やテレビなどの組み込み機器での利用も増えています。これらのデバイスは、デスクトップのような十分な性能や高速なネットワークを持っていないことがほとんどです。その中でも、既にモバイルデバイスは爆発的に普及しており、Webの中心はモバイルにシフトしつつあります。このような背景から、さまざまな環境からでも同様に高いユーザーエクスペリエンスを得ることができるように、Webサイト・アプリの高速化が必要になっています。
そして重要なのは、Webサイト・アプリの高速化について検討する場合、ユーザーの視点から考えるという点です。そのため時には、実際の高速化よりもユーザーの体感速度をいかに早くするかということを重視する必要があります。高速なWebサイト・アプリは、それだけユーザーエクスペリエンスに優れています。そう考えると、高速化はユーザーエクスペリエンスを向上させるためのひとつの手段であるとも言えます。
スピードは機能に勝る
Webサイト・アプリのスピードは、実際にはユーザーエクスペリエンスに対してどのぐらいの影響があるのでしょうか？ 実は、安易に多くの機能を追加するよりも、高速化のほうがユーザーエクスペリエンスの向上に役に立つことがあります。例えば、Bingによるサーバー遅延時間とその影響についての調査（詳細はこちら）では、次のような結果になっています。
この調査結果を見ると、サーバーの遅延時間が2秒になると1ユーザーあたりの収益率（Revenue/User）が4.3%も下がる結果となっています。このように遅延が大きくなればなるほど、ユーザーエクスペリエンスも低下し、ビジネス的にも収益率に大きな影響を及ぼすことがわかるでしょう。また、同様の例として、Googleによる検索結果の遅延時間に対する調査結果を見てみましょう。
Googleでは、検索結果が表示されるまでの遅延時間が400ミリ秒になると、1ユーザーあたりの検索数が0.59%も減っています。Googleのような莫大なユーザーを抱えるサイトからしてみれば、例え1%以下であってもその影響は計り知れません。このことからもGoogleは、検索結果の遅延を400ミリ秒以内にすることを目標にしています。
これらの調査結果から、Webサイト・アプリのスピードは、ユーザーエクスペリエンスに多大な影響を及ぼすことがわかるでしょう。直接的な影響によるもの以外でも、高速化はSEO的にGoogleのページランクにも良い影響を与えますし、多くの高速化のテクニックでは、サーバーなどのバックエンド側のリソースの節約にも繋がります。そのため、もしWebサイト・アプリに改善の余地があるのであれば、高速化することのほうが、単に新しい機能を追加するよりも効果が高いことが多くあります。
スピード測定ツール
実際に、自身のWebサイト・アプリがどのぐらいのスピードなのかを簡単に知りたい場合に便利なツールをいくつか紹介します。まずは、これらのツールを使ってスピードや改善点などを分析してみると良いでしょう。
YSlow
YSlowは、Yahoo!が提唱するWebサイトのパフォーマンスのためのルールに沿っているかを解析してくれるツールです。実際にYahoo!のサイトで活用されている全23のルールについて評価し、改善点を提案してくれます。
PageSpeed
PageSpeedは、GoogleによるWebページ解析のツールです。YSlowと同じようにパフォーマンスの評価結果と改善点を提案してくれます。こちらは、日本語に対応しています。
Google Analytics
実際にWebサイトに訪れているユーザーがどの程度表示に時間が掛かっているかを知るには、Google Analyticsが便利です。既にWebサイトにGoogle Analyticsを利用しているのであれば、レポートの「コンテンツ」＞「サイトの速度」で、すぐにでも確認することができます。ユーザーの環境ごとに各時間を確認できるのでとても便利です。
今後、連載で触れていくトピックス
今後の連載では、Webサイト・アプリの高速化テクニックについて幅広く解説していく予定です。高速化というトピックにおいては、細かなテクニックの解説が多くなってしまうことがありますが、抜本的な設計や工夫が必要になる場合もあります。そういった点もカバーしていきたいと思いますので、是非この連載を活用してください。具体的なトピックとしては次のようなものを考えています。
- ネットワークアクセスを最小限にする
- JavaScript高速化テクニック
- アニメーションの高速化テクニック
- キャッシュ・オフラインアプリケーションのテクニック
- メモリの利用を最適化する
- ハイパフォーマンスCanvas
- モバイルチューニング
上記のトピック以外にも、何かあればどんどん解説していきたいと思います。こんなことが知りたいというネタや、何か困っていることについて解決方法を知りたいなどがあれば、是非コメントにてご意見くださればと思います。というわけで次回もお楽しみに！
