[Web] Google Page Speedでサイトを高速化(2)

前回のブラウザキャッシュの最適化に引き続き、今回はをやってみましょう。

最近立ち上げたサイトはこの辺の対応もしっかりしているのですが、ちょっと昔に作った管理サイトを見てみると、上位に要対応とされたのが実はこの2つ。

CSSやJsなど、ページがリッチになっていくにつれて取り込む外部ファイルも増えていきます。これらを小さくまとめて転送量を減らす工夫をすることは、ちょうどバイキングで何度も取りに行くよりも、一度に山盛りに盛ってきた方が効率が良いようなものです。
（そもそも、量を減らすことも考えなければいけませんが）

外部JavaScriptの結合 – Combine external JavaScript

開発をやる人ならわかると思いますが、Javascriptを記述する場合も、きちんとモジュール化すればファイルは多くなってしまうものです。例えばjQueryでサイトを作る場合、coreに加えてuiやpluginsを組み合わせていけば、すぐに10くらいのjsファイルを使うことになってしまいます。
開発効率やメンテナンス性を考えれば間違いなくそうすべきなのですが、実際にページをブラウザで表示する段になると、細かいダウンロードが大量に発生することになってしまいます。

ここで、Google Page Speedではいます。

これは13個の異なった.jsファイルを使ったページをFirefox 3.0系のブラウザで取り込んだ様子を、FirebugのNetパネルで観察したものです。
各ファイルの総量は729KB。それらが全てロードされるのに要した時間は、4.46秒となっています。Javascriptだけで約5秒かかるページを、我慢強く見てくれるユーザは多くは無いでしょう。
見て分かるように、ブラウザは複数のファイルをひとつひとつ順に、シーケンシャルにロードしています。これは、Firefox3.0がJsのパラレルダウンロードをサポートしていないためです。ひとつのファイルを読み込み、パースし、次のファイルを読むということを、13回繰り返しているのです。
最新のブラウザでは、これらを並列に行うことができるものも出てきています。UA Profilerの「|| Scripts」の列に「yes」とあるものがパラレルダウンロード対応のブラウザですが、まだまだ数が少ないことがわかると思います。

Googleの実験では次に、先ほどの13ファイルを2つのファイルに結合してリロードしています。

結合というのは、つまり単純に並べただけです。特別な圧縮処理などは行われておらず、ファイルの総量は729KBで変わっていませんが、所要時間は1.87秒に激減しています。
これは、各ファイルをロードする際にはリクエスト/レスポンスヘッダが転送されている分が無くなっているために実際には転送量が減っているためでもありますし、パケットやレンダリングエンジンの効率など要因は様々ですが、端的に「何度も取りに行くよりも、一度にたくさん持ってきた方が早い」と思っておけば良いでしょう。

但し、全てを単純にひとつにまとめれば良いというわけにもいかない、幾つかの要因があります。

1. defer loading
   そのJsファイルの実行がページの見栄えに影響を与えない場合、defer属性をつけておけば、ブラウザはスクリプトのパースを後回しにしてHTMLをレンダリングします。これはユーザの体感速度を大きく向上させます。
   複数のJsファイルを、deferで呼べるものとそうでないものに分けられるならば、それぞれのグループでまとめるべきです。
2. プラグインのバージョン
   あるプラグインやモジュールに異なったバージョンが存在し、ページによって使い分けたいような場合は、そのファイルを別にしておきたいでしょう。
3. 結合できない種類のファイル
   例えば効果測定用や広告表示用のスクリプトなど、このようにコントロールできないファイルもあると思います。

これらのことを鑑み、Googleでは出来れば2つ、多くて3つのファイルにまとめることを推奨しています。

まとめとして、JavaScript結合のちょっとしたルールを次のように定めるよう推奨されています。

• JavaScriptは2つのファイルに分ける。1つはページのレンダリング開始前にロードされていることが必要な、最低限のスクリプトをまとめたもの。もうひとつは、ページのロードが終わってから取り込まれれば良いファイル群。
• head要素内に書かれるスクリプトファイルは可能な限り少なく、小さなサイズにする。
• 滅多に使われないファイルはそのまま持ち、リクエストがあった場合のみ取り込む。
• キャッシュされたくない種類の小さなスクリプト（効果測定や広告など）は、外部ファイルではなくHTML内に直接記述することを検討する。

最後に、スクリプトと他の外部ファイルがロードされる順番にも注意を払わなければなりません。
これについては、別途説明します。

外部CSSの結合 – Combine external CSS

外部CSSに関しても、前項のJs同様にひとまとめにすることでRTT(Round Trip Time)を軽減できます。

概要はJsとほぼ同じなので省きますが、UA Profilerを見ればわかるように、CSSの方がJsに比べてパラレルダウンロードに対応されています。
そのため比較的まとめ効果は出にくい面もありますが、逆にそれを活かすために注意すべき点もあります。
最も重要な点は、@importを使わないこと。これについては、Google Page Speed上には詳しい説明が無いので、別途説明しようと思います。
→しました。「CSSで@importを使ってはいけない理由」

Related posts:

1. [Web] Google Page Speedでサイトを高速化
2. [Web] Google Page Speedでサイトを高速化(4)
3. [Web] Google Page Speedでサイトを高速化(3)
4. [Web] Google Page Speedでサイトを高速化(1)