WORDPRESS

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

「Autoptimize」の設定方法と使い方
 

あずきです🐥

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

Autoptimize

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

 

まず!

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

自動で最適化

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

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

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

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

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

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

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

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

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

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

WordPress ヘッダー c-01

 

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

「Autoptimize」とは?

その役割についてです

 

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

  • HTML
  • CSS
  • JavaScript

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

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

ちなみに!

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

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

といった処理を指します

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

ちなみに!

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

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

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

 

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

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

といった意味になります

 

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

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

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

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

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

 

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

WordPress ヘッダー c-02

 

注意

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

 

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

 

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

「Autoptimize」の導入手順

について

 

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

WordPressプラグイン インストール 1-01

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

 

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

WordPressプラグイン インストール 1-02

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

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

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

 

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

WordPressプラグイン インストール 1-03

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

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

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

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

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

WordPress ヘッダー c-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

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

 
 

つづいてその下の…

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

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

遅延読み込み=Lazy Load

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

 

ただし!

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

 
 

ということで…

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

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

【クリティカル 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」を使っていくうえで必ず押さえておきたい「キャッシュ」の管理について見ていきましょう🐥

一瞬だよ!

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

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

 

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

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

WordPress ヘッダー c-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に溜まっている「キャッシュの容量」が表示されるので、その下側の…

キャッシュを削除

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

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

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

 第4章 プラグイン 編         

次の章はこちらからどうぞ

 第5章 サイトマップ 編        

全9章のTOPページです

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

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

ACTION AFFINGER6

 

   ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

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

   ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

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

ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

-WORDPRESS