This site is here to highlight leading edge stuff that people are doing with Mozilla Firefox and the open web.

Mozilla Hacksに掲載された「Capturing - Improving Performance of the Adaptive Web」が興味深い。高速化テクニックとして、Webページの高速化に取り組んでいる開発者にお薦めしたい記事。

WebページがMacBook Proのレティナモデルなどで美しく表示されるには、画像データをそれに合わせて高解像度なものにする必要がある。しかし、WebページはPCからスマートフォンまで、複数のデバイスからアクセスされる。レティナモデルを意識したページを、古いAndroidのスマートフォンからアクセスすれば、もっさりとした重いページというイメージを与えることになる。

リソースのダウンロードはブラウザがHTMLをパースした段階で発生する。記事ではこれを回避し、リソースが読みこまれるタイミングを制御する方法を紹介している。具体的には、たとえばimg src=""という指定をimg data-src=""などのように記述しておき、JavaScriptで後からdata-srcをsrcに変えてやるという方法だ。

この方法であればリソースの読み込みタイミングを制御できるほか、対象のデバイスに合わせて取得する画像データを変更するといったことができる。