あずきです🐥
WordPressをやるなら欠かせない定番プラグインの1つ…
Autoptimize
について、その導入手順と「設定方法＆使い方」を、ブログ初心者さん向けに1から解説していきます
まず！
この「Autoptimize」は、WordPressのブログを構成している各種「コード」を…
自動で最適化
することで、結果的に表示スピードを向上させるためのプラグインです
ということで、今回のステップは4つです
- 「Autoptimize」とは？ どんな役割があるの？
- 「Autoptimize」の導入手順【インストールと有効化】
- 「Autoptimize」の基本的な設定方法
- 「Autoptimize」で自動生成される ”ページキャッシュ” と、その管理について
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
Contents
- 【2021年】「Autoptimize」の設定方法と使い方を初心者向けに解説【WordPressプラグイン／コードの最適化でサイトスピードを高速化】
【2021年】「Autoptimize」の設定方法と使い方を初心者向けに解説【WordPressプラグイン／コードの最適化でサイトスピードを高速化】
ステップ１：プラグイン「Autoptimize」とは？ どんな役割があるの？【JavaScript・HTML・CSSなど、各種コードを最適化してWordPressを高速化】
まず1つ目のステップは…
「Autoptimize」とは？
その役割についてです
「Autoptimize」の主な役割は、WordPressを水面下で構成している…
- HTML
- CSS
- JavaScript
といった各種ソースコードを「最適化」して、サイズを軽減させること
ちなみに！
ここで言う「最適化」とは、例えば…
- コード内のスペースや改行などを詰めて「縮小」させたり
- コードが記載された複数のファイルを「連結」させたり
といった処理を指します
ちなみに！
ブログの「表示スピード」を測るツールとして代表的な「PageSpeed Insights」というGoogleの無料ツールがあるんですが、計測した後の「改善点」のところに…
レンダリングを妨げるリソースの除外
という項目が、わりとよく出てくるんですね
これがまさに、今回のテーマである…
- レンダリング → WEBサイトを構成している各種「コード」を読みこんで、実際のページを表示させること！
- を妨げるリソース → コード構成にムダがあって読みこみが遅れてしまう、その「原因」となっている部分！
- の除外 → 上記のムダとなっている部分を「最適化」して、ページの読み込みをなるべくスムーズにしよう！
といった意味になります
また「Autoptimize」では、そんな「コードの最適化」以外に…
- 画像ファイルの最適化
- Googleフォントの削除
- ページキャッシュの生成・管理
といった、同じく「WordPressの高速化」につながる機能も付属されています
ということで、お次はプラグインの導入手順を見ていきましょう🐥
ステップ２：プラグイン「Autoptimize」をWordPressに導入する手順【インストールと有効化】
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください
つづいて2つ目のステップは…
「Autoptimize」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Autoptimize と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Autoptimize」を探し、右上の「今すぐインストール」ボタンをクリックします
「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう
↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール＆有効化」は完了です
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
ステップ３：プラグイン「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
というプラグインが定番でおすすめなので、機能の重複を避けるためにも自分はチェックを外しています
つづいてその下の…
↑「画像の遅延読み込み」という項目について、こちらは一見「マイナスな機能」にも思えるかもしれませんが、むしろこの…
遅延読み込み＝Lazy Load
という機能によって、「ページ表示の高速化」が期待できます
ただし！
この「遅延読み込み」機能も「EWWW Image Optimizer」側で設定できるので、こちらも「Autoptimizer」側ではチェックを外しています
関連
「画像の遅延読み込み」については、こちらをどうぞ ↓
-
【2021年】WordPress高速化におすすめな方法「7選」を初心者向けに1から解説【ブログを最適化してサイトスピード向上】
続きを見る
ということで…
もしもデフォルトの設定から変更した場合は「変更を保存」ボタンをクリックして、この【画像】タブについても設定完了です🐥
【クリティカル CSS】タブ
↑ こちらの【クリティカル CSS】というタブについては、通常そのままでOKです
【追加】タブ
今度は…
↑ こちらの【追加】というタブの設定について
ここも基本的には「デフォルトのまま」でOKなんですが、1点だけ…
↑ こちらの「Google フォント」という項目で、WEBフォントの一種「Googleフォント」を現在使っていない場合には…
↑ このように「Google フォントの削除」という設定を選んでおくと、読み込みの軽量化につながります
ということで…
ここまで設定できたら、また「変更を保存」ボタンを忘れずにクリックして、この【追加】タブについても設定完了です🐥
【さらに最適化！】タブ
最後に…
↑ こちらの【さらに最適化！】というタブについては、通常そのままでOKです
これで、プラグイン「Autoptimize」における基本的な設定は一通り完了となります
最後に！
「Autoptimize」を使っていくうえで必ず押さえておきたい「キャッシュ」の管理について見ていきましょう🐥
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
ステップ４：プラグイン「Autoptimize」で自動生成される ”ページキャッシュ” と、その管理について【古いキャッシュは定期的に削除】
4つ目のステップは、プラグイン「Autoptimize」で生成される…
ページキャッシュ
について
まず！
「Autoptimize」を有効化すると、WordPressで最適化された各種ファイルの…
キャッシュ
というのが自動生成されて、サーバー上に保存されます
キャッシュとは、Webページの読み込み情報を…
自動的に整理して「一時保存」しておく
ことで、「次回のページ表示にかかる処理」を大幅に軽減させる仕組みです
補足
WordPressにおける「キャッシュ」は、大きく…
- ページキャッシュ ※運営者が契約している「サーバー」側に保存されるキャッシュのこと！
- ブラウザキャッシュ ※訪問者それぞれの「ブラウザ」側に保存されるキャッシュのこと！
- その他、いくつかの専門的なキャッシュ ※基本的にはスルーでOK！（データベースキャッシュ、オブジェクトキャッシュなど）
この【3パターン】にわかれます
で、今回の「Autoptimize」で生成されるキャッシュというのは…
ページキャッシュ
を指します
そんなWordPressの高速化につながる「ページキャッシュ」ですが、あまり古いキャッシュファイルを残したままでいると…
- 最新のページ情報が表示されなくなったり
- WordPressがかえって重たくなったり
といったデメリットが生じかねないんですね
なので結論！
自動で生成されるこの「ページキャッシュ」については…
- 記事を投稿・更新したとき
- 設定などを変更したとき
- 1日の作業をおえたとき
など自分なりにルールを決めて、定期的に「まとめて削除」するようにしましょう
注意
この「キャッシュ削除」はあまり頻繁に行うとサーバーに負荷がかかるので、1日に多くても「数回程度」までが一般的だと思います
WordPress管理画面の上側に表示されている…
↑ こちらの、「Autoptimize」という場所にカーソルを合わせましょう
すると…
↑ このように、現在WordPressに溜まっている「キャッシュの容量」が表示されるので、その下側の…
キャッシュを削除
という項目をクリックするだけ
あわせてどうぞ
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全９章のTOPページです
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性！
✔ 時間のかかる面倒なカスタマイズも「クリック１つ」でさくさく実現！
✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能！
今ならワードプレスプラグイン
「すごいもくじLITE」
の限定特典配布キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
ACTION AFFINGER6は新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020