http://sticka.jp/ の開発ブログです。

2008年1月7日月曜日

起動を高速化しました

Stickaはアクセスしてから表示するまでちょっと遅かったのですが、今回YSlowなどを使いつつ高速化しました。
主軸はHTTPコネクション数を減らす事です。

まずは、JSやCSSはファイルを一本にまとめてYUI compressorで圧縮しました。

一番ファイル数が多いのはアイコン画像なので、IE6以外でアクセスした場合はdata url schemeを使ってCSSに画像を埋め込みました。
YUI Compressorは、data url schemeに対応していないようなので、compressorにかけてから、data url schemeに画像を展開する必要があります。

IEでも画像へのアクセスを減らすためにCSS Spriteを試したのですが、IE6ではPNG24での透過をサポートしておらず、PNG8では画像を結合したときに色数がなりなくなるので、対応をあきらめました。
はじめから、統一したパレットでアイコンを書いていればCSS Spriteは有効だと思います。

このため、IE6は他のブラウザより起動速度が若干落ちています。

またCSSをリファクタリングして、レンダリングしながら画像を読み込める様にしました。具体的には、画像の指定はすべてCSSで行い、スタイルのbackgroundで行う様にしています。

この辺でメンテナンス性が悪くならない様に、圧縮やdata url schemeへの展開はcapistranoのタスクで行う様にしています

サーバ側では、ETag, Expiresの設定、deflateの設定をして、効率的にコンテンツ配信ができる様にしました。

これで、起動速度がかなり上がっていると思います。

0 件のコメント: