どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」

いまリニューアル中のwebサイトがあります。リニューアルポイントは改善点の大きなポイントは負荷対策。つまりブラウザへの表示速度の改善です。
よい機会なので、webページの高速化について調べてみました。

目次

• 高速化の重要度
• Webサイトの待ち時間の80％はフロントエンドの処理によるもの
• 【デザイナーにできること1】「CSS Sprite」で画像の表示速度を高速化する
• 【デザイナーにできること2】外部CSS・JavaScriptの読み込み方で表示速度を改善
• まとめ

高速化の重要度

まず、高速化することがどれくらい重要なのか調べました。
一番気になったのが「0.5秒の遅延でユーザー離れ」という言葉。
ブラウザの表示スピードが収益に関係しているという経験談もあるそうです。

　1つは検索サービスに関するユーザーテストの結果だ。通常、検索結果には1ページ当たり10のリンクが含まれるが、ユーザーにどのぐらい検索結果数がほしいかと尋ねると、ほとんどの人がより多くと答えたという。ところが、実際に結果数を30に増やして実験したところ、トラフィックも収益も20％も落ちてしまったという。理由は、10の結果を返すのに0.4秒だったものが、30の結果を返すのに0.9秒と0.5秒余計にかかっているから、だったという。

　この話に関して元Amazon.comの開発者のグレッグ・リンデン氏は、ブログでこう述べている。「この結論に驚くかもしれない――、ユーザーが0.5秒の遅れに気付くかって？ しかし、Amazon.comでもわれわれは同様の経験をしている。100ミリ秒単位でページ表示を遅らせるA/Bテスト（条件を変えて2つのサービスを同時に公開するテスト）で、非常に小さな遅延ですら、収入に大きく響いてくるということを発見した。速いというのは本当に大切なことだ。マリッサが言うように“ユーザーはスピードに敏感に反応する”のだ」（リンデン氏）

　メイヤー氏は、Googleマップでは、Webページを100KBから70～80KBに減らしたことで翌週にトラフィックが10％、その後3週間で25％伸びたことがあるとも指摘する。

Chromeはなぜ速いのかより抜粋

ようは、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」そうです。

また、最近 通信速度・PCスペックの向上やブラウザの高速化により、Webサイトは「クリックしたらすぐに表示されるもの」という考えが無意識に働いています。
無意識なのです。
ページを更新するたびに表示に時間がかかると見ている方は相当なストレスがかかりますよね。
そして見てもらうことすらできなくなります。

そうなりたくない･･･と思ったら、すぐに表示速度を改善したいものですね。
前振りが長くなりましたがwebデザイナーにもできる高速化を紹介します。

Webサイトの待ち時間の80％はフロントエンドの処理によるもの

Webサイトを高速化する手段として、Webサーバの性能やキャッシュといったことが挙げられがちですが、デザイナーからすると何のことやら･･･。と思うはず！

デザイナーは何もしなくて良いんですかね？いやそんなことはありません。
実はWebページを構成するHTMLやCSSやJavaScript、そして画像やテキストをどう組み上げていくか、ということがなにより大事なんです。

【デザイナーにできること1】
「CSS Sprite」で画像の表示速度を高速化する

ウェブサイトの表示が遅くなる要因の1つとして、「読み込む画像ファイルがたくさんある」という理由が挙げられます。画像1つ1つのサイズは小さくても、数がたくさんあれば読込完了までにかかる時間は長くなってしまうからです。
そこで考え出されたテクニックが、複数の画像を「1枚の大きな画像」に結合して、CSSを使って表示内容を選択する「CSS Sprite」です。複数の画像を1枚に結合すると、全体のファイルサイズが減る上に、サーバへリクエストを送る回数が1回で済むため、読込完了までにかかる時間は短くなります。

例えば…、GoogleやYahooなんかを見てみましょう。

Google

テキストベースのGoogle検索結果画面です。

実は、「CSS Sprite」を使っているんです。

テキストベースで非常に早い印象をうけるGoogleですが、フロントエンドの処理もこだわりを感じます。

Yahoo! JAPAN

色々画像が使われているYahooのトップページ。

Yahooもアイコンなどを1枚の画像に結合していますが、「アイコン用」「背景画像用」「検索結果用」といくつかファイルを分けていました。

アイコン用を見る　背景画像用を見る　検索結果用を見る

このように、画像を結合したほうがファイルサイズも減り、通信回数も減らせるといった感じで一石二鳥なんですね。
今はYahooやGoogleで比較的画像の少ないサイトでしたが、もっと画像を使っているサイトはいくつもあります。
そんなサイトで「CSS Sprites」を実現すれば結構高速化できるのではないでしょうか。

「CSS Sprite」のやり方

まずは画像を結合します。すでにサイトを持っている方は、1つ1つの画像を結合するのは大変ですよね。
こちらのサービスが便利です。

CSS Sprite Generator

ファイル拡張子も違う複数の画像を「zip」に圧縮して、アップロードすることで1枚の画像に結合してくれます。
さらに、CSSも吐き出してくれるので効率的に作業を進めることができます。
「デザインどや！？」で試してみましょう。

①画像を圧縮

まずは画像をZip形式に圧縮します。

②スプライト画像を作成

CSS Sprite Generatorにアクセスして、①で用意したZip画像を選択します。
色々設定がありますが、何も設定しなくても「スプライト画像とCSSを作成」ボタンをクリックすれば画像はできます。
CSSのクラス名まで指定したい方は設定してください。

③画像とCSSの確認

【結合された画像】
圧縮した画像が縦にずらっと並んでいます。

【吐き出されたCSSがこちら】
上記画像に合わせた形でCSSが吐き出されました。

#container li {
   background: url(csg-4df95ad4baa49.png) no-repeat top left;
}

.sprite-btn_facebook{ background-position: 0 0; width: 26px; height: 26px; }
.sprite-btn_hatebu{ background-position: 0 -76px; width: 26px; height: 26px; }
.sprite-btn_rss{ background-position: 0 -152px; width: 26px; height: 26px; }
.sprite-btn_rss_s{ background-position: 0 -228px; width: 16px; height: 15px; }
.sprite-btn_twitter{ background-position: 0 -293px; width: 32px; height: 26px; }
.sprite-btn_youtube{ background-position: 0 -369px; width: 28px; height: 26px; }
.sprite-date{ background-position: 0 -445px; width: 70px; height: 70px; }
.sprite-foot-logo{ background-position: 0 -565px; width: 182px; height: 364px; }
.sprite-icon_twitter{ background-position: 0 -979px; width: 18px; height: 12px; }
.sprite-logo{ background-position: 0 -1041px; width: 183px; height: 48px; }
.sprite-loupe{ background-position: 0 -1139px; width: 16px; height: 16px; }
.sprite-p_kkato{ background-position: 0 -1205px; width: 90px; height: 90px; }
.sprite-p_nobuya{ background-position: 0 -1345px; width: 90px; height: 90px; }
.sprite-p_ykosugi{ background-position: 0 -1485px; width: 90px; height: 90px; }
.sprite-quote{ background-position: 0 -1625px; width: 19px; height: 14px; }
.sprite-riband{ background-position: 0 -1689px; width: 570px; height: 35px; }

画像のファイル名がクラス名にあてられているようです。
「background-position」や「width」まで出してくれているので組み込みがめっちゃ簡単ですね。
これを自分のwebサイトの該当する箇所に組み込んでください。
簡単にできてしまいますね！！

【デザイナーにできること2】
外部CSSと外部JavaScriptの読み込み方で表示速度を改善

WebサイトでCSSやJavaScriptを使う際、独立したファイルで保存して、HTMLから呼び出す方法がよく使われます。
メンテナンスがしやすい面と、一度読み込まれたファイルはキャッシュされるため読込速度も短くなるからですね。
しかし、記述方法や読み込むソースの位置が表示速度に影響してきます。
　

外部CSSを読み込む方法として、
1つが「@import」を使う方法

@import url(style.css);

もう1つがlink要素でHTMLから直接読み出す方法

<link rel="stylesheet" type="text/css" media="all" href="http://www.doya-doya.com/wp-content/themes/doya_2011/style.css" />

があります。

外部CSSファイルの読み込みでは、「@import を使わないようにする」ことが読込速度の低下を防ぐ1つの方法です。
もし、@importを使っているなら、

• link要素でHTMLから直接読み出す方法に変える
• 呼び出し元のCSSファイルと結合する

と変更した方が良いでしょう。

また、こんなことにも注意すると良いそうです。

• 表示を優先させるため、スタイルシートは必ずhead要素に入れる
• ブラウザはスタイルシートがないとレンダリングしない
• スタイルシートを下におくとこのレンダリングができなくなる
• @importを書くとスタイルシート下に置くのと同じ現象になるので避ける

　

JavaScriptの場合ですが、

• JavaScriptは外部ファイル化する
• できるだけ（外部JavaScriptファイルを読み込むための）script要素は、HTMLの最後に記述する
• JavaScriptを縮小する

方が良いそうです。
レンダリングに関係ない「アクセス解析のスクリプト」などは最後に記述しましょう。

まとめ

デザイナーでも実践できる項目をあげてみました。
デザインとコーディング以外は自分のエリアではないので、開発担当者やサーバ担当者にお任せって状況にならないように意識しましょう。

冒頭でAmazonやGoogleの例をあげましたが、意外にも表示速度が収益にかかわってきます。
この記事を読んで、「あのサイトで対策ができていない」という方、簡単にできる対策なので試してみてください。
自分に今できる最善の対策をしましょう！
　

書き忘れましたが、こちらの記事のGoogleChrome拡張機能がかなり使えます。
ついに出た！Chrome版「Page Speed」の使い方
この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。
Googleの「Page Speed」は、「自分のサイトは何がネックになって表示速度が遅くなっているのか」をチェックし、改善策を提案してくれるツールです。
こういうツールも上手に使っていきましょうね。