あずきです🐥
WordPressをやるなら欠かせない定番プラグインの1つ…
Autoptimize
について、その導入手順と「設定方法＆使い方」を、ブログ初心者さん向けに1から解説していきます
まず！
この「Autoptimize」は、WordPressのブログを構成している各種「コード」を…
自動で最適化
することで、結果的に表示スピードを向上させるためのプラグインです
ということで、今回のステップは4つです
- 「Autoptimize」とは？ どんな役割があるの？
- 「Autoptimize」の導入手順【インストールと有効化】
- 「Autoptimize」の基本的な設定方法
- 「Autoptimize」で自動生成される ”ページキャッシュ” と、その管理について
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
＼ 本気で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』
今なら超時短ツール「タグ管理プラグイン（税込4,980円）」を無料配布中！
-
【愛用】「WING AFFINGER5」って実際どうなの？気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ／専業ブロガー4年目】
続きを見る
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください
目次
【2021年版】WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方【WordPressのコードや画像の最適化／キャッシュの生成と削除】
ステップ①：プラグイン「Autoptimize」とは？ どんな役割があるの？【JavaScript・HTML・CSSなど、各種コードを最適化してWordPressを高速化】
まず1つ目のステップは…
「Autoptimize」とは？
その役割についてです
「Autoptimize」の主な役割は、WordPressを水面下で構成している…
- HTML
- CSS
- JavaScript
といった各種ソースコードを「最適化」して、サイズを軽減させること
ちなみに！
ここで言う「最適化」とは、例えば…
- コード内のスペースや改行などを詰めて「縮小」させたり
- コードが記載された複数のファイルを「連結」させたり
といった処理を指します
ちなみに！
ブログの「表示スピード」を測るツールとして代表的な「PageSpeed Insights」というGoogleの無料ツールがあるんですが、計測した後の「改善点」のところに…
レンダリングを妨げるリソースの除外
という項目が、わりとよく出てくるんですね
これがまさに、今回のテーマである…
- レンダリング → WEBサイトを構成している各種「コード」を読みこんで、実際のページを表示させること！
- を妨げるリソース → コード構成にムダがあって読みこみが遅れてしまう、その「原因」となっている部分！
- の除外 → 上記のムダとなっている部分を「最適化」して、ページの読み込みをなるべくスムーズにしよう！
といった意味になります
また「Autoptimize」では、そんな「コードの最適化」以外に…
- 画像ファイルの最適化
- Googleフォントの削除
- ページキャッシュの生成・管理
といった、同じく「WordPressの高速化」につながる機能も付属されています
ということで、お次はプラグインの導入手順を見ていきましょう🐥
ステップ②：プラグイン「Autoptimize」をWordPressに導入する手順【インストールと有効化】
つづいて…
「Autoptimize」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Autoptimize と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Autoptimize」を探します
無事見つかったら…
↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…
↑ このように「有効化」という表示に切り替わったことを確認したら、こちらの「有効化」ボタンもクリックして、プラグインの導入は完了になります🐥
ステップ③：プラグイン「Autoptimize」の基本的な設定方法【各種コードや画像などの最適化設定】
つづいて3つ目のステップは…
「Autoptimize」の基本的な設定方法
について
WordPress管理画面の一覧メニューから…
↑ 設定 ＞ Autoptimize をクリックしましょう
「Autoptimize」の設定画面が開いたら、ここから大きく…
↑ こちらの…
- 【JS、CSS & HTML】タブ
- 【画像】タブ
- 【クリティカル CSS】タブ
- 【追加】タブ
- 【さらに最適化！】タブ
という5つの「タブ」にわけて、それぞれ設定していきます
といっても、1番のメインはあくまで【JS、CSS & HTML】タブで、残りのタブは一瞬です🐣
【JS、CSS & HTML】タブ
「Autoptimize」の設定画面で、上側のタブ一覧から…
↑ こちらの【JS、CSS & HTML】というタブをクリックして開きます
上から順に見ていきますね🐣
【JS、CSS & HTML】タブ：「JavaScript オプション」
↑「JavaScript オプション」というエリアでは、まず…
↑ こちらの「JavaScript コードの最適化」にチェックを入れます
するとその下に…
↑ このように、新たな項目が表示されます
こちらの追加項目については、通常すべて「デフォルトのまま」でOKです
注意
ほかのプラグインなどで同様の機能をすでに有効にしている項目については、機能の重複を避けるために、どちらか一方は「オフ」にしておくのが無難です
特に「WP Fastest Cache」というプラグインを入れている場合、そのなかの…
- JSの結合
という項目が、上画像の「JS ファイルを連結する」という項目と重複しているので、「WP Fastest Cache」側の「JSの結合」をオフにします
※「WP Fastest Cache」はあくまで「キャッシュ管理」がメインなので、上記のように「コードの最適化」関連の重複する項目については、「Autoptimize」側を優先という判断です
【JS、CSS & HTML】タブ：「CSS オプション」
↑「CSS オプション」というエリアも、まずは…
↑ こちらの「CSS コードを最適化」にチェックを入れます
すると、またその下に…
↑ このように、新たな項目が表示されます
こちらの追加項目も、通常はすべて「デフォルトのまま」でOKです
注意
この「CSS オプション」エリアも、「WP Fastest Cache」を入れている場合はそのなかの…
- CSSの圧縮
- CSSの結合
という2つの項目と重複しているので、「WP Fastest Cache」側の2項目はオフにしておきます
【JS、CSS & HTML】タブ：「HTML オプション」
↑「HTML オプション」というエリアも、まずは…
↑ こちらの「HTML コードを最適化」にチェックを入れます
すると、またその下に…
↑ このように新たな項目が表示されますが、こちらも通常は「デフォルトのまま」でOKです
注意
この「HTML オプション」エリアも、「WP Fastest Cache」を入れている場合はそのなかの…
- HTMLの圧縮
という項目と重複しているので、「WP Fastest Cache」側の上記項目はオフにしておきます
【JS、CSS & HTML】タブ：「CDN オプション」
↑「CDN オプション」というエリアについては、通常デフォルトのままでOKです
【JS、CSS & HTML】タブ：「その他オプション」
↑ 1番下の「その他オプション」というエリアについても、通常デフォルトのままです
ということで…
ここまで一通りできたら、「変更を保存」ボタンを忘れずにクリックして、この【JS、CSS & HTML】タブは設定完了となります
お次は、【画像】タブについて見ていきましょう🐥
【画像】タブ
また設定画面の上側にあるタブ一覧から、今度は…
↑ こちらの【画像】というタブをクリックして開きます
また上から見ていきますね🐣
↑「画像を最適化」という項目では、WordPressにアップロードした画像を最適化して「容量を軽減」することで、表示スピードの向上が期待できます
ただし、WordPressにおける「画像の最適化」には…
EWWW Image Optimizer
というプラグインが定番でおすすめなので、機能の重複を避けるためにも、ここはチェックを入れないままでOKです
つづいてその下の…
↑「画像の遅延読み込み」という項目について、こちらは一見「マイナスな機能」にも思えるかもしれませんが、むしろこの…
遅延読み込み＝Lazy Load
という機能によって、「ページ表示の高速化」が期待できます
ただし！
この「遅延読み込み」機能も「EWWW Image Optimizer」側で設定できるので、こちらの「Autoptimizer」側では「チェックを入れないまま」でOKです
関連
「画像の遅延読み込みってそもそもなに…？」という場合は、こちらをどうぞ ↓
-
ブログの「Lazy Load」機能とは？「画像の遅延読み込み」で、ページ表示速度を高速化しよう【WordPressブログ】
続きを見る
ということで…
もしもデフォルトの設定から変更した場合は「変更を保存」ボタンをクリックして、この【画像】タブについても設定完了です🐥
【クリティカル CSS】タブ
↑ こちらの【クリティカル CSS】というタブについては、通常そのままでOKです
【追加】タブ
今度は…
↑ こちらの【追加】というタブの設定について
ここも基本的には「デフォルトのまま」でOKなんですが、1点だけ…
↑ こちらの「Google フォント」という項目で、WEBフォントの一種「Googleフォント」を現在使っていない場合には…
↑ このように「Google フォントの削除」という設定を選んでおくと、読み込みの軽量化につながります
ということで…
ここまで設定できたら、また「変更を保存」ボタンを忘れずにクリックして、この【追加】タブについても設定完了です🐥
【さらに最適化！】タブ
最後に…
↑ こちらの【さらに最適化！】というタブについては、通常そのままでOKです
これで、プラグイン「Autoptimize」における基本的な設定は一通り完了となります
最後に！
「Autoptimize」を使っていくうえで必ず押さえておきたい「キャッシュ」の管理について見ていきましょう🐥
＼ 本気で成果にこだわるなら ／
―― 効果のある広告やリンクを徹底解析 ――
「超強力」なサイト改善と効率化！「AFFINGERタグ管理マネージャー3 + PVモニター」プラグインセット
※「STINGERタグ管理プラグイン3」のデータはそのまま使用できます
「WING AFFINGER5」及び「WING STINGER PRO2」専用プラグイン
ステップ④：プラグイン「Autoptimize」で自動生成される ”ページキャッシュ” と、その管理について【古いキャッシュは定期的に削除】
4つ目のステップは、プラグイン「Autoptimize」で生成される…
ページキャッシュ
について
まず！
「Autoptimize」を有効化すると、WordPressで最適化された各種ファイルの…
キャッシュ
というのが自動生成されて、サーバー上に保存されます
キャッシュとは、Webページの読み込み情報を…
自動的に整理して「一時保存」しておく
ことで、「次回のページ表示にかかる処理」を大幅に軽減させる仕組みです
重要
WordPressにおける「キャッシュ」は、大きく…
- ページキャッシュ ※運営者が契約している「サーバー」側に保存されるキャッシュのこと！
- ブラウザキャッシュ ※訪問者それぞれの「ブラウザ」側に保存されるキャッシュのこと！
- その他、いくつかの専門的なキャッシュ ※基本的にはスルーでOK！（データベースキャッシュ、オブジェクトキャッシュなど）
この【3パターン】にわかれます
で、今回の「Autoptimize」で生成されるキャッシュというのは…
ページキャッシュ
を指します
そんなWordPressの高速化につながる「ページキャッシュ」ですが、あまり古いキャッシュファイルを残したままでいると…
- 最新のページ情報が表示されなくなったり
- WordPressがかえって重たくなったり
といったデメリットが生じかねないんですね
なので結論！
自動で生成されるこの「ページキャッシュ」については…
- 記事を投稿・更新したとき
- 設定などを変更したとき
- 1日の作業をおえたとき
など自分なりにルールを決めて、定期的に「まとめて削除」するようにしましょう
注意
この「キャッシュ削除」はあまり頻繁に行うとサーバーに負荷がかかるので、1日に多くても「数回程度」までが一般的だと思います
WordPress管理画面の上側に表示されている…
↑ こちらの、「Autoptimize」という場所にカーソルを合わせましょう
すると…
↑ このように、現在WordPressに溜まっている「キャッシュの容量」が表示されるので、その下側の…
キャッシュを削除
という項目をクリックするだけ
関連
今回の記事はこちらの章に属しています
＼ このブログでも愛用中！ ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション！
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現！
✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備！
今なら超時短ツール「タグ管理プラグイン（税込4,980円）」を無料配布中！
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にわりといるので、覗いてもらえると嬉しいです^^