Lifeclip

川原裕也(@yuya_q)のブログ

2012年02月02日

すべてのウェブマスターに伝えたい『サイトを高速化して世界をよくしよう!』

スマートフォンの普及によってネットワークの回線が逼迫し、障害が発生するというニュースが増えました。
特に携帯電話各社はそれに対応するために、回線の強化を急いでいます。

先日、ソフトバンクの孫社長もTwitterでこうつぶやいていました。

1%のユーザーが全体のネットワークの3割のトラフィックを占拠。通信網が逼迫し、残り99%のユーザーが迷惑している。【日経BP】皆でインフラを支えよう、 http://t.co/psiYHluH
Jan 31 via TwitRocker 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サイト ―ウェブ高速化のベストプラクティス
続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス Steve Souders 武舎 広幸

オライリージャパン 2010-04-10
売り上げランキング : 119411

Amazonで詳しく見る by G-Tools

この記事へのコメント

この記事では、以下のコメントをいただきました。
(現在はコメント欄は閉鎖しています。)

コメント件数 [2件]

素晴らしい。

HP Pavilion DV7ラップトップ 充電池 | 2012年2月 3日 10:46

ありがとうございます。

管理人 | 2012年2月 3日 13:05

→ビジネスの相談 お気軽にどうぞ

最後まで読んでいただきありがとうございました

Lifeclipを購読

Lifeclipは、FacebookやRSSリーダーで購読できます。
管理人のTwitterやGoogle+でも、ブログの更新情報や気になった情報を配信しています。

follow us in feedly

タグ: / カテゴリ:IT

関連記事をもっと読む