Autoptimizeの設定方法-JavaScript/CSS/HTMLを縮小する

さて今回はAutoptimizeの設定方法と使い方をご紹介致します。
まずはじめにこのページにたどり着いたという事はPageSpeed Insightsで自分のサイトの表示速度を上げたいと思われている方が多いと思います。

試していない方はまず、自分のサイトをチェック!
PageSpeed Insights

どんな結果でしたか?赤点まみれでしたか?
プログラミング言語がわからなければ、ページの速度を上げる事も出来ないのかと私は最初嘆いてましたが、そんなことは無く、ほぼ全ての問題をプラグインが解決してくれます。
では、解説していきます。

スポンサーリンク

JavaScriptを縮小する/CSSを縮小する/HTMLを縮小する

このプラグイン無しに自分のサイトをチェックすると下の画像が表示されるはずです。

Autoptimize 設定1

最初見たときは、は??となりましたが、わかりやすく言うと
お前の部屋汚いから、整理整頓しなさいという意味です。
サイトはコードによって構築されていますが、それには無駄なスペースや余計な空白が存在するわけです。
自分で作成している外観テーマを使用している人はかなり少ないと思いますし、何をどう縮小すればいいかもわからないはずです。
それを自動的に縮小してくれるプラグインがAutoptimizeです。

  Autoptimizeの設定方法

ながなが話しましたが、設定方法を解説していきます。
プラグインの新規追加でAutoptimizeをインストールして有効化して下さい。
Autoptimize 設定3

有効化すれば、設定にAutoptimizeの項目が追加されるので、それをクリック。
ここから設定しますが、3分で終わります。
まず下の画面の様にチェックを入れて下さい。

Autoptimize 設定4

チェックすれば「Save Change and Empty Cache」をクリック。
チェックした内容は以下の通りです。

Optimize HTML Code?
HTMLの最適化をしますか?

Keep HTML comments?
コメントアウトしたHTMLをページ上に残しますか?

Optimize JavaScript Code?
JavaScriptの最適化をしますか?

Optimize CSS Code?
CSSの最適化をしますか?

Generate data: URIs for images?
小さいサイズの背景画像を、CSS内に記述しますか?

CDN Options
CDNとは、大きいファイルを別のサーバーに置いたりして、ネットワークを最適化する事ですが、今回はチェックしないて下さい。

設定が完了したまた自分のサイトをコチラでチェックして下さい。

改善結果

改善結果は以下の通りになります。

モバイル 60→73

パソコン   70→82

かなりの上がりましたが、ソースコード(HTML)を自分で多々見る事がある人は、縮小されて見える為、向いてないかもしれません。
HTMLの縮小を外した程度では、そこまでスコアは下がりませんので安心して下さい。

弊害・影響

Autoptimizeを有効化する事によって、ソースコードは縮小されますがJavaScript等に影響を及ぼす事があります。
IEでは画像が表示されないや、キャッシュが肥大化するなどの問題報告もありるので、ちゃんとプラグインのアップデートやサイトの変動をチェックして見て下さい。