【初心者】ワードプレスプラグイン『Autoptimize』の使い方を優しく解説【スクショ・動画】

前回の記事では画像の最適化によってブログの表示高速化を可能にしてくれるプラグイン『EWWW Image Optimizer』の設定方法と使い方を解説しました。

今回は引き続きSEO関連で、ブログの表示速度を上げてくれるワードプレスプラグイン『Autoptimize』の設定方法・使い方を解説してみたいと思います。

またボクのブログが早くなっちゃうのかぁ

後輩ネコ

とのぽん

表示速度をさらに上げてユーザービリティ向上だ！

Autoptimizeで出来ること

Autoptimizeはワードプレスのソースコードを圧縮することでページの読み込み速度を向上させてくれるプラグインです。

機能としては

などが備わっています。

とのぽん

画像の最適化については前回の記事で扱ったEWWW Image Optimizerの方が機能が充実しているのでそちらを利用してください。

Autoptimizeの設定方法

の2点を解説していきます。

下の動画はAutoptimizeの設定方法・使い方を字幕で解説しています

インストール＆有効化

まずはプラグインをインストール＆有効化していきましょう。

管理画面サイドバーより『プラグイン』⇒『新規追加』と進みます。

検索バーに『Autoptimize』と入力して検索結果の左上に表示されたプラグインをインストール＆有効しましょう。

設定方法・使い方

プラグインがインストール出来たら管理画面サイドバーより『設定』⇒『Autoptimize』と進みましょう。

Autoptimizeで設定が必要なのは

の4点です。

Autoptimizeには画像の最適化機能も備わっていますが、こちらは専門のプラグイン『EWWW Image Optimizer』を利用することをおすすめします。

JS、CSS＆HTMLの最適化

まず『JavaScriptオプション』では

にチェックを入れ、その他の項目にチェックが入っている場合はチェックを外しましょう。

『CSSオプション』の設定では

にチェックを入れ、その他の項目にチェックが入っている場合はチェックを外しましょう。

『HTMLオプション』では

にチェックを入れましょう。

最後にページを下までスクロールして『変更の保存とキャッシュの削除』をクリックします。

追加の自動最適化

続いて『追加(追加の自動最適化)』の設定に移ります。

ここでは、

の2つにチェックを入れましょう。

もしもGoogleフォントを使っていないという場合は『Googleフォントの削除』にチェックを入れるとより最適化されます。

最後にページを下までスクロールして『変更を保存』をクリックしてAutoptimizeの設定は完了です。

Autoptimize設定後の不具合について

Autoptimizeはあらかじめインストールしているプラグインやテーマによっては機能が競合したりして上記のような不具合を起こす場合があります。

ここではこれらの不具合の解消方法について見ていきます。

更新や変更が反映されない場合

Autoptimizeを有効化するとキャッシュが自動的にサーバー上に保存されるようになります。

キャッシュとはページデータ(画像ファイルなど)を一時的にサーバー上に保存しておく仕組みのことで、毎回ページを開くたびにデータを読み込む必要がなくなるためページ表示速度が上昇するというメリットがあります。

キャッシュによってページ表示速度は上がるのですが、更新や変更後もキャッシュによってページが表示されるために更新・変更が反映されないとい不具合が生じることがあります。

この場合は、キャッシュクリアが必要でAutoptimizeには標準でその機能が備わっています。

ワードプレス管理画面の上部に『Autoptimize』というボタンが表示されるのでこれにカーソルを合わせて、『CSS/JSキャッシュ消去』をクリックしましょう。

ブログの表示(画像など)に不具合がある場合

Autoptimizeの設定を行うとブログの外観が崩れたり、画像が表示されなくなったりという不具合が起こることがあります。

この原因は大体

のどちらかである場合がほとんどです。

表示に不具合が起こった場合は以下に示す作業を一つ一つ試してみてください。

JavaScript最適化による不具合の解消

JavaScript最適化によって表示の不具合が生じている(かもしれない)場合は以下の2つの操作を試してみてください。

まずは、JavaScriptコードの最適化にチェックを入れた状態で

の2つにチェックを入れてみましょう。

上記の操作で不具合が解消しない場合は仕方がないので『CSSコードを最適化』のチェックを外してみましょう。

いずれの場合でも最後は画面を下までスクロールして『変更を保存』をクリックしてください。

以上の操作でも表示の不具合が解消されない場合はCSSの最適化が原因である可能性が高いので以下の操作を試してみてください。

CSS最適化による不具合の解消

JavaScript最適化に関する操作で表示の不具合が解消されない場合はCSS最適化が悪さをしている可能性があります。

CSSオプションで『CSSコードを最適化』のチェックを外しましょう。

最後に画面を下までスクロールして『変更を保存』をクリックします。

ブログのスピードテストをしてみたら結構評価上がってた！感動…！

後輩ネコ

とのぽん

次回はさらにブログの最適化のための施策を紹介するよ！