専業ブロガー5年目のあずきです🐥
WordPressで超定番なプラグインの1つ…
Autoptimize
について、導入手順と設定方法&使い方をブログ初心者さん向けに1から解説していきます
Autoptimizeは、WordPressのブログを構成している各種「コード」などを…
自動で最適化
することで、結果的に表示スピードを向上させるためのプラグインです

そんな「Autoptimize」について、3つのステップで丁寧に解説していきます
- 「Autoptimize」とは?どんな役割があるの?
- 「Autoptimize」の導入手順
- 「Autoptimize」の基本的な設定方法
またこの記事の最後では【おまけ】として、当プラグインを使用するうえで押さえておきたい……
- 「Autoptimize」で自動生成される ”ページキャッシュ” と、その削除方法
についても、あわせてご紹介していきます

\ 当ブログで愛用しています /
インフォトップ ワードプレステーマ売上
第1位※
すごいもくじLITE
の限定特典キャンペーンも実施中!!!
公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連:【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】
-
【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】
続きを見る
※2020年度Infotop売上及びInfotop Affidemy
【2022年】Autoptimizeの設定方法と使い方を初心者向けに解説【WordPressプラグイン/コードの最適化でサイトスピードを高速化】
ステップ1:WordPressプラグイン「Autoptimize」とは?どんな役割があるの?
まず1つ目のステップは…
「Autoptimize」とは?
その役割についてです
「Autoptimize」の主な役割は、WordPressを水面下で構成している…
- HTML
- CSS
- JavaScript
といった各種ソースコードを「最適化」して、サイズを軽減させること

ちなみにここで言う「最適化」とは、例えば…
- コード内のスペースや改行などを詰めて「縮小」させたり
- コードが記載された複数のファイルを「連結」させたり
といった処理を指します

ちなみに!
ブログの表示スピードを測るツールとして代表的な「PageSpeed Insights」というGoogleの無料ツールがあるんですが、計測後の「改善点」のところに…
レンダリングを妨げるリソースの除外
という項目が、わりとよく出てくるんですね
これがまさに、今回のテーマである…
- レンダリング
→WEBサイトを構成している各種「コード」を読みこんで、実際のページを表示させること! - を妨げるリソース
→コード構成にムダがあって読みこみが遅れてしまう、その「原因」となっている部分! - の除外
→上記のムダとなっている部分を「最適化」して、ページの読み込みをなるべくスムーズにしよう!
といった意味になります
またAutoptimizeでは、そんな「コードの最適化」以外に…
- 画像ファイルの最適化
- Googleフォントの削除
- ページキャッシュの生成・管理
といった、同じく「WordPressの高速化」につながる機能も付属されています

ということで、お次はプラグインの導入手順を見ていきましょう🐥
ステップ2:WordPressプラグイン「Autoptimize」の導入手順【インストールと有効化】
はじめに
プラグインの導入・設定に際しては、万が一のエラーに備えて各種データを事前にバックアップされたうえで、すべてご自身の責任にて行ってください(ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります)
-
【2022年】BackWPupのおすすめな設定方法を初心者向けに解説【WordPressプラグイン/ブログデータを自動でバックアップ】
続きを見る
つづいて2つ目のステップは…
「Autoptimize」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Autoptimize と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Autoptimize」を探し、右上の「今すぐインストール」ボタンをクリックします

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう
↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール&有効化」は完了です

\ 「なぜ売れないか?」を徹底解析 /
結果が見えるサイト運営に
AffiliateRun~なぜ売れないか?
PDFマニュアル付き!
公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
-
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】
続きを見る
※別売りのWordPressテーマ「ACTION AFFINGER6」最新版が必要です
ステップ3:WordPressプラグイン「Autoptimize」の基本的な設定方法【コードや画像などの最適化設定】
つづいて3つ目のステップは…
「Autoptimize」の基本的な設定方法
について
WordPress管理画面の一覧メニューから…
↑ 設定 > Autoptimize をクリックしましょう
「Autoptimize」の設定画面が開いたら、ここから大きく…
- JS、CSS & HTML
- 画像
- クリティカル CSS
- 追加
- さらに最適化!
という5つのタブにわけて、それぞれ設定していきます
といっても一番のメインはあくまで【JS、CSS & HTML】で、残りのタブは一瞬です🐣

【JS、CSS & HTML】タブ
「Autoptimize」の設定画面で、上部のタブ一覧から…
↑ こちらの【JS、CSS & HTML】というタブをクリックして開きます
上から順に見ていきますね🐣
【JS、CSS & HTML】タブ:「JavaScript オプション」
「JavaScript オプション」というエリアでは、まず…
↑ こちらの JavaScriptコードの最適化 にチェックを入れます
つづいて、その下に表示されている…
↑ こちらの各種項目については、通常すべて デフォルトのまま でOKです

【JS、CSS & HTML】タブ:「CSS オプション」
「CSSオプション」というエリアも、まずは…
↑ こちらの CSSコードを最適化 にチェックを入れます
つづいて、その下に表示されている…
↑ こちらの各種項目については、通常すべて デフォルトのまま でOKです

【JS、CSS & HTML】タブ:「HTML オプション」
「HTML オプション」というエリアも、まずは…
↑ こちらの HTMLコードを最適化 にチェックを入れます
つづいて、その下に表示されている…
↑ こちらの項目については、通常 デフォルトのまま でOKです
【JS、CSS & HTML】タブ:「CDN オプション」
「CDN オプション」というエリアについては、通常 デフォルトのまま でOKです
【JS、CSS & HTML】タブ:「その他オプション」
一番下の「その他オプション」というエリアについても、 デフォルトのまま です
ということで…
ここまで一通りできたら、画面下部の 変更を保存 ボタンを忘れずにクリックして、この【JS、CSS & HTML】タブは設定完了となります
お次は、【画像】タブについて見ていきましょう🐥

【画像】タブ
設定画面の上部にあるタブ一覧から、今度は…
↑ こちらの【画像】というタブをクリックして開きます
また上から見ていきますね🐣
画像を最適化
「画像を最適化」という項目では、WordPressにアップロードした画像を最適化して「容量を軽減」することで、表示スピードの向上が期待できます
ただし、WordPressにおける「画像の最適化」には…
EWWW Image Optimizer
というプラグインが定番でおすすめなので、機能の重複を避けるためにも当ブログでは…
↑ このように、 チェックなし の状態にしています
画像の遅延読み込み (Lazy-load) を利用
「画像の遅延読み込み」という項目は、一見「マイナスな機能」にも思えるかもしれませんが、むしろこの…
遅延読み込み = Lazy Load
という機能によって、「ページ表示の高速化」が期待できます
ただし!
この「遅延読み込み」機能も「EWWW Image Optimizer」側で設定できるので、こちらも「Autoptimizer」側では…
↑ このように、 チェックなし の状態にしています
関連
「画像の遅延読み込み」については、こちらをどうぞ ↓
-
【2022年】WordPress高速化におすすめな方法「6選」を初心者向けに1から解説【ブログを最適化してサイトスピード向上】
続きを見る
ということで…
もしもデフォルトの設定から変更した場合は 変更を保存 ボタンをクリックして、この【画像】タブについても設定完了です🐥

【クリティカル CSS】タブ
【クリティカル CSS】というタブについては、通常 デフォルトのまま でOKです
【追加】タブ
今度は…
↑【追加】というタブの設定について
こちらも基本的には デフォルトのまま でOKなんですが、このなかで1点だけ…
Googleフォント
という項目で、「WEBフォント」の一種である「Googleフォント」を使用していない場合には…
↑ この Googleフォントの削除 という項目を選ぶと、読み込みの軽量化につながります

補足
「自分のWordPressがGoogleフォントを使用しているかどうか?」の確認方法は、お使いのWordPressテーマなどによって変わってきます
参考までに、当ブログでも愛用中のテーマ「ACTION AFFINGER6」における、設定フォントの確認・変更手順は下記の通りです
まずは…
- WordPress管理画面の左側一覧から「AFFINGER管理」
- 「AFFINGER管理」内の左側一覧から「全体設定」タブ
の順にクリックし、そのなかの「フォントの種類」というエリアに表示されている…
↑ こちらの…
- M PLUS Rounded 1c
- Noto Sans
という2つが、Googleフォントにあたります(ほかに、特定のGoogleフォントを自分で追加していない限り)
デフォルトの設定では…
↑ このように「記事タイトル・見出し…」という項目で、Googleフォント【Noto Sans】が適用されています
これを「通常フォント」に変更するには…
↑ こちらの【使用しない】を選択し、右上の「Save」ボタンをクリックすればOKです
これで、【メイリオ】というAFFINGER標準の通常フォントに変更されます
ちなみに右側の【游ゴシック】と【游明朝】も通常フォントですが、この2つは…
↑ こちらの注釈にもあるように、一部ブラウザで「若干のズレ」が生じてしまうことから、基本的には推奨しません

なお…
現在提供されているGoogleフォントの種類については、「Google Fonts」で簡単に確認できます(「Language」というタブを開き、「Japanese」を選択!)
関連
「そもそもGoogleフォントとかWebフォントってなに…?」という場合は、こちらをどうぞ ↓
-
【2022年】Webフォントとは?通常フォントとの違いって?メリット&デメリットを初心者向けに1から解説【WordPressブログ】
続きを見る
ということで…
ここまで設定できたら、また 変更を保存 ボタンを忘れずにクリックして、この【追加】タブについても設定完了です🐥
【さらに最適化!】タブ
【さらに最適化!】というタブについては、通常 デフォルトのまま でOKです
これで、プラグイン「Autoptimize」における基本的な設定は一通り完了となります
最後に!
「Autoptimize」を使っていくうえで必ず押さえておきたい「キャッシュ」の管理について見ていきましょう🐥

\ 当ブログで愛用しています /
インフォトップ ワードプレステーマ売上
第1位※
すごいもくじLITE
の限定特典キャンペーンも実施中!!!
公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連:【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】
-
【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】
続きを見る
※2020年度Infotop売上及びInfotop Affidemy
おまけ:WordPressプラグイン「Autoptimize」で自動生成される ”ページキャッシュ” と、その削除方法について
最後に【おまけ】として、今回のプラグイン「Autoptimize」で生成される…
ページキャッシュ
について
まず「Autoptimize」を有効化すると、WordPressで最適化された各種ファイルの…
キャッシュ
というのが自動生成されて、サーバー上に保存されます
キャッシュとは、Webページの読み込み情報を…
自動的に整理して「一時保存」しておく
ことで、「次回のページ表示にかかる処理」を大幅に軽減させる仕組みです
補足
WordPressにおける「キャッシュ」は、大きく…
- ページキャッシュ
→ サイト運営者の「サーバー」側に保存されるキャッシュのこと! - ブラウザキャッシュ
→ 訪問者それぞれの「ブラウザ」側に保存されるキャッシュのこと! - その他、いくつかの専門的なキャッシュ
→ 基本的にはスルーでOK!(データベースキャッシュ、オブジェクトキャッシュなど)
という3つのパターンにわかれます
で、今回の「Autoptimize」で生成されるキャッシュというのは…
ページキャッシュ
を指します

そんなWordPressの高速化につながる「ページキャッシュ」ですが、あまり古いキャッシュファイルを残したままでいると…
- 最新のページ情報が表示されなくなったり
- WordPressがかえって重たくなったり
といったデメリットが生じかねないんですね
なので結論!
自動で生成されるこの「ページキャッシュ」については…
- 記事を投稿・更新したとき
- 設定などを変更したとき
- 1日の作業をおえたとき
など自分なりにルールを決めて、定期的に「まとめて削除」するようにしましょう
注意
この「キャッシュ削除」はあまり頻繁に行うとサーバーに負荷がかかるので、1日に多くても「数回程度」までが一般的です

まずは、WordPress管理画面の上側に表示されている…
↑「Autoptimize」という場所にカーソルを合わせましょう
すると、現在WordPressに溜まっている「キャッシュの容量」が表示されるので…
↑ こちらの Clear CSS/JS Cache というボタンをクリックするだけ🐥

▼ そのほかの「WordPress高速化」については、こちらをどうぞ ▼
-
【2022年】WordPress高速化におすすめな方法「6選」を初心者向けに1から解説【ブログを最適化してサイトスピード向上】
続きを見る
人気記事
あずきのワードプレスブログ「完全初心者」ガイド!
”全8章” の総合TOPページです
\ 当ブログで愛用しています /
インフォトップ ワードプレステーマ売上
第1位※
✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!
✔ 時間のかかる面倒なカスタマイズも「クリック1つ」でさくさく実現!
✔ 「稼ぐ」に特化した、本気で戦うための最適化&アフィリエイト機能!
すごいもくじLITE
の限定特典キャンペーンも実施中!!!
公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連:【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】
-
【1番の本質】ACTION AFFINGER6って実際おすすめ?良い点&気になる点を専業ブロガー5年目が本気レビュー【愛用テーマ】
続きを見る
※2020年度Infotop売上及びInfotop Affidemy
About me
suzu azuki
あずき鈴々
独立5年目の専業ブロガー / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^