WORDPRESS

【2021年】WordPressプラグイン「Autoptimize」の設定方法と使い方【コードの最適化で表示スピードを高速化/ページキャッシュの生成&削除】

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 アイキャッチ
 

あずきです🐥

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

Autoptimize

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

 

まず!

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

自動で最適化

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

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

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

  1. 「Autoptimize」とは? どんな役割があるの?
  2. 「Autoptimize」の導入手順【インストールと有効化】
  3. 「Autoptimize」の基本的な設定方法
  4. 「Autoptimize」で自動生成される ”ページキャッシュ” と、その管理について

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

 

\ 本気で戦うなら /

WING AFFINGER5 バナー 02

―― 検証と改善を重ねた唯一無二のテーマ ――

「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

「WING AFFINGER5」の気に入ってる点・気になる点をガチレビュー アイキャッチ
【愛用】「WING AFFINGER5」って実際どうなの?気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ/専業ブロガー4年目】

続きを見る

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 
 

注意

プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください

 

関連:WordPressプラグイン「BackWPup」の設定方法を初心者向けに解説【ブログに必須な自動バックアップ】

 

【2021年版】WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方【WordPressのコードや画像の最適化/キャッシュの生成と削除】

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

WordPressブログ「完全初心者」ガイド 見出し a-01

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

「Autoptimize」とは?

その役割についてです

 

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

  • HTML
  • CSS
  • JavaScript

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

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

ちなみに!

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

  • コード内のスペースや改行などを詰めて「縮小」させたり
  • コードが記載された複数のファイルを「連結」させたり

といった処理を指します

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

ちなみに!

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

レンダリングを妨げるリソースの除外

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

 

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

  • レンダリング → WEBサイトを構成している各種「コード」を読みこんで、実際のページを表示させること!
  • を妨げるリソース → コード構成にムダがあって読みこみが遅れてしまう、その「原因」となっている部分!
  • の除外 → 上記のムダとなっている部分を「最適化」して、ページの読み込みをなるべくスムーズにしよう!

といった意味になります

 

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

  • 画像ファイルの最適化
  • Googleフォントの削除
  • ページキャッシュの生成・管理

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

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

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

 

 

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

WordPressブログ「完全初心者」ガイド 見出し a-02

つづいて…

「Autoptimize」の導入手順

について

 

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-2-01

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

 

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-2-02

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-2-03-a

↑ このアイコンが目印のプラグイン「Autoptimize」を探します

 

無事見つかったら…

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-2-03-b

↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-2-03-c

↑ このように「有効化」という表示に切り替わったことを確認したら、こちらの「有効化」ボタンもクリックして、プラグインの導入は完了になります🐥

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

 

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

WordPressブログ「完全初心者」ガイド 見出し a-03

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

「Autoptimize」の基本的な設定方法

について

 

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-top-01

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

 

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-top-02

↑ こちらの…

  • 【JS、CSS & HTML】タブ
  • 【画像】タブ
  • 【クリティカル CSS】タブ
  • 【追加】タブ
  • 【さらに最適化!】タブ

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

 

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

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

【JS、CSS & HTML】タブ

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-top

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

 

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

 
【JS、CSS & HTML】タブ:「JavaScript オプション」
 
WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-1-top

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-1-01

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

 

するとその下に…

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-1-02

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

 

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

 

注意

ほかのプラグインなどで同様の機能をすでに有効にしている項目については、機能の重複を避けるために、どちらか一方は「オフ」にしておくのが無難です

 

特に「WP Fastest Cache」というプラグインを入れている場合、そのなかの…

  • JSの結合

という項目が、上画像の「JS ファイルを連結する」という項目と重複しているので、「WP Fastest Cache」側の「JSの結合」をオフにします

 

※「WP Fastest Cache」はあくまで「キャッシュ管理」がメインなので、上記のように「コードの最適化」関連の重複する項目については、「Autoptimize」側を優先という判断です

 
つづいてその下の、「CSS オプション」という場所を見ていくよ!
 
【JS、CSS & HTML】タブ:「CSS オプション」
 
WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-2-top

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-2-01

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

 

すると、またその下に…

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-2-02

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

 

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

 

注意

この「CSS オプション」エリアも、「WP Fastest Cache」を入れている場合はそのなかの…

  • CSSの圧縮
  • CSSの結合

という2つの項目と重複しているので、「WP Fastest Cache」側の2項目はオフにしておきます

 
お次はその下の、「HTML オプション」という場所について!
 
【JS、CSS & HTML】タブ:「HTML オプション」
 
WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-3-top

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-3-01

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

 

すると、またその下に…

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-3-02

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

 

注意

この「HTML オプション」エリアも、「WP Fastest Cache」を入れている場合はそのなかの…

  • HTMLの圧縮

という項目と重複しているので、「WP Fastest Cache」側の上記項目はオフにしておきます

 
【JS、CSS & HTML】タブ:「CDN オプション」
 
WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-4-top

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

 
【JS、CSS & HTML】タブ:「その他オプション」
 
WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-1-5-top

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

 

ということで…

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

 

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

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

 

【画像】タブ

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-2-top

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

 

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

 
WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-2-01

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

 

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

EWWW Image Optimizer

というプラグインが定番でおすすめなので、機能の重複を避けるためにも、ここはチェックを入れないままでOKです

 
 

つづいてその下の…

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-2-02

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

遅延読み込み=Lazy Load

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

 

ただし!

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

 

関連

 

ということで…

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

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

【クリティカル CSS】タブ

 
WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-3-top

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

 

【追加】タブ

今度は…

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-4-top

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

 

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-4-01-a

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-4-01-b

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

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

ということで…

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

 

【さらに最適化!】タブ

最後に…

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-3-5-top

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

 

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

 

最後に!

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

一瞬だよ!

\ 本気で成果にこだわるなら /

AFFINGERタグ管理マネージャー3 01

―― 効果のある広告やリンクを徹底解析 ――

「超強力」なサイト改善と効率化!「AFFINGERタグ管理マネージャー3 + PVモニター」プラグインセット

※「STINGERタグ管理プラグイン3」のデータはそのまま使用できます

「WING AFFINGER5」及び「WING STINGER PRO2」専用プラグイン

 

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

WordPressブログ「完全初心者」ガイド 見出し a-04

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

ページキャッシュ

について

 

まず!

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

キャッシュ

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

 

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

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

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

 

重要

WordPressにおける「キャッシュ」は、大きく…

  1. ページキャッシュ ※運営者が契約している「サーバー」側に保存されるキャッシュのこと!
  2. ブラウザキャッシュ ※訪問者それぞれの「ブラウザ」側に保存されるキャッシュのこと!
  3. その他、いくつかの専門的なキャッシュ ※基本的にはスルーでOK!(データベースキャッシュ、オブジェクトキャッシュなど)

この【3パターン】にわかれます

 

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

ページキャッシュ

を指します

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

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

  • 最新のページ情報が表示されなくなったり
  • WordPressがかえって重たくなったり

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

 

なので結論!

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

  • 記事を投稿・更新したとき
  • 設定などを変更したとき
  • 1日の作業をおえたとき

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

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

注意

この「キャッシュ削除」はあまり頻繁に行うとサーバーに負荷がかかるので、1日に多くても「数回程度」までが一般的だと思います

 

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

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-4-01-a

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

 

すると…

WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方 1-4-01-b

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

キャッシュを削除

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

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

今回の記事はこちらの章に属しています

WordPressブログガイド 第4章「プラグイン」編 

あずきのWordPressブログガイド 総合TOP 

\ このブログでも愛用中! /

WING AFFINGER5 banner-large-01

―― 検証と改善を重ねた唯一無二のテーマ ――

WING AFFINGER5

 ✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備!

今なら超時短ツール「タグ管理プラグイン(税込4,980円)」を無料配布中!

公式:「稼ぐ」に特化したWordPress テーマ『WING AFFINGER5』

関連:「WING AFFINGER5」気に入ってる点・気になる点をガチレビュー

WordPressの「タグ管理」とは? アイキャッチ
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】

続きを見る

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS

© 2019 あずきのぶろぐ