すべてのウェブマスターに伝えたい『サイトを高速化して世界をよくしよう！』
※記事内に広告を含む場合があります
スマートフォンの普及によってネットワークの回線が逼迫し、障害が発生するというニュースが増えました。
特に携帯電話各社はそれに対応するために、回線の強化を急いでいます。
先日、ソフトバンクの孫社長もTwitterでこうつぶやいていました。
@masason
孫正義 1%のユーザーが全体のネットワークの3割のトラフィックを占拠。通信網が逼迫し、残り99%のユーザーが迷惑している。【日経BP】皆でインフラを支えよう、 http://t.co/psiYHluH
Favorite Retweet Reply
私たちが普段目にしているホームページや動画は、インターネット回線を通じて自分の持っているパソコンやスマートフォンにデータをダウンロードして表示されています。
Youtubeを見たり、たくさんのホームページを見ることで、データをダウンロードする時に使われるネットワークの『転送量』が増え、それが結果的にネットワーク障害を引き起こしているのです。
世の中の転送量が増えると、大きくデメリットが2つ生じます。
①ネットワーク障害が増え、コストが上がる
各社、インターネット回線の増強には日々力を入れて頑張ってくれています。
しかし、あまりに転送量が増えるとネットワーク障害が起こりやすくなりますし、より多くの設備の増強が必要になると、私達の支払う回線使用料金が高くなります。
②より多くの電力を消費する
ネットワーク転送量が増えるほど、より多くの電力が必要になると思います。（たぶん）
動画を再生し続けたり、重いページを見続けると、それだけ長い時間の通信が必要になり、ネットワークの電力消費量だけでなく、手元のPCやスマホのバッテリー消費量も増えますよね？
結果、無駄な電力エネルギーを消費してしまうことになります。
転送量を少なくすることで、エネルギーの消費量を抑えることができます。
サイト運営者にできること
では、世の中の転送量を減らすにはどうすればいいか？
サイト運営者側にできることは『ホームページを1バイトでも軽くする』ということです。
ホームページを軽くすることはつまり、ホームページの表示速度を高速化させるということです。
サイト高速化による3つのメリット
サイトを高速化すると、以下の3つのメリットが生まれます。
①サイト閲覧時のストレスから解放される（ユーザーメリット）
誰も重いサイトは見たくありません。
サイトユーザーは、快適にアクセスでき、クリックした後にすぐにページが表示される軽いサイトを好みます。
ウェブサイトを高速化して軽くする努力をすることで、サイトユーザーは閲覧時のストレスから解放されるメリットがあります。
②エネルギーの消費量を抑えることができる（環境メリット）
世の中のホームページが少しでも軽くなれば、ネットワーク転送量の削減につながります。
それは、貴重な電力エネルギーの消費量を抑えることにもつながります。
また、通信会社も無理な設備投資を抑えることができます。
③サーバー負荷の軽減と売上アップ（自分へのメリット）
ホームページが軽くなれば、もちろんサイトを運用しているサーバーに対する負荷も小さくなります。
より小さなサーバーで多くのアクセス負荷に耐えられるので、サーバーや回線使用料のコストダウンにつながります。
また、ホームページが高速化するとコンバージョン率がアップすると言われているため、軽いページを作ることで、売上アップにもつながります。
表示速度が 0.5秒遅くなると、検索数が20%減少する。（Google）
表示速度が 0.1秒遅くなると、売り上げが1%減少する。（Amazon）
2秒のレスポンスタイム低下はユーザーあたり4.3％の売上低下を招く。（Bing）
http://www.pal21.com/service_perf.php
サイト高速化の方法
サイト高速化の方法はたくさんありますが、ここではざっくりとその内容を紹介します。
①圧縮する
HTML、スタイルシート、Javascript等のファイルは、圧縮することでファイルの容量を小さくできます。ここで言うファイルの圧縮とは、改行等をなくして、詰めて記述してしまうというものです。（Googleのトップページのソースを見るとどんなものかわかりますし、Lifeclipでもスタイルシートの圧縮を行なっています）
これらのファイルの圧縮は専用のツールがたくさんありますので、ワンクリックで圧縮可能です。
ただし、言うまでもなくファイルを圧縮すると、編集作業がかなり面倒くさくなります。
スタイルシートやJavascriptの圧縮はGoogleも推奨していますが、編集の手間からHTMLを圧縮するメリットは小さいように感じます。
Javascriptは外部ファイル化し、gzip圧縮を利用することをGoogleは推奨しています。
gzip圧縮すると、圧縮されたファイルを転送し、ダウンロードしてから解凍して表示するので、表示速度の向上と転送量の削減が期待できます。
②最適化する
スタイルシートの記述を最適化することで、ページの読み込み速度が向上します。
（たとえばid属性の使用を控えてclass属性を使うようにするなど）
記述ルールについては、続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスが参考になります。
画像の最適化や減色処理を施すことで、画像のファイルサイズが驚くほど小さくなります。
Yahoo!ニュースも8bit-PNGを採用することで高速化を実現しているようです。
画像の最適化はサイト運営者にとって手軽に実行できて、効果の高い手法です。
サイトの素材に使う画像はCSS Spriteという手法で1つの画像にまとめることで、HTTPリクエスト回数を減らすことができ、高速化につながります。
③キャッシュを利用する
スタイルシートやJavascriptは外部ファイルに記述することで、ブラウザにキャッシュさせることができ、転送量の削減につながります。
サイトに使用する画像をキャッシュさせることで、2回目以降にアクセスした際に画像をダウンロードする必要がなくなるので、サイトの高速化にもなりますし、転送量の大幅削減が期待できます。
④その他
その他、バックエンド処理といって、サーバー側でキャッシュをコントロールしたり、サーバーの高速化を行うことで、さらにサイトへのアクセスが快適になります。
まとめ
サイトの高速化は突き詰めればキリがないですが、もっとも手軽で効果が高いのが、画像の最適化と減色処理です。
このページが『高速化』についてわかりやすく解説しています。
30分でできる！Webサイトを高速化する6大原則
また、高速化を支援する代表的なツールとしてYahoo!のYslowや、GoogleのPage Speedがあります。
高速化の処理は、正直言ってめんどくさいですし、サイトのメンテナンスもやりにくくなります。
私自身もアクセスの多いサイトに気が向いたらやる程度で、普段はほとんど意識していません。
しかし、ある程度サイトの規模が大きくなり、アクセス数が増えてきたと感じた場合は、サイトの高速化をすることで売上アップやユーザビリティの向上にも繋がりますし、ページを1バイト軽くするだけでも転送量に違いが見られるはずです。
これからも、ウェブサイトやアプリケーションはどんどん増え続けると思います。
気が向いた時だけで構わないので、「塵も積もれば山となる」の発想で、運営サイトを1バイト削減する努力をしてみてはいかがでしょうか？
何事においても「消費する社会」から「節約する社会」をめざし、省エネルギーで済むエコな世の中になるといいですね。
| 続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス | |
 |
Steve Souders 武舎 広幸
オライリージャパン 2010-04-10 |
この記事へのコメント
この記事では、以下のコメントをいただきました。
（現在はコメント欄は閉鎖しています。）
コメント件数 [2件]
素晴らしい。
HP Pavilion DV7ラップトップ 充電池 | 2012年2月 3日 10:46
ありがとうございます。
管理人 | 2012年2月 3日 13:05
最後まで読んでいただきありがとうございました
この記事は役に立ちましたか？ もしよろしければこの情報を友だちにも教えてあげてください。
Lifeclipを購読
Lifeclipは、FacebookやRSSリーダーで購読できます。
管理人のTwitterでも、ブログの更新情報や気になった情報を配信しています。
