30分でできる!Webサイトを高速化する6大原則

文●Web Directions East

2009年09月09日 07時00分


 Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか? もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。

 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。

出典:The cost of poor website performance


 縦軸がフラストレーション(10段階)、横軸が表示までの時間を表している。1~5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまうだろう。ECサイトなら購入手続きの途中で止めてしまうかもしれない。そこで、Webサイトの表示を高速化する6つの具体的な方法を紹介しよう。

【Webサイトを高速化する6大原則】

  1. 画像は最適化してから使え!
  2. 画像はサイズを指定せよ!
  3. HTTPリクエストは最小にせよ!
  4. CSSセレクターは短く最適化せよ!
  5. CSSは上に、JavaScriptは下に『まとめて』記述せよ!
  6. プロファイリングツールを使いこなせ!


1.画像は最適化してから使え!

 画像の品質を損なわずにファイルサイズを圧縮することは、Webサイトを軽くするもっとも手軽な方法の1つ。画像圧縮にぜひ利用したいのが『punyupng』というツールだ。名前はpunypngだが、PNGのみならず、JPEG、GIF形式の画像ファイルを最適化してくれるスグレモノだ。

●punyuping
 http://www.gracepointafterfive.com/punypng/


 使い方は極めて簡単。最適化したい画像を 「upload」ボタンから選択すれば自動的に画像が最適化される。

 実際に、punypngを使ってPNG形式の画像を最適化してみた。結果は以下の通り。

圧縮前 サイズ:18.4KB
圧縮後 サイズ:14.9KB
punypngによる圧縮結果

 見た目はまったく違いが分からないが、ファイルサイズは18.4KBから14.9KBと、19%も小さくなっている。


米ヤフーのパフォーマンスエンジニアが来日!
Webサイトのパフォーマンス向上を直接学ぶチャンス

 11月11日~13日に東京都内で開催されるWeb制作者向けカンファレンス&ワークショップイベント「Web Directions East 2009」では、米ヤフーのパフォーマンスエンジニアであるニコール・サリバン氏が来日。13日のカンファレンスでは「高速ウェブアプリのためのCSSパフォーマンス」と題して、CSSの最適化について解説します。また、12日には少人数制のワークショップ「ウェブサイトパフォーマンス入門」で、より具体的なパフォーマンス向上のテクニックを紹介します。

 ASCII.jpではカンファレンスの参加費が割引になる読者優待を用意しています。詳細はこちらをご確認のうえ、お申込みください。


2.画像はサイズを指定せよ!

 画像サイズは必ずHTMLのwidth属性とheight属性、もしくはCSSのプロパティで指定する。サイズを指定することによって、ブラウザーは画像ファイルのダウンロードが完了する前にレイアウトを計算できる。結果、ページの表示にかかる時間は短縮される。


●記述例:HTMLのwidth属性、height属性を利用した場合


<img src="web+directions+east.png" alt="画像 Web Directions East ロゴ" width="100" height="100" />


●記述例:CSSのwidthプロパティとheightプロパティ利用した場合


img{
      width: 100px;
      height: 100px;
}


 このとき、画像自体のサイズとHTMLで指定するサイズを一致させることが大切だ。たとえば、200×200ピクセルの画像を100×100ピクセルで 表示したい場合は、画像自体を必ず100×100ピクセルにリサイズしておく。画像の表示サイズを小さくする目的でwidth属性やheight属性を指定すると、ブラウザーに余計な処理が発生し、表示スピードが低下する。


3.HTTPリクエストは最小にせよ!

 HTTPリクエストを少なくすれば、Webページの表示スピードは改善できる。ではどうすればいいのだろうか? 代表的なのが「CSS Sprite」と呼ばれるテクニックだ。CSS Spriteとは、ページ内で使う背景画像を1枚の大きな画像ファイルにまとめ、CSSのbackground-positionで表示位置をコントロールするテクニック。Yahoo!やYouTubeなど、大規模サイトでは当たり前のように使われている。以下は、YouTubeでのCSS Spriteの利用例だ。


 CSS Spriteを使うと、Webサイトのパフォーマンスを飛躍的に改善できる。このCSS Spriteを簡単に作成できるツールが「CSS Sprite Generator」だ。

●CSS Sprite Generator
 http://spritegen.website-performance.org/


 まず、まとめたい画像ファイルをzipファイルにしてアップロードする。

 次に、同じ画像が含まれていた場合(重複していた場合)の処理方法を選択する。「Ignore duplicate images」は、同じ画像があっても無視して別のCSS(background-position)を出力する。「Remove duplicate images but merge CSS rules」は同じ画像があった場合、片方の画像を取り除く。

 続いて、画像の拡大/縮小サイズを選択する。「Build Directions」は画像を並べる方向で、「vertical」なら縦、「horizontal」なら横に配置する。「Offset」はそれぞれの画像同士の間隔だ。「Opera bug」はOperaで発生するバグを回避するためのオプションだが、Opera10以降では特に気にしなくていいだろう。「background color」は背景色、「Output format」は画像の出力形式を指定する。

 うれしいことに、画像を最適化してくれる「Optipng」というチェックボックスもついている。Optipngにチェックを入れれば、同時に画像を最適化できる。

 あとは、「Create Sprite Images & CSS」ボタンを押せば完成だ。CSSと画像ファイルが出力される。



4.CSS セレクターは短く最適化せよ!

 CSSはシンプルに、短く書くことがもっとも大切だ。いくつかのポイントがあるのでぜひとも押えて欲しい。基本は、「ブラウザーはCSSを適用するときマッチング作業をしている」「マッチングの母体が大きくなればなるほど、効率は悪くなる」ということだ。

■ユニバーサルセレクター『*』は避ける

 ユニバーサルセレクター(全称セレクター)はその名のとおり“ユニバーサル”(すべて)であり、マッチングに相当の時間がかかる。つまり、


*{
    margin: 0;
    padding: 0;
}

というCSSリセットはレンダリングを遅くしてしまうため、なるべく使うべきではない。


■id名にタグやclassを付け加えるな

 idはもともとユニークなもの。タグやclassを付け加える必要はない。余計なものを付ければレンダリングは遅くなる。

●悪い例:


ul#global-nav

●良い例:


#global nav



■子孫セレクターは避けろ

 子孫セレクターもマッチングに時間がかかる。なるべくなら利用は避けたい。

●悪い例:


html body #global-navigation ul li a{
    color: red
}

●良い例:


.global-nav-link{
    color: red;
}



■子セレクターも避けろ

 子セレクターもブラウザーに大きな負担をかける。

●悪い例:


html>body>ul>li>a{
    color: red;
}

●良い例:


a{
    color: red;
}


■継承を利用せよ

 ベストな方法は、継承をうまく利用して、なるべく余計な指定をしないことだ。

●悪い例:


#bookmarkMenuItem > .menu-left { list-style-image: url(oxox); }

●良い例:


#bookmarkMenuItem { list-style-image: url(oxox); }


■IE7とIE8では、:hoverに注意

 a要素以外の要素に:hoverを利用すると、Internet Explorer (IE)7とIE8ではレンダリング速度が落ちてしまう。この症状は、DOCTYPEにstrictを指定した場合に特に発生する。

出典:http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=391387


5.CSSは上に、JavaScriptは下に『まとめて』記述せよ

 CSSとJavaScrptの記述場所にも、高速化のためのルールがある。CSSは必ずhead要素の中の上部に、JavaScriptは下部にまとめて記述すること。下のグラフのとおり、まとめて書けば読み込みが速くなる。

●悪い例:CSSの間にJavaScriptを挟んでいる


<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>


●良い例:CSS、JavaScriptの順で並んでいる


<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
</head>


出典:Optimize the order of styles and scripts


6.プロファイリングツールを使いこなせ!

 Webサイトのパフォーマンスを改善するときに欠かせないのが、プロファイリングツールだ。中でも、米ヤフーが提供するFirefoxアドオン「YSlow」は、簡単で使いやすいのでおすすめだ。

●YSlow
 https://addons.mozilla.org/ja/firefox/addon/5369


 Firebugを立ち上げてYSlow のタブを選び、左下のオレンジの「Run Test」をクリックすると、Webサイトのパフォーマンスをチェックしてくれる。

 このとき、「Rulesets」の「Small Site or Blog」(小規模サイトかブログ用)を選択すると、チェック項目からCDN(コンテンツデリバリーネットワーク)の利用とExpireヘッダーの項目が除外される。10ページ程度の簡素なWebサイトなら「Small Site or Blog」で十分だろう。

 チェックが終わると、パフォーマンスを落としている原因には赤で「F」と表示されるので、その原因を改善すればいい。

 「Componets」のタブを選ぶと、Webページに読み込まれたファイルの詳細が一覧表で閲覧できる。画像の場合は一番右の「ACTION」から、米ヤフー製の画像最適化ツール「smush.it」ですぐに最適化もできる。


 本稿では、バックエンドではなくフロントエンドの改善に絞って、Webサイトを高速化する6つの具体的な方法を解説した。米ヤフーの元CPY(Chief Performance Yahoo!) のスティーブ・サウダーズ氏は、Webページの表示が完了するまでにかかる時間を1秒とすると、そのうちの80%、つまり0.8秒はフロントエンドの処理によるものだと述べている。せっかくWebサイトを訪れたユーザーに不満を与えないために、本稿で紹介した改善策が役立てば幸いだ。

参考リンク

punyuping
http://www.gracepointafterfive.com/punypng/
Writing Efficient CSS for use in the Mozilla UI-
https://developer.mozilla.org/en/Writing_Efficient_CSS
-moz-image-region
https://developer.mozilla.org/en/CSS/-moz-image-region
Optimize browser rendering
http://code.google.com/intl/ja/speed/page-speed/docs/rendering.html
JSMin
http://www.crockford.com/javascript/jsmin.html
Javascript Optimizer
http://sourceforge.jp/projects/sfnet_js-optimizer/
high-Peformance website
http://stevesouders.com/hpws/rules.php
Websiteoptimization.com
http://www.websiteoptimization.com/

■関連記事