先日、エックスサーバーにmod_pagespeedを利用した高速化機能が追加されました。
この機能、エックスサーバーにログインして機能をONにするだけでサイトが高速化されるので手軽で効果的な方法ではあります。
ただ、WordpressのCSSをちょこちょこカスタマイズして、デザインをいじる人には、この機能は向いていないようです。
というのも、mod_pagespeedによりキャッシュ化されたCSSファイルなどは、キャッシュ更新日が来ないと、（おそらく）反映されないようなんです。ですので、頻繁にサイトをカスタマイズする人は、注意が必要という話です。
目次
mod_pagespeedが行うこと
そもそも、mod_pagespeedは、サーバー上で高速化のために以下のようなことを行っています。
- CSSファイル、JavaScriptファイルなどの圧縮
- 最適な画像タイプへの変換、軽量化
- 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
- CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
- 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む
これの、3番目と4番目の処理が、新しいCSS設定が反映されない原因となっているようです。（主に4番目）
同種のファイルを1つにまとめる
同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
この同種のファイルをまとめるというのは、以下のような動作をします。
例えば、ブラウザの開発者ツールなどで適当なHTML要素を選択してみると、mod_pagespeed適用前は、普通にWordpressテーマ内のstyle.cssを読み込んでいます。
けど、mod_pagespeedを適用すると、CSSファイルをひとまとめにした「A.style.css.pagespeed.cf.R104LrosO2.css」などという統合ファイルが作成されます。
この、統合ファイルがキャッシュ化されます。
ファイルのキャッシュ化
CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
このキャッシュ化が曲者で、通常のブラウザキャッシュとは動作が違います。
ブラウザキャッシュについての説明は以下を参照してください。
通常の、ブラウザキャッシュでも、mod_pagespeedのキャッシュでもCSSファイルなどに有効期限が設定されるのは一緒です。
ただ、僕が昨日試した感じでは、同じようなキャッシュでも、ブラウザをリロードした時の動作が以下のように違います。
- ブラウザキャッシュ：有効期限が切れてなくてもリロードをすると新しい設定が反映される。
- mod_pagespeedのキャッシュ：ブラウザでリロードしても新しい設定が反映されない。（おそらく有効期限が切れるまで反映されない）
ブラウザキャッシュを使用している場合は、CSSなどをカスタマイズしても、リロードすればスタイルが反映されました。しかし、mod_pagespeedのキャッシュは、CSS編集後ブラウザをリロードしても、設定が反映されません。
なので、「CSSを変更したのにスタイルが適用されない」なんてことが起こります。
僕も昨日試しにstyle.cssを編集してブラウザのリロードを何度もしてみたのですが、設定が反映されることはありませんでした。そこで、XSERVERからmod_pagespeedの設定をOFFにしたらリロード一発目で設定が反映されました。
まとめ
ということで、WordpressサイトのテーマをデザインをCSSでちょこちょこカスタマイズしている人には、mod_pagespeedを利用した高速化は、やめておいた方が良いと思います。
同様の理由で、JavaScriptなどをちょこちょこ編集する人や、画像を編集する人も。キャッシュの有効期限が切れるまで、編集が反映されないことがあるので注意が必要です。
逆に、「もうデザインなどは自分好みになっているので当分CSSやJavaScriptを変更する必要がない」というサイトの場合は、mod_pagespeedの利用は、お勧めだと思います。
とても参考になります！
「良いと思ってやったことが実は反対の効果を生んでいた」
こんなことがサイト運営していたらたくさんあるのではないかと、注意深くなるべきだなと考えさせられます。
私は初心者ブロガーですが、とにかく勉強しておいて損はないと思いました。