拡張機能 Power Pack はPage Speed Insight の評価を高めてくれたか
Contents
“余計なスペースや改行コードをなくす” 「縮小」 という作業
css, js ファイルの最適化と中身
Page Speed Insight がページを表示する速度を高めるための対策として推奨してくれた項目のうち
- JavaScriptを縮小する
- CSS を縮小する
の2点。
css, js といったファイルに限らず、私たち人間が編集するときには文字情報がある程度レイアウト（改行したり、インデントを揃えてしたり）されていた方が、間違いも起こりにくく扱いやすいもの。
けれど、その
- 改行コード
- スペース
- タブ
というのは、ファイルの内容を処理しようとするシステムにとって余計なもの!
読み飛ばせばいいのだけれど、読み飛ばす文字なのかどうかを識別・判定しなくてはいけないわけで、その分余計な時間がかかる － だから無くしてしまいましょう… というわけです。
ところが、ファイルそのものから本当にそうした文字を無くしてしまうと、結局そのあと編集したいと思ったときにはわけが分からない! 手が付けられない!! ということになります。
そこで以前、「WPtouch Pro4 × Autoptimize は一緒に使えない!?」 で報告したように、プラグインの Autoptimize を試したのです。
プラグインがやってくれること vs. メリット/デメリットのバランス
Autoptimize のようなプラグインは、css, js から表文字を削除したバーチャル版と言えるコピーデータを作って、そのデータでページを表示するという中間処理をやってくれます。
そうすると 要工夫! として表示されていた
- JavaScriptを縮小する
- CSS を縮小する
の2点が見事になくなって、Page Speed Insight の評価がしっかり上がります! し、
css, js を編集しようと開いても、必要なレイアウトされたイメージのまま、使い勝手は変わりません。めでたしめでたし! なのですが、
ところがです…
css, js の不要文字の問題はクリアできたとしても、この不要文字を削除する中間処理はずっと繰り返し行わなくてはなりませんし、css, js がらみの項目が表示されなくなる代わりに、プラグインが居座ることになりますから、そのプラグインが重いよ! と言われる日が来ないとも限りません。
つまり、Page Speed Insight が要工夫! として表示してくれる css, js 関連の項目をクリアするにはオーバーヘッドがかかる、どんな対策にもメリットとデメリットがあるということを覚えておく必要があるのです。
Autoptimizeの有効性 － 私のサイトの場合
Autoptimize を使おうとしたとき、css, js 両方の最適化をONにするとWPtouch のモバイルモードがレイアウトを再現できなくなるという症状が起こりました。
表示に直接的な影響が大きいcss の方の最適化をOFFにすれば、WPtouch のモバイルモードの表示は期待通りになりました。
ところが、WPtouch （私の場合はWPtouch Pro4）の表示はカクカクとしてしまい、体感としても表示速度が落ちた!! と感じるものでした。サーバーや使っているテーマとの相性もあるだろうなと思いますし、キャッシングが一通り確保できればそれ以降はこのカクカク感はなくなりキャッシュの効果が出てくれるのだろうかとも思いますが、私の環境で使い続けるのはむずかしいそうという印象でした!
安定性＋（一定の）表示速度の効果を得るのに必要な時間がかかり過ぎると判断したのです。
WPtouch Pro4 + 拡張機能 Power Pack － 私のサイトで使えたのか
結論から言えば、Yes! －
Autoptimize で感じたカクカク感はなく、導入と同時に － サーバーがPower Pack の設定を反映してくれるまで、若干（5分ほど）待たなくてはなりませんが － 表示速度が改善された! 感触を感じることができました。
Page Speed Insight の評価も飛躍的!? とは言えませんが改善。
ただし! …
css の最適化をONにすると、ページが表示できなくなりました（Page Speed Insight も検証対象のドメインそのものを認識できなくなりました）。
css の最適化をOFFにするとページの認識も表示も期待通りに戻り、Page Speed Insight による検証も機能します。
