iPhone/iPad/Android/Palmキャッシュサイズ比較

高速なWebアプリケーションやWebサイトを構築するためのノウハウはすでに多く発表されているが、これらはPCでのブラウジングが前提となっている。もちろんPCに有効なテクニックでモバイルに有効なものもある。逆に、PCに適用できても、モバイルに対しては悪化するケースもある。

たとえばDiffableを使って、コンテンツを単一のJavaScriptへ集約しHTTPリクエストの発行を最小限に抑え、かつ、コンテンツ変更後のダウンロードを差分だけに抑える方法はPCでのブラウジングでは効果が見込める。JavaScriptとしてまとめられたリソースがキャッシュされるからだ。しかし、これが仮にキャッシュされないとなると、この方法は意味がないどころか逆に動作を遅くする可能性がある。

Steve Souders氏がMobile cache file sizes - High Performance Web Sites blogにおいてモバイルブラウザにおけるコネクション上限やキャッシュサイズ上限またその特徴を紹介している。紹介されている調査結果は次のとおり。

キャッシュは同一セッションあたりの非圧縮状態のJavaScriptサイズ上限となっている。4MB、2MB、1MBがそれぞれ上限になっている。CSSについても同じ結果だという。注目点はロック/アンロックではキャッシュが引き継がれるものの、再起動をかけるとキャッシュが消えるデバイスもあるということだ。Steve Souders氏は高速なブラウジングを実現するのに、現在のPCブラウザのキャッシュ保持サイズ制限は小さすぎると指摘しており、現在のPCのディスクサイズを考えると、もっと引き上げるべきだと主張している。それと比べると、モバイルにおけるキャッシュ制限はきついものといえる。キャッシュを前提としたテクニックをそのままモバイルに適用することは現段階では検討すべきことが多い。

Mobile cache file sizesの調査を共同で実施したYahoo!のRyan Grove氏はMobile Browser Cache Limits, Revisitedにおいて、ほかの計測結果も踏まえつつ、モバイル向けのテクニックとして次の内容を紹介している。

• キャッシュの期限指定はかなり長めに設定しておく。
• HTMLファイルのサイズを25.6KB以下になるように工夫する。
• JavaScriptとCSSファイルのサイズは1MB以下に抑える。ただし、1MB以下に抑えるためにファイルを分割するといったことはしない。
• デバイスの再起動を越えて永続的にキャッシュする必要がある場合にはHTML5の機能の活用を検討する。
• かならず自分で試験を実施して確認する。

モバイルブラウザはPCと比べて制限が多いうえに、ブラウザやデバイスごとに設定されている機能の差が大きい。しかも変化がとても速いため、こうしたモバイル向けのWebサイト開発テクニックは日進月歩で変わっていくとみられる。