なかなか更新する時間がとれないですが、今回は外部ファイル取り込み時間の圧縮の続きで、パラレルダウンロードに焦点をあてます。
JsやCssなどの外部ファイルは、ブラウザによりますがパラレルに平行してダウンロードすることが可能です。1つより2つ、2つよりも更にことは、トータルのRTT軽減に直接役立ちます。
しかし記述方法によっては、パラレルダウンロードが全く行われなくなってしまうこともあります。
ダウンロードジョブを効果的に並べて、ページの表示速度を向上させる方法を見ていきましょう。
CssやJsの並びを最適化 – Optimize the order of styles and scripts
まず覚えておくべきなのは、「外部Jsファイルを取り込むページでは、そのダウンロードが終わるまで、HTMLのレンダリングやページ内のscriptタグの実行を行わない」ということです。
これはスクリプトが(X)HTMLやスタイルを変更する可能性があるためです。
そしてRTT軽減のために更に重要なことは、「多くのブラウザは、スクリプトのダウンロードが始まると他の外部ファイルのダウンロードを待たせる」点です。
一方、既にダウンロードしているファイルがあれば、ブラウザはそれと平行してスクリプトのダウンロードを開始します。
GoogleはPage Speedのドキュメント中で、これをわかりやすく説明する実験をしています。
まず、次のようなコードでページを表示します。
各ファイル1つずつのダウンロードに要する時間が一律100ミリ秒だとすると、結果は次のようになります。
順に見ると、まずはstylesheet1.cssのダウンロードがはじまります。次にscriptfile1.jsが参照され、平行してダウンロードします。その次はscriptfile2.jsですが、前述のようにスクリプトのダウンロードは他を待たせるため、ここで処理を止めて完了を待ちます。scriptfile1の取得完了後、scriptfile2を取り、同様にそれ以降は待たされることになります。scriptfile2が終わったところで漸く、stylesheet2.cssの取得を開始します。CSSはパラレルダウンロードが可能なため、続くstylesheet3.cssも並行して取得します。
結果として、300msを要して全てのファイルを取得できました。
では次に、同じファイルを順番を整理してダウンロードしてみます。
Cssと最初のJsはパラレルにダウンロードされるので、トータルの所要時間は200msとなります。
このように、何気なく配置しているかもしれないhead要素内のファイルの並び順も、ページの表示速度に大きく影響します。
これはscriptタグ内に書かれるインラインコードでも同様で、例えば次のような記述では、スタイルシートのパラレルダウンロードが分断されてしまいます。
これらを踏まえ、次のような基本ルールでのぞみましょう。
-
外部スクリプトは、外部スタイルシートの後に読み込む
可能な限り、この順番を守るべきです。仮にスクリプトが実行された結果をうけてはじめて結果が変わるようなスタイルの設定をしない限り、このルールを徹底させましょう。 -
インラインスクリプトは、外部ファイルの指定後に記述する
これも可能な限り、このルールで書くべきです。
但し、外部スクリプトがインラインスクリプトの記述いかんで動作を変えるような場合、これが難しいこともあるでしょう。その場合は逆に、インラインスクリプトをスタイルシートも含めた全ての外部ファイル指定の前に持っていくべきです。
但し、ここまで見てきた「スタイルシートはパラレルダウンロード可能」「スクリプトは他のファイルのダウンロードを待たせる」といった動作は、あくまで「現時点での多くのブラウザで」という注釈がつきます。
UA Profilerなどで確認すれば、Chrome2やFF3.1、IE8などの最新ブラウザでは、スクリプトのパラレルダウンロードもサポートしはじめています。
こういったブラウザが主流になってくれば、ここで挙げたセオリーも変わってくるでしょう。
しかしそれまでは、高速なサイトを作るためには、こういったことへも意識を保っておくことが重要です。
Related posts:
- [css] @importを使うべきでない理由
- [Web] Google Page Speedでサイトを高速化
- [Web] Google Page Speedでサイトを高速化(2)
- [Web] Google Page Speedでサイトを高速化(4)
- [Web] Google Page Speedでサイトを高速化(1)
