プラグイン導入が簡単なWordpress。しかし調子に乗って入れ続けると大変なことに
調子に乗ってプラグインをインストールしまくっていると、実は見えないところに被害が・・・。
それはHTML/CSS/JSのソースコード。
これが荒れるとページの表示が遅くなり、ユーザの離脱に繋がります。また、みなさんが大好きなGoogle PageSpeed Insightsの点数も低くなります。
ということで、HTMLのソースが荒れた方はAutoptimizeプラグインを導入してソースコードを最適化しましょう。
こちらが最適化前のコード
cssがやたら並んでいますね。これ、headタグの中ですよ。
レンダリングブロックの元ですね。表示が遅くなってしまいます。
一番下の部分。こちらもJSがいくつか。それから生のstyleがぺろりんと。
行数は880行ほどあるようです。
この状態でGoogle PageSpeed Insights を見てみますとレンダリングブロックするCSSが12個もあるじゃないか、この野郎、と怒られてしまいます。当然です。
そこでAutoptimizeしてみます
なんともシンプルなAutoptimizeプラグイン。こちらをインストールし、管理画面を開くと下記項目が出てきます。
取り急ぎHTML/JS/CSS全ての最適化をするよう、チェックを入れてみました。
結果は下記。ソースコードが見にくくなりました（笑）
というのも改行コードが取り除かれたから。
改行コードを取り除けばその分ドキュメントの容量を減らすことができますので。
また12個あったCSSは1つのCSSにまとまっています。
ソースの一番下の部分。行数は28行まで減少。JSも一つのファイルにまとまっています。
この状態でGoogle PageSpeed Insightsを見てみると、12個あって怒られていたCSSが3個にまで減りました。
もちろんその分、点数アップです。
とは言え取り扱いは慎重に
かなり過激にコードを最適化してくれるAutoptimize。気持ち良い感じなのですが、私の経験上ここまでドラスティックにコード変更すると、何かしら不具合が出る可能性があります。特にJSがうまく動かなくなることは多いですね。
採用する際はテスト環境で慎重に検証してから導入ください。