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

専業ブロガー５年目のあずきです🐥

WordPressで超定番なプラグインの１つ…

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

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

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

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

そんな「Autoptimize」について、３つのステップで丁寧に解説していきます

またこの記事の最後では【おまけ】として、当プラグインを使用するうえで押さえておきたい……

についても、あわせてご紹介していきます

ということで、さっそく見ていこー！

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

ステップ１：WordPressプラグイン「Autoptimize」とは？どんな役割があるの？

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

その役割についてです

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

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

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

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

といった処理を指します

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

ちなみに！

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

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

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

といった意味になります

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

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

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

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

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

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

について

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

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

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

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

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

上の画像例はすでに「有効化」済みの状態だから、「今すぐインストール」ボタンは表示されてないよ！

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

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

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

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

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

について

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

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

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

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

といっても一番のメインはあくまで【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】タブ：「その他オプション」

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

ということで…

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

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

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

【画像】タブ

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

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

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

画像を最適化

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

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

というプラグインが定番でおすすめなので、機能の重複を避けるためにも当ブログでは…

↑ このように、　チェックなし　の状態にしています

画像の遅延読み込み (Lazy-load) を利用

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

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

ただし！

この「遅延読み込み」機能も「EWWW Image Optimizer」側で設定できるので、こちらも「Autoptimizer」側では…

↑ このように、　チェックなし　の状態にしています

ということで…

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

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

【クリティカル CSS】タブ

【クリティカル CSS】というタブについては、通常　デフォルトのまま　でOKです

【追加】タブ

今度は…

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

こちらも基本的には　デフォルトのまま　でOKなんですが、このなかで１点だけ…

という項目で、「WEBフォント」の一種である「Googleフォント」を使用していない場合には…

↑ この　Googleフォントの削除　という項目を選ぶと、読み込みの軽量化につながります

逆に、Googleフォントを使ってる（今後も使う予定）なら選んじゃダメ！

このブログでも、Googleフォントは削除してるよ！

なお…

現在提供されているGoogleフォントの種類については、「Google Fonts」で簡単に確認できます（「Language」というタブを開き、「Japanese」を選択！）

ということで…

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

【さらに最適化！】タブ

【さらに最適化！】というタブについては、通常　デフォルトのまま　でOKです

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

最後に！

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

一瞬だよ！

おまけ：WordPressプラグイン「Autoptimize」で自動生成される ”ページキャッシュ” と、その削除方法について

最後に【おまけ】として、今回のプラグイン「Autoptimize」で生成される…

について

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

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

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

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

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

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

を指します

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

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

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

なので結論！

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

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

ページキャッシュの具体的な削除手順は、次の通り！

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

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

すると、現在WordPressに溜まっている「キャッシュの容量」が表示されるので…

↑ こちらの　Clear CSS/JS Cache　というボタンをクリックするだけ🐥

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

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

※2021年発表Infotop Affidemy