スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋

WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。

JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking JavaScript Downloadsではこのテクニックの適用で2倍以上の高速化が確認されている。ちなみに画像の読み込みが2並列にとどまっているのはHTTP 1.1に準拠した実装になっているIE7/Firefox2における制限だ。この制限はドメインごとに発生するため画像のドメイン名を変更することで回避もできる。なおIE8/Firefox3では6並列まで拡張されている。

DOMを経由してスクリプトをダイナミックに読み込むように記述 - 同ブログより抜粋

スクリプトの読み込みが画像と並列していることがわかる - 同ブログより抜粋

同テクニックはCSSファイルについても適用できる。同じようにDOMを経由して読み込んでやればいい。それほどコードも複雑にならずに効果が期待できる方法だ。

CSSについても同じテクニック並列読み込みを実現できる - 同ブログより抜粋

読み込むべきJavaScriptファイルが複数ある場合は、あらかじめひとつのファイルにしてからミニファイしておく方法が効果的だ。どうしても複数のファイルを読み込まなくてならない場合には、YUI Get utilityを使って読み込むようにすればいい。Non-blocking JavaScript Downloadsではこれ以外のテクニックの説明や、それらテクニックの悪影響などについても説明している。簡単に実施できてそれなりに効果の期待できる方法なのでWebデベロッパは一度目を通しておいた方がいいだろう。

YUI Get utilityを使った複数スクリプトを読み込む場合 - 同ブログより抜粋

ただし、数年後にはこのテクニックはもはや不要のものになっているかもしれない。SafariやIE8ではすでにJavaScriptを並列してロードするように実装が変更されているからだ。Firefox 3はブロックして読み込むが、将来のバージョンでは同様に並列読み込みが可能になるとみられる。しかし、同手法が今後数年間、有益であることは間違いない。