AutoptimizeはWordpressサイトの高速化に役立つプラグインです。
Autoptimizeは必要か不要かで考えると、Wordpressサイトの高速化には必要です。
しかし、設定を誤ると不具合の原因になることがあります。
ここでは、不具合の原因にならないAutoptimizeの設定方法、ならびに不具合が発生した時の対処方法を解説致します。

Autoptimizeとは？

Autoptimizeは、HTMLやCSS、Javascriptなどのリソースを簡単に軽量化・圧縮してくれるWordpressプラグイン（ツール）です。

Autoptimize

Autoptimizeのメリット

Autoptimizeのメリットは、以下の3種類のリソースの最適化（軽量化・圧縮）によって、サイトの表示速度を上げることにあります。

サイトの表示速度が上がると、ユーザビリティの向上に繋がり、検索エンジンから評価され、結果、上位表示しやすくなります。

●JS（JavaScript）
●CSS
●HTML

Autoptimizeの注意点

Autoptimizeの役割はリソースの最適化（軽量化・圧縮）にあると前述しました。

全て解決するわけではない

しかし、注意しなければならないことは、AutoptimizeでHTMLやCSS、Javascriptの問題が全て解決するわけではないという点です。

あくまでも、Autoptimizeがやってくれるのは、リソースの軽量化・圧縮のみであるという点です。

Autoptimizeのデメリット

次に設定の仕方を誤ると不具合の原因になるという点。
これは、同じ目的を複数のプラグインで設定すると不具合が起こしやすい為です。
1つの目的は1つのプラグインのみで設定するのが基本です。

Autoptimizeの導入方法

Autoptimizeを導入するには、Wordpress管理画面（ダッシュボード）の「プラグイン」→「新規追加」で「Autoptimize」を検索。
「Autoptimize」が見つかったら、「今すぐインストール」。
最後に「有効化」をクリックして終了。

次に設定を見ていきます。

Autoptimize設定方法

●JS、CSS&HTML
●Images
●追加
●さらに最適化！

具体的なAutoptimizeの設定方法の解説に入りますが、ネットでAutoptimizeの設定方法を調べると、サイトによって設定方法が異なる（チェックの有無）場合があります。

JS、CSS&HTML

JavaScript オプション

以下の項目にチェック

【Aサイト】
●JavaScript コードの最適化
●JS ファイルを連結する

但し、別のサイトでは以下の項目にチェックとありました。

【Bサイト】
●JavaScript コードの最適化
●連結しないで遅延

「JSファイルを連結」するか「しない」かの問題です。
これに関しては、【Aサイト】と【Bサイト】の設定を各々試してスコアをチェックすると良いと思います。

但し、設定を変更しても、PageSpeed Insightにすぐ反映されないので注意が必要です。

当サイトの場合、【Bサイト】の設定の方がPCのスコアは良くなりました。

CSS オプション

CSSについては下記の項目をチェックする。

【Aサイト】
●CSS コードを最適化
●CSS ファイルを連結する
●インラインの CSS も連結

但し、他のサイトでは、以下の2項目のチェックでした。

●CSS コードを最適化
●インラインの CSS も連結

HTML オプション

HTML オプションでは、下記の項目をチェック。

●HTML コードを最適化

その他オプション

下記の3項目をチェック。

●連結されたスクリプト / CSS を静的ファイルとして保存
●除外された CSS ファイルと JS ファイルを最小化
●ログイン状態の編集者、管理者にも最適化を行う

Images（画像）

「画像の遅延読み込み (Lazy-load) を利用」にチェックを入れるかどうか。
「画像の遅延読み込み (Lazy-load) 」機能は、通常プラグイン「EWWW Image Optimizer」の方が優れていると言われています。

しかし、Autoptimizeで設定した方がスコアが良かったという記事もあります。

「EWWW Image Optimizer」とAutoptimizeのどちらで設定する方が良いのでしょうか？

これに関しては、両方試してみてスコアの良い方を採用するのが賢明です。

又、他にLazy-load系のプラグインを使っている方は、チェックすると動作に問題が生じる可能性があります。

「EWWW Image Optimizer」等で「画像の遅延読み込み (Lazy-load) 」を設定する場合、Autoptimizeではチェックは入れません。
※Lazy-load系のプラグインについては別記事をご参照ください。

他にLazy-load系のプラグインを入れていない場合は、「画像の遅延読み込み (Lazy-load) を利用」にチェックを入れます。

追加の自動最適化

「追加の自動最適化」では、以下の2項目にチェックを入れます。
●Google Fonts
●絵文字を削除

Google Fonts

「Google Fonts」には5項目がありますが、どれを選択する（チェックを入れる）かはサイトによってバラバラです。

①そのままにする：この選択はありません。
②Google フォントの削除
③結合とヘッダーでのリンク (フォント読み込みは速いがレンダリングブロックが発生), display:swap を含む。
④結合とヘッダーで遅延リンク (フォント読み込みは遅いが、レンダリングブロックなし), display:swap を含む。
⑤webfont.js で非同期にフォントを結合して読み込む。 (廃止予定)
●Googleフォントを使わない場合は⇒①
●⑤は廃止予定なので、選択しない。
●③は「レンダリングブロックが発生」とあるので、①でなければ、④を選択するのが無難です。

絵文字を削除

「絵文字を削除」にチェックするのはどのサイトも共通しています。

さらに最適化！

「さらに最適化」では、有料機能やより硬度な機能になるので、特に設定しなくてOKです。

Autoptimizeで不具合が発生した時の対処方法

Autoptimizeで不具合が発生した時は、以下の2点をチェックしてみてください。

●キャッシュ
●プラグインの設定
●Autoptimizeの設定

キャッシュ

キャッシュをクリア

プラグインの設定

違うプラグインで同じ機能を設定している⇒どちらかを停止

Autoptimizeの設定

Autoptimizeをデフオルの戻す。

それでも、問題が解消しない場合は、問題のあるリソースの「最適化」を無効にする。