はじめに
はじめまして、こんにちは。クラスメソッド株式会社でWebを担当している野中です。
この度、「これから身につけるWebサイト高速化テクニック」と題して記事を連載させていただくこととなりました。
本連載ではWeb担当者やWebデザイナー、コーダーの方々に向けて高速化に関する手法や技術について調べ、身につけたテクニックを細かな解説を加えて紹介していきます。中には少し難しいテクニックも含まれますが、できる限り分かりやすく、すぐに実践できるよう紹介していきたいと思います。とても長い連載ですが、よろしくお願いいたします。
なお、本連載はクラスメソッド開発ブログで連載されている「身につけておきたいWebサイト高速化テクニック」の増補改訂版です。
本連載の流れ
本連載はできるだけ多くの方に興味を持っていただけるように、最初に高速化対策の全体像と必要な知識を紹介します。その後、具体的な高速化対策と成果の確認方法について解説していきます。最初は少し退屈かもしれませんがお付き合いください。
また、本連載の内容が高速化のすべてを網羅できたらよいのですが、不足する部分も出てくると思います。その際はぜひ私のtwitterアカウント（@nonaka_ryuichi）か、何かしらのかたちでコメントをいただけると幸いです。次回の記事で補足させていただきます。
対象読者
この連載は、Webサイト高速化に興味のあるWebデザイナー、フロントエンドエンジニア、サーバーサイドエンジニア、Webディレクター、Web担当者を対象にしています。
Webサイト高速化の現状
それではまず、Webサイト高速化の現状について少し紹介したいと思います。
読者の皆さんはWebサイトの高速化対策について、どの程度知っており対策を行ったことがありますか？ 実は日本のWebサイトは、欧米諸国に比べると高速化対策をしているサイトがとても少ないです。
Webサイト高速化という話題は今に始まったことではなく、ずいぶんと前から言われています。個人的に高速化について知り始めたのは、2007年発行の『High Performance Web Sites』（翻訳版：『ハイパフォーマンスWebサイト』）という書籍がきっかけです。
ですが、私を含めほとんどの方が高速化は必要であろうと認識しつつも取り組めていないのが現状ではないでしょうか。かくいう私も、本格的に高速化対策に興味を持ち取り組み始めたのは去年の夏、自社サイトのパフォーマンス改善を行う機会があったことがきっかけで、つい最近の話です。
なぜ高速化対策が必要なのか
利用者側の視点で考えれば、Webサイトの表示速度は速いほうがよいに決まっています。
特にスマートフォンの普及により、モバイルサイトの需要も増加しており、高速なレスポンスを求められる機会が増えています。モバイル通信はLTEで高速になりつつあるとはいえ、まだまだ不安定なことも多いのが現状です。
しかし、制作者側の視点に立ち高速化にかかるコストや手間を考えると「今でもそれなりに表示されるじゃないか」、という気持ちもよく分かります。
楽をしたいと思いつつも、以下で示すビジネス的なメリット・デメリットを考える高速化対策は必要不可欠です。
遅いWebサイトのデメリット
表示の遅いWebサイトはビジネス的な効果を上げられないだけではなく、逆にマイナスの影響を受けます。
ある調査結果から、このようなデメリットがあるようです。
- 離脱率の増加：初期表示に6秒かかった場合に離脱率が25％増加します。
- 遅いサイトは二度と来ない：サイトに訪れた人の61％が遅いサイトには二度とこない。
- サイトが遅いと競合サイトに移動する：ユーザーは初めて訪れたサイトの表示が遅いと75％の人が競合サイトへ移動します。
- 顧客満足度の低下：Webサイトの表示が1秒遅くなるたびに16％顧客満足度が低下します。
- 検索エンジンからの評価を得にくい：Googleは応答の速いWebサイトを上位に表示すると発表しています。
これらはビジネス的に致命的なデメリットですね。
参考サイト
- Why Web Performance Matters: Is Your Site Driving Customers Away?
- Web Performance and Ecommerce
- Using site speed in web search ranking
高速化のメリット
高速化対策は上記のデメリットを解消でき、結果的に売り上げの向上にも繋がります。
海外で行われた調査により、高速化により売り上げが向上した実例がいくつもあります。
- Shopzilla：6秒から1.2秒に高速化することによって12.0%の売上向上
- Bing：2.0秒高速化されるごとに5.0%の売上向上
- Amazon.com：0.1秒高速化されるごとに、1.0%の売り上げ向上
参考サイト
高速化のデメリット
ビジネス的な視点からよい影響が多いことは分かりました。
やった方がよいのは分かるけれども、開発者側の視点に立つと高速化対策を行うのも維持するのも大きな手間とコストがかかります。
例えば開発時には手間を減らすために開発効率を重視した作りになっていたり、コミュニケーションのために必要なコメントやスペースなどがソースコード上に多くあります。
開発中に高速化対策を重視してコメントを記述しなかったり、ファイルを1つにまとめてしまうと逆に開発効率が下がってしまうため大きな負担になってしまいます。
また、開発して終わりではなく、運用中の変更や追加の際も高速化対策を前提としなければなりません。
高速化対策は効率的な開発環境を維持しつつも、公開時にユーザーから見える部分は開発時の無駄をそぎ落とし、ストレスの少ないWebサイトを提供する必要があります。
手間を最小限に環境に合った高速化対策をしよう
ポイントはいかに自動化するかです。
すでにご存じの方は多いと思いますが、高速化の手間を減らしたり自動化するツールがいくつかあります。本連載では高速化の手間を最小限に抑えつつ、環境に合わせた高速化対策を紹介していきます。
