アイフラッグ基盤担当のTTです。

今回からは他の執筆者との差別化と使い勝手の検証を兼ねて、ブログページに移って不定期に記事を投稿していきます。

これからも、よろしくお願いいたします。

なんとか今回は、時間を空けずに更新することができました。

前々回に予告したCSSスプライト機能（sprite_imagesフィルタ）についての説明です。

デモを見たのですが、「すごい！よくこんなの考え付くなぁ」と感心しました。

まずは本家のデモをご覧ください。最初は最適化されていないかもしれませんが、その場合はリロードしてください。

http://www.modpagespeed.com/sprite_images.html?ModPagespeed=on&ModPagespeedFilters=rewrite_css,sprite_images

元は3つの画像ファイルをmod_pagespeedが1ファイルに纏めています。

しかしデフォルトでは無効になっているオプションです。

何でデフォルトでは無効なのだろう？と思い、検証したところ私も以下の理由で利用をあきらめました。

1. CSSスプライトにするための条件が厳しい
2. 弊社の環境ではインライン化の制限内で収まるケースが多く、有効な場面が少ない
3. TRIM_URLSが効かない

このフィルタの効果としては、CSSで使われる複数の画像を一度のリクエストで取得してサーバへの要求回数を減らすことです。

この利点は理由1.と2.でほぼなくなり、理由3.によりたとえ効果があっても弊社環境への適用ができなくなりました。

以下に非常に簡単ではありますが、個別の理由について説明します。

CSSスプライトにするための条件

• CSSに画像サイズ（heightとwidth）が記述されていること
• PNGとGIFのみ対応（JPEGは後日対応予定）

画像サイズはほぼ指定しておらず、CSSの修正が大量になるためにこの時点であきらめました。参考：ソースの表示

インライン化で収まることが多い

この例では、CSSスプライトを有効にしてもインライン展開で完了しています。

インライン化を無効にするとCSSスプライトを利用します。

TRIM_URLSが効かない

TRIM_URLSを有効にしてもソースを見るとドメインまで指定されています。

現在のバージョンを利用される際は、TRIM_URLSが効かないことを覚えておいてください。

前回の記事でも述べましたが、弊社のホスティング環境ではTRIM_URLSが有効でないと正常に表示できなくなります。

このために、たとえ効果があっても適用はできなくなりました。

最後に、本家の解説は以下になります。本番システムでの利用を考えている方は、制限事項やリスクを熟読されることをお勧めいたします。

https://developers.google.com/speed/docs/mod_pagespeed/filter-image-sprite

2013-03-12 20:48:53

mod_pagespeedのTips   ｜  コメント(0)   ｜  トラックバック (0)