【2021年】「Autoptimize」の設定方法と使い方を初心者向けに解説【WordPressプラグイン／コードの最適化でサイトスピードを高速化】

あずきです🐥

WordPressをやるなら欠かせない定番プラグインの1つ…

について、その導入手順と「設定方法＆使い方」を、ブログ初心者さん向けに1から解説していきます

まず！

この「Autoptimize」は、WordPressのブログを構成している各種「コード」を…

することで、結果的に表示スピードを向上させるためのプラグインです

もちろん無料のプラグインで、むずかしいスキルもいらないよ！

ということで、今回のステップは4つです

さっそく見ていきましょー🐥

2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、

・役に立ちました！
・わかりやすかったです！

みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF

— あずき@ブロガー (@azuki_rinrin) July 13, 2020

関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

【2021年】「Autoptimize」の設定方法と使い方を初心者向けに解説【WordPressプラグイン／コードの最適化でサイトスピードを高速化】

ステップ１：プラグイン「Autoptimize」とは？ どんな役割があるの？【JavaScript・HTML・CSSなど、各種コードを最適化してWordPressを高速化】

まず1つ目のステップは…

その役割についてです

「Autoptimize」の主な役割は、WordPressを水面下で構成している…

といった各種ソースコードを「最適化」して、サイズを軽減させること

コードを最適化することで、表示スピードの高速化につながるよ！

ちなみに！

ここで言う「最適化」とは、例えば…

といった処理を指します

つまり、「プログラムを読み取るコンピューター側」にとっての ”ムダ” を省いてあげること！

ちなみに！

ブログの「表示スピード」を測るツールとして代表的な「PageSpeed Insights」というGoogleの無料ツールがあるんですが、計測した後の「改善点」のところに…

という項目が、わりとよく出てくるんですね

これがまさに、今回のテーマである…

といった意味になります

また「Autoptimize」では、そんな「コードの最適化」以外に…

といった、同じく「WordPressの高速化」につながる機能も付属されています

あわせて解説していくのでご安心を！

ということで、お次はプラグインの導入手順を見ていきましょう🐥

ステップ２：プラグイン「Autoptimize」をWordPressに導入する手順【インストールと有効化】

つづいて2つ目のステップは…

について

WordPress管理画面の左側にある一覧メニューから…

↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう

つづいて、画面の右上にある…

↑ こちらの検索フォームに　Autoptimize　と入力し、その下の検索結果から…

↑ このアイコンが目印のプラグイン「Autoptimize」を探し、右上の「今すぐインストール」ボタンをクリックします

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう

↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール＆有効化」は完了です

今度は肝心の「設定方法」を見ていこう！

関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

ステップ３：プラグイン「Autoptimize」の基本的な設定方法【各種コードや画像などの最適化設定】

つづいて3つ目のステップは…

について

WordPress管理画面の一覧メニューから…

↑　設定　＞　Autoptimize　をクリックしましょう

「Autoptimize」の設定画面が開いたら、ここから大きく…

↑ こちらの…

という5つの「タブ」にわけて、それぞれ設定していきます

といっても、1番のメインはあくまで【JS、CSS & HTML】タブで、残りのタブは一瞬です🐣

ということで、まずは【JS、CSS & HTML】タブから！

【JS、CSS & HTML】タブ

「Autoptimize」の設定画面で、上側のタブ一覧から…

↑ こちらの【JS、CSS & HTML】というタブをクリックして開きます

上から順に見ていきますね🐣

【JS、CSS & HTML】タブ：「JavaScript オプション」

↑「JavaScript オプション」というエリアでは、まず…

↑ こちらの「JavaScript コードの最適化」にチェックを入れます

するとその下に…

↑ このように、新たな項目が表示されます

こちらの追加項目については、通常すべて「デフォルトのまま」でOKです

つづいてその下の、「CSS オプション」という場所を見ていくよ！

【JS、CSS & HTML】タブ：「CSS オプション」

↑「CSS オプション」というエリアも、まずは…

↑ こちらの「CSS コードを最適化」にチェックを入れます

すると、またその下に…

↑ このように、新たな項目が表示されます

こちらの追加項目も、通常はすべて「デフォルトのまま」でOKです

お次はその下の、「HTML オプション」という場所について！

【JS、CSS & HTML】タブ：「HTML オプション」

↑「HTML オプション」というエリアも、まずは…

↑ こちらの「HTML コードを最適化」にチェックを入れます

すると、またその下に…

↑ このように新たな項目が表示されますが、こちらも通常は「デフォルトのまま」でOKです

【JS、CSS & HTML】タブ：「CDN オプション」

↑「CDN オプション」というエリアについては、通常デフォルトのままでOKです

【JS、CSS & HTML】タブ：「その他オプション」

↑ 1番下の「その他オプション」というエリアについても、通常デフォルトのままです

ということで…

ここまで一通りできたら、「変更を保存」ボタンを忘れずにクリックして、この【JS、CSS & HTML】タブは設定完了となります

お次は、【画像】タブについて見ていきましょう🐥

ここからはサクサクいくよ！

【画像】タブ

また設定画面の上側にあるタブ一覧から、今度は…

↑ こちらの【画像】というタブをクリックして開きます

また上から見ていきますね🐣

↑「画像を最適化」という項目では、WordPressにアップロードした画像を最適化して「容量を軽減」することで、表示スピードの向上が期待できます

ただし、WordPressにおける「画像の最適化」には…

というプラグインが定番でおすすめなので、機能の重複を避けるためにも自分はチェックを外しています

つづいてその下の…

↑「画像の遅延読み込み」という項目について、こちらは一見「マイナスな機能」にも思えるかもしれませんが、むしろこの…

という機能によって、「ページ表示の高速化」が期待できます

ただし！

この「遅延読み込み」機能も「EWWW Image Optimizer」側で設定できるので、こちらも「Autoptimizer」側ではチェックを外しています

ということで…

もしもデフォルトの設定から変更した場合は「変更を保存」ボタンをクリックして、この【画像】タブについても設定完了です🐥

この調子でサクサクいこう！

【クリティカル CSS】タブ

↑ こちらの【クリティカル CSS】というタブについては、通常そのままでOKです

【追加】タブ

今度は…

↑ こちらの【追加】というタブの設定について

ここも基本的には「デフォルトのまま」でOKなんですが、1点だけ…

↑ こちらの「Google フォント」という項目で、WEBフォントの一種「Googleフォント」を現在使っていない場合には…

↑ このように「Google フォントの削除」という設定を選んでおくと、読み込みの軽量化につながります

このブログでもそうしてるよ！

ということで…

ここまで設定できたら、また「変更を保存」ボタンを忘れずにクリックして、この【追加】タブについても設定完了です🐥

【さらに最適化！】タブ

最後に…

↑ こちらの【さらに最適化！】というタブについては、通常そのままでOKです

これで、プラグイン「Autoptimize」における基本的な設定は一通り完了となります

最後に！

「Autoptimize」を使っていくうえで必ず押さえておきたい「キャッシュ」の管理について見ていきましょう🐥

一瞬だよ！

関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

ステップ４：プラグイン「Autoptimize」で自動生成される ”ページキャッシュ” と、その管理について【古いキャッシュは定期的に削除】

4つ目のステップは、プラグイン「Autoptimize」で生成される…

について

まず！

「Autoptimize」を有効化すると、WordPressで最適化された各種ファイルの…

というのが自動生成されて、サーバー上に保存されます

キャッシュとは、Webページの読み込み情報を…

自動的に整理して「一時保存」しておく

ことで、「次回のページ表示にかかる処理」を大幅に軽減させる仕組みです

で、今回の「Autoptimize」で生成されるキャッシュというのは…

を指します

ページキャッシュは、「WordPressキャッシュ」とか「サーバーキャッシュ」とも言われたりしてるよ！

そんなWordPressの高速化につながる「ページキャッシュ」ですが、あまり古いキャッシュファイルを残したままでいると…

といったデメリットが生じかねないんですね

なので結論！

自動で生成されるこの「ページキャッシュ」については…

など自分なりにルールを決めて、定期的に「まとめて削除」するようにしましょう

具体的な削除方法は、次の通り！

WordPress管理画面の上側に表示されている…

↑ こちらの、「Autoptimize」という場所にカーソルを合わせましょう

すると…

↑ このように、現在WordPressに溜まっている「キャッシュの容量」が表示されるので、その下側の…

という項目をクリックするだけ

これでサーバーに蓄積されていた「ページキャッシュ」が空になって、最新のページ情報が読みこまれるようになるよ！

　第4章　プラグイン 編　　　　　　　　　

　第5章　サイトマップ 編　　　　　　　　

あずきのワードプレスブログ「完全初心者」ガイド