Robert’s talk

Steve Souders氏は最近獲得したブラウザのパフォーマンス改善に関して注目されるいくつかのテクニックを5回シリーズのブログで公開した。Steve Souders氏はGoogleのエンジニア。Googleに務める以前はYahoo!でYSlowの開発に従事。Webページの高速化に関する開発に携わっており、特にHTMLやHTTP、JavaScript関連の高速化技術に定評がある。

シリーズの1回目であるHigh Performance Web Sites :: 5a Missing schema double downloadでは、IEでCSSファイルが2回ダウンロードされるケースがあることが紹介されている。同内容をRobert Nyman氏もCSS files downloaded twice in Internet Explorer with protocol relative URLs - Robert's talkで取り上げている。Robert Nyman氏のブログでは具体的なコードも追加掲載されていて興味深い。

この問題はCSSの指定にプロトロルレラティブURLを使った場合に発生する。IEはHTTPSのページ内部でHTTPのリソースにアクセスしようとした場合、リソースのダウンロードを中断してユーザにエラーダイアログを表示する。HTTPSとHTTPのコンテンツが混じることを避けるためだ。しかしすべてを書き換えるのは面倒だ。そのため、これを回避するためによく使われるテクニックにプロトロルレラティブURLがある。たとえば次のURLの場合、

http://www.example.com/css/style20100222.css

最初の「http:」を抜いた表記がプロトロルレラティブURLとなる。

//www.example.com/css/style20100222.css

プロトロルレラティブURLの先頭に「http:」がつくか「https:」がつくかは、閲覧しているページのプロトコルに準じるようになる。これで問題は解決する、というわけだ。しかし今回、IEでCSSに対してこの表記が使われている場合、対象となるCSSファイルが2回ダウンロードされてしまう問題があることが発覚した。ダウンロードされるファイルが2倍に増えるうえ、不要なリクエストやヘッダのやりとりも発生する。

Robert Nyman氏のCSS files downloaded twice in Internet Explorer with protocol relative URLs - Robert's talkではこれに対処するには絶対パス、ルートレラティブパス、ロケーションレラティブパス指定を使えばいいとまとめている。

絶対パスで指定すれば問題は回避できるが、ミックスコンテンツに対して開発の利便性をあげるためにプロトロルレラティブを使うという目的からは外れることになる。またRobert Nyman氏のブログの内容は数回に渡って改訂されており、どういった経緯で内容が変更されていったかのやりとりがコメントにまとまっている。