この記事ではできるだけエラーが出ないように、最低限しておいたほうがいいAutoptimizeの設定を解説していきます。
Autoptimizeとは
Autoptimizeは、CSSやJavascriptなどのリソースを軽量・最適化してくれるプラグインです。
具体的に、どんなことをしてくれるのかと言うと…HTML、JavaScript、CSSなどのプログラミングコードを自動で圧縮してくれます。
これらのプログラミングコードを圧縮して、データ容量を減らすことで、ブログの表示速度を上げることが可能です。
手動でこれをやろうとすると、かなり大変…
すごく時間と手間が掛かってしまいます。
Autoptimizeを使えば、一瞬でHTML、JavaScript、CSSなどのプログラミングコードを圧縮してくれますよ。
Autoptimizのインストールをする前に表示速度のチェック
Autoptimizeをインストールする前に、現在の表示速度がどれぐらいなのか確認をしておきましょう。
そうしないと、Autoptimizeをインストールして、どれだけ効果があったのかわかりません…
環境やテーマによっては、あまり効果がないこともあるので、その場合はAutoptimizeをインストールしないという選択肢もあります。
表示速度を調べる方法
PageSpeed Insightsで、あなたが運用しているブログのURLを上記画像の赤枠の中に入力すれば、現在の表示速度を調べることができます。
表示速度が点数で表示されるので、忘れないようにメモをしておきましょう。
現在の表示速度がわかったら、さっそくAutoptimizeをインストール！
Autoptimizeのインストール
WordPressの管理画面から、①プラグイン→②新規追加→③検索ボックスにAutoptimizeと入力→④インストールをクリックして有効化します。
Autoptimizeの設定画面にアクセス
Autoptimizeの設定画面は、管理画面の左メニューの「設定」→「Autoptimize」でアクセスすることができます。
Autoptimizeの設定方法
設定画面にアクセスすると「いくつかのタブ」がありますが、基本的に設定する箇所は「JS、CSS&HTML」タブ。
それでは設定を進めて行きましょう！
必要な項目にチェックを入れていくだけなので簡単です。
JavaScriptオプション
JavaScriptオプションでは、ふたつの項目にチェックを入れます。
チェック
- JavaScript コードの最適化
- JSファイルを連結する
上記ふたつの項目にチェックを入れることで、ファイルを圧縮して最適化してくれるので「表示速度を上げる」ことができますよ。
設定後にエラーが出た場合
- <head> 内へ JavaScript を強制
- try-catch の折り返しを追加
設定後にエラーが出た場合は「上記にチェックを入れる」と解決することがあります。
「head内にJavaScriptを移動させる」と読み込みが遅くなってしまうのでオススメしません。
その場合の
対処方法は、エラーが起こっているJavaScriptだけを手動で、head内に移動させるなどの対処が必要になります。
初心者の方は直接ファイルを修正するのは難しいと思うので、エラーが出てどうしようもない場合は、以下の方法をとってもいいと思います。
- JavaScriptオプションは使わない
- エラーが出ているプラグインを調べて、そのプラグインを使わないようにする
CSSオプションの設定
CSSオプションで、チェックを入れる箇所は4カ所になります。
- CSSコードを最適化
- CSSファイルを連結する
- データを生成：画像をURL化
- すべてのCSSをインライン化
チェックを入れていない箇所に関しては、チェックを入れてみて「表示速度が速くなる」ようでしたら、チェックを入れても問題ありません。
「どの設定で速度が変化したのか」わからなくなるので、「すべての設定を完了させてから」実施してみましょう。
HTMLオプションの設定
HTMLオプションでチェックを入れる箇所は、ひとつだけになります。
「HTMLコメントを残す」は、特に理由がない限り残す必要はありません。
CDNオプションの設定
CDNオプションは、特に設定をする必要はありません。
その他オプションの設定
その他オプションの設定は、デフォルトのままで問題ありません。以上で、JS、CSS & HTMLの設定は完了です。
「変更を保存してキャッシュを削除」をクリックして、設定した内容を保存します。
画像タブの設定
基本的な設定は完了！
- 「Lazy-load images?」にチェックを入れると、画像を遅延表示させることができます。
ただし、この機能は他のプラグインで使っていることも多いので、Autoptimizeで設定をすると「競合してエラーが出る」可能性があります。
他のプラグインで画像遅延の機能を使っていない場合は、Autoptimizeで設定をしても問題ありません。
ちなみに…筆者は画像を延表示をさせる専用のプラグインで、画像遅延の設定をしているのでチェックを入れていません。
Autoptimize設定後の注意点！
Autoptimizeの設定が終わったら、必ずブログがちゃんと見れるか確認をしましょう。
使っているテーマや使っているプラグインによっては、今回紹介した設定をしても問題が発生する可能性があります。
必ず最終確認をするようにしましょう。
再度表示速度のチェックをしてみよう！
Autoptimizeの設定が終わりブログの表示も問題ないようでしたら、再度表示速度を計測してみましょう！
PageSpeed Insightsで、ブログのURLを入力。
プラグインを入れる前と後で、どれだけ速度が上がったか確認します。
Autoptimizeは手動でキャッシュを削除する必要がある
Autoptimizeは、ユーザーがブログにアクセスした際にダウンロードされるHTML、CSS、JavaScriptを圧縮してくれます。
圧縮したファイルをキャッシュすることで、サイト内コンテンツを高速に表示する仕組みになっています。
ただし、キャッシュした容量が増えてくると「Autoptimizeからキャッシュを削除してくれ！」と警告がきます。
キャッシュを削除する方法
WordPress管理画面の上部に、Autoptimizeという項目があります。
カーソルを持って行くと、現在のキャッシュ情報が表示されます。
ここのパーセンテージが増えてくると警告が出るので、「キャッシュ削除」をクリックして、キャッシュの削除をしましょう。
パーセンテージは増えていくごとに、「緑→黄色→赤」と色が変わっていくので恐いです。
まとめ
Autoptimizeは、HTML、CSS、JavaScriptを圧縮し、データを軽量化することで、ページの表示速度を上げることができます。
ただ、プログラミングコードに変更を加えるため、使用しているテーマやプラグインによっては問題が発生することがあります。
設定をしてみて、問題なくブログが表示されるかどうか必ず確認をするようにしましょう！
関連
こんな悩みを抱えている方に。
今回は、ブログの表示速度の改善に役立つプラグインをご紹介したいと思います。
目次
WordPressのプラグインAutoptimize
ただし、Autoptimizeは他のプラグインとの相性が悪かったりすると、エラーが表示されることも多いプラグイン。