Firebugでラクラク診断～Yahoo!が明かすページ表示の高速化13のルール│株式会社イー・エージェンシー

2007年08月02日

Firebugでラクラク診断～Yahoo!が明かすページ表示の高速化13のルール

宮永邦彦
アイデアマンズ株式会社

　2007年7月27日、米Yahoo!がこれまで培ったページ表示の高速化ノウハウを13のルールにまとめて公開しました。クラスタリングなど、高度なネットワーク技術を必要とする手法ではなく、主にHTMLや、Apacheの設定ファイル（.htaccessやhttpd.conf）の記述だけで効果が得られるTipsとなっています。

・Thirteen Simple Rules for Speeding Up Your Web Site　http://developer.yahoo.com/performance/rules.html

　この13のルールのすごいところは、「Firefoxの拡張機能による自動診断ツール」が用意されていることです。Firefoxにその拡張機能をインストールすれば、任意のサイトがこの13のルールにどれくらい適合しているか、一目で診断できるようになります。

■自動診断ツールYSlowのインストール

　この自動診断ツールの名前は「YSlow」と言います。

　YSlowを使うにはまず、Firebugという拡張機能をインストールします。Firebugは今やWebエンジニアに必須と言われているサイトの解析・デバッグツールで、ご存じの方も多いことでしょう。YSlowはFirebug上で動作する拡張機能なので、最初にFirebugが必要になります。

　Firebugはこちらのサイトから「インストール」をクリックするだけで、簡単にインストールすることができます。

・Firebug :: Firefox Add-ons
　https://addons.mozilla.org/ja/firefox/addon/1843
　（※Firefoxで開いてください）

　次にこちらのサイトから「Download Now」をクリックし、YSlowをインストールします。

・YSlow for Firebug
　http://developer.yahoo.com/yslow/　（※Firefoxで開いてください）

　Firefoxを再起動して、ステータスバーにスピードメーターのアイコンとYSlowという文字が表示されたらインストール完了です。

■サイトを診断してみよう

　それでは早速、サイトの診断を行ってみましょう。Firefoxで診断したいサイトを開いてみてください。

　通常、FirebugとYSlowは無効な状態になっています。ステータスバーのYSlowをクリックします。ウィンドウの下部にFirebugペインが表示されたかと思います。

　次に、Firebugペイン左上の虫のアイコンをクリックし、ポップアップメニューから「Firebugを無効」という項目を選択します。すると「Firebugを無効」のチェックが外れ、Firebugが有効になります（少し分かりにくいですが・・）。

　同時に、「調査」「Performance」「Stats」・・・というメニューが表示されました。この「Performance」を選択肢、サブメニューから「YSlow」を選択します。そして、F5キーなどでページを更新してみてください。

　しばらく待つと、「Performance Grade: A（～F）」という表示が現れるはずです。
これでサイトの診断が完了です。簡単ですね。

■診断項目の見方

　そして1～13まで、ページ表示高速化13のルールに照らし合わせた評価結果が表示されます。それぞれの概要をここで説明します。

・ルール1: 「HTTPリクエストの数を減らせ」～Make fewer HTTP requests

　Webページを表示するプロセスでは、最初のHTTPリクエストでHTMLファイルを取得した後、そこで使用されている画像やスタイルシート、JavaScript外部ファイルなどの数だけ、HTTPリクエストが発生します。

　最近のPCは非常に高速になっており、HTMLの解析や表示はほぼ一瞬で行われます。
この13のルールでも、ページ表示にかかる時間の80～90％は通信に要していると述べられています。したがって、単純に外部ファイルを減らしてリクエストの数を少なくすることで、サイトの高速化を図ることができます。

　外部のCSSやJavaScriptファイルをひとつにまとめたり、共通の背景画像は1サイズだけ用意し、スタイルシートで見せ方を調整する、といった方法が考えられます。

・ルール2: 「CDNを使え」～Use a CDN

　CDNとはContents Delivery Networkのことで、簡単に言えば画像などのデータを複数のサーバに分散させ、1台のサーバとの通信に負荷が集中しないようにしましょう、という対策です。この項目は比較的大がかりになるので、解説を省略します。

・ルール3: 「Expiresヘッダを付けろ」～Add an Expires header

　ページの表示に先立って、HTTP通信で構成ファイルがダウンロードされるとき、バックグランドではさまざまな情報が付け加えられています。HTTPレスポンスヘッダと呼ばれるそれらの情報の中に、キャッシュの有効期限を示す「Expires」という項目があります。

　Expiresヘッダを明示することで、キャッシュを意図的に使うことができます。特に静的ファイルの通信にかかるコストを、大幅に削減できる可能性があります。念のため、Cache-Controlヘッダも設定しましょう。

　たとえば次のように.htaccessファイルに記述すると、画像ファイルのキャッシュ有効期限を1時間に明示できます。なお、 ExpiresActiveやExpiresByTypeディレクティブを使うには、Apacheにmod_expiresがインストールされている必要があります。

・.haccessの内容

ExpiresActive On
ExpiresByType image/jpeg M3600
ExpiresByType image/gif M3600
ExpiresByType image/png M3600

Header set Cache-Control max-age=3600

・ルール4: 「通信は圧縮せよ」Gzip Components

　世の中のWebサーバの多くは、バックグラウンドで通信内容をGzipにより圧縮しています。わざわざ圧縮と展開の処理を行うのは、サーバに余計な付加をかけるような感じもしますが、通信自体が実は意外と付加の高い処理なので、事前にサイズを縮小させることでトータルのパフォーマンスは向上すると言われています。

　ただし、画像やPDFといったファイルに関しては、既に圧縮されているので圧縮効率が低く、逆効果になりがちです。Apache 1.3x系ではmod_gzip、Apache 2.x系ではmod_deflateがこの処理を受け持つモジュールです。この辺りの設定をサーバ管理者に確かめることで、サイトの高速化を図れることがあります。

・ルール5: 「CSSは最初に書け」～Put CSS at the Top

　CSSの記述や呼び出しはHTMLの上部（タグ）に集中させます。後ろの方に書いてしまうと、それまでに一度表示された要素のスタイルが変更されたことになり、余計な再描画が発生してしまいます。

・ルール6: 「JavaScriptは最後に書け」～Move Scripts to the Bottom

　逆にJavaScriptは、できるだけHTMLの下部に集中させます。JavaScriptが読み込まれると、解析や実行のときに、他の構成ファイルのダウンロードや描画にブロックがかかる作用があり、ページ描画を遅くします。そしてできるかぎり、JavaScriptはタグのonloadイベントで起動する形をとるのがよいでしょう。

・ルール7: 「CSS内でスクリプトは使うな」～Avoid CSS Expressions

　あまり一般的ではありませんが、CSS内でexpression()という記述を使うことにより、簡単なスクリプトを記述することができます。場合によっては便利な機能ですが、表示スピードを低下させるので、利用は避けた方が賢明です。

・ルール8: 「JavaScriptとCSSは外部化しろ」～Make JavaScript and CSS External

　ルール1と矛盾するように聞こえますが、同じ機能を持ったJavaScriptやCSSを内部化して何度もダウンロードさせるより、外部ファイルとしてキャッシュを働かせた方がトータルのパフォーマンスを向上させます。繰り返し読み込まれるJavaScriptやCSSは外部化し、さらに可能なかぎりひとつのファイルにまとめるというのが理想です。

・ルール9: 「DNS参照を減らせ」～Reduce DNS Lookups

　HTML内で使う画像やCSS、JavaScriptなどが、さまざまなドメインのURLに渡っていると、その都度、ドメイン名をIPアドレスに変換するDNS参照が発生します。DNS参照もネットワーク通信が発生する処理なので、見えないところでページの表示を遅くする要因になります。

・ルール10: 「JavaScriptは小さくしろ」～Minify JavaScript

　JavaScriptのプログラムには、人が読みやすいようにスペースやコメントが多用されていますが、コンピュータにとっては関係ありません。例えばこういったソフトウェアを使うことで、JavaScriptのファイルサイズを縮小することができます。非常に大きなJavaScriptファイルを使っている場合は有効と言えそうです。

・ShrinkSafe
　http://dojotoolkit.org/docs/shrinksafe

・ルール11: 「リダイレクトはほどほどに」～Avoid Redirects

　リダイレクトを多用することもフロントエンドのパフォーマンスに影響します。
タグやJavaScriptを使ったリダイレクトはもちろんのこと、体感的には一瞬でリダイレクトされるLocationヘッダを使う方法や、HTTPステータスコード301、302を使う方法も、バックグラウンドでは通信が発生しています。

・ルール12: 「スクリプトを重複させるな」～Remove Duplicate Scripts

　ページ内で同じスクリプトを何度も読み込むと、パフォーマンスを低下させます。
「そんなの当たり前だ」と頭では分かりながらも、JavaScriptに不慣れなコーダーが書いたHTMLには、実際そういった箇所が散見されます。

・ルール13: 「ETagを制御しろ」～Configure ETags

　Webページを構成するファイルがサーバ側で更新されたか、更新がないのでキャッシュを使うかは、通常、ファイルの更新日時から判断します。しかし、データがCGIやPHPで動的に生成される場合は、単純に更新日時では判断できません。そのような場合に、ETagという拡張情報を使います。

　ところが、静的なファイルでもこのETagが自動で付けられる設定になっているサーバも多く、余計な負荷が発生させています。たとえば次のように.htaccessを記述することで、静的な画像ファイルについてはETagを付加させない設定にすることができます。

・.haccessの内容

FileETag None

■ページ表示の高速化を図る意味

　サイトの負荷軽減と高速化は、ユーザーにストレスを与えず、継続して利用してもらうための重要なテーマです。

　ところが同時に、非常に難易度の高い問題でもあります。ハードウェアやインフラが大きく進歩しても、それに合わせてサービスも高度で複雑になり、今なおエンジニアを悩ませ続けています。

　サイトの高速化において影響が大きく注目されるのは、やはりバックエンド（データベースやWebサーバ側）です。しかしバックエンドをいくら改善しても、最後にユーザーに触れるフロントエンドの動作が遅く、ストレスを与えるものだと、改善した意味がなくなってしまいます。

　今回紹介したYahoo!秘伝（?）の13のルールは、豊富な経験に基づいた多角的な理論です。また、YSlowで一瞬で結果がわかるのも、使ってみるとその素晴らしさがわかります。生半可な独自の理論にこだわるよりも、安定した成果が得られるでしょう。ユーザーが実際にその手を触れるフロントエンドにも気を配ることで、あなたのサイトはもっとよいものになるはずです。