ブログ運用

【wpX】mod_pagespeedのレイアウト崩れ対策

2015/08/23

wpXでmod_pagespeedを使うときの注意。

今日の1記事目はブロガーさん向けのマメ情報です。

先日からwpXの目玉機能であるmod_pagespeedを使い出しました。

今日はこの数日、実験を繰り返して、mod_pagespeedを使った時のレイアウト崩れの原因と対策がわかってきたので、ブロガーさん向けに共有しておきます。

使いこなせれば、ブログの表示速度が体感できるレベルで速くなりますので、どうぞご活用ください。

スポンサーリンク

【復習】wpXの目玉機能「mod_pagespeed」とは?

mod_pagespeedの概要

かんたんに言うと、wpXのサーバー上でファイルサイズを縮小したり同じ種類のファイルをひとまとめにすることで、表示速度を高速化する機能のこと。

■最適化機能の内訳

  1. CSSファイル、JavaScriptファイルなどの圧縮
  2. 最適な画像タイプへの変換、軽量化
  3. 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
  4. CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
  5. 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

エックスサーバー説明ページより引用
https://www.xserver.ne.jp/manual/man_server_mod_pagespeed.php

現在のところ、管理画面の上でmod_pagespeedの「オン」か「オフ」しか選べません。

このブログの場合だと、ロード時間が4.7秒から1.5秒になるというすさまじい効果がありました。

参考 wpXのmod_pagespeedは超爆速だけど注意が必要

 

ただ、一つだけ問題が・・・それがレイアウト崩れです。

最初にガタガタになったときには焦りましたが、試行錯誤しているうちに事情がわかってきました。

wpXのmod_pagespeedを使うとレイアウトが崩れる理由

mod_pagespeedでレイアウトが崩れる原因

ズバリ、mod_pagespeedにCSSの情報が反映されるのにタイムラグがあるからです。

キャッシュ情報が更新されるまではリロードボタンを押そうが、他のテーマを有効化してから元のテーマに戻そうが、データは反映されません。

ただ、

  1. PHPファイルを直接編集
  2. ウィジェットの追加・画像の差し替え
  3. 記事内で直接style属性を使った装飾

は即時反映されますので、これらの編集はいつやっても大丈夫です。

wpXのmod_pagespeedを使うとCSSの反映は5時間後になる

mod_pagespeedの設定反映は5時間後

その後、どうでもいい文字装飾部分でクラス名の変更を繰り返したところ、3回の平均値を見ると約5時間くらいでCSS情報が更新・反映されることがわかりました。

何日もかかると思っていたので、予想より速い印象です。

時間がわかっていれば、打てる手はいろいろありますよね。

文字や見出しの装飾程度であれば、放っておけば反映されるので

  1. mod_pagespeedを切った状態でCSSを編集
  2. うまく表示されていることを確認、編集が終わったらmod_pagespeedをオン
  3. あとは反映を待つだけ

で十分だと思います。

ただ・・・レイアウト自体を変えるとか、大掛かりな変更がある場合はSNSなどで事前告知した上で、深夜にしてやるしかないでしょうね。

wpXのmod_pagespeedを使うときの注意

mod_pagespeedを使うときの注意点

wpXのmod_pagespeedは5時間待てば変更が反映されることはわかりました。

ただ、これだけならいいのですがまだいくつか制限というか、不便なところがあります。

エックスサーバー側も順次何らかの対策はしてくると思いますが、それまで注意しなければいけないことをまとめます。

子テーマは使えない

ほかはまだ我慢できても、これは我慢できない人が多いのではないでしょうか。

僕の場合、wpX導入初日、Stinger5を子テーマで有効化し、一晩置きましたがレイアウトは崩れたままでした。

3日くらいおけば動く可能性もありますが、それでは運用に支障が出てしまいます。

  • 子テーマを使いたいならmod_pagespeedはオフ
  • mod_pagespeedを使いたいなら本テーマで運用

2つにひとつです。

このブログはStinger5のテーマを直にいじってます。

毎日ちょこちょこカスタマイズしているので、そろそろどこをカスタマイズしているのか忘れそうなので、このあとまとめます。

画像がちょっと劣化する

よく言われていることですが、少し画像が劣化します。

ざらついた感じにはならず、少しぼやけます。

僕の場合は文字中心なので全く問題ありませんが、写真メインのブログとかだと、影響がでるかもしれません。

もちろん元データをいじるわけではないので、mod_pagespeedを切ればきれいに表示されるようになります。

うまく動かないプラグインが出る可能性がある

これはサーバ変えれば必ず起こることですので、やむをえないところです。

ただwpXでキャッシュ機能とmod_pagespeedを有効にすれば、それだけでPageSpeed Insightsのエラーがかなり減ります。

キャッシュ系、HTML/CSS/JavaScript圧縮系のプラグインは止めてしまってもいいかもしれません。

妻へ・・・

京都のワンシーンを入れてみました。

っていうか、京阪線で臨時特急が出ることあるんですね。

スポンサーリンク

-ブログ運用

(たかなし むつき)と読みます。元某大手通信系コールセンター派遣社員。36歳で派遣脱出を達成!今はシステム運用の中の人です。コールセンター仕事術や転職など、自分でいうのもアレですが、いいこと言ってます。 >> 詳細プロフィール


【運用ブログ】

WinF
日常を理系目線で鋭くえぐる大人の読み物
http://winfriede.com/

WinF-JC
30代から派遣を脱出する方法満載の転職ブログ
http://winfriede.com/jobchange/

WinF-FX
FXを使って1日2分で作業と月々5,000円の積立を7,000万円にする方法まとめ
http://winfriede.com/FX/

しょうもないことばっか送りつけるのであまりSNSのフォローはオススメしません。。

【Instagramやってます】
Instagram

【LINE@やってます】
更新情報のほかに、毎朝7時と夜10時に”意識高い系の独り言"を配信します。
暇な時、気が向いたら返事するので気軽に話しかけてください。

友だち追加数

※@winfで検索でも友達登録ができます。