あずきです🐥
WordPressをやるなら欠かせない定番プラグインの1つ…
Autoptimize
について、その導入手順と「設定方法＆使い方」を、ブログ初心者さん向けに1から解説していきます
まず！
この「Autoptimize」は、WordPressのブログを構成している各種「コード」を…
自動で最適化
することで、結果的に表示スピードを向上させるためのプラグインです
ちなみに！
「Autoptimize」では、上記の【メイン機能】以外にもう1つ…
WordPressキャッシュの削除
という、ブログ運営には欠かせない大事な機能も付属されています
ということで、今回のステップは4つです
- 「Autoptimize」とは？ どんな役割があるの？
- 「Autoptimize」の導入手順【インストールと有効化】
- 「Autoptimize」の基本的な設定方法
- 「Autoptimize」で、WordPressキャッシュを削除するやり方
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
-
【愛用】「WING AFFINGER5」って実際どうなの？気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ／専業ブロガー4年目】
続きを見る
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が発生してしまう可能性があります。 プラグインの使用に際しては、あらかじめデータを「バックアップ」されたうえでご自身の判断と責任のもと行ってください
-
【2021年】WordPressプラグイン「BackWPup」の基本的な設定方法を初心者向けに解説【ブログに必須な自動バックアップ】
続きを見る
※プラグインを使用されたことで生じたいかなる損失、損害につきましても当ブログでは一切の責任を負いかねます
Contents
- 1 【2021年版】WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方【コードの構成を「最適化」して表示スピードを高速化／WordPressのキャッシュ削除】
【2021年版】WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方【コードの構成を「最適化」して表示スピードを高速化／WordPressのキャッシュ削除】
ステップ①：プラグイン「Autoptimize」とは？ どんな役割があるの？【各種コードの最適化で、表示速度を向上させる】
まず1つ目のステップは…
「Autoptimize」とは？
その主な役割についてです
「Autoptimize」の主な役割は…
- JavaScript
- HTML
- CSS
といった、各種「コード」の構成を最適化することです
ブログ初心者さんにとっては、「なんのこっちゃ？」といった感じですよね
そもそも！
普段目にしているWEBサイトというのは、その画面上には映らない ”水面下” の膨大な「コード」によって形成されています
なかでも代表的なのが…
- プログラミング言語（例 JavaScript ）
- マークアップ言語（例 HTML ）
- スタイルシート（例 CSS ）
などですね
あなたのブログがユーザーの手元に表示されるときというのは、これらの各種「コード」がものすごい勢いで読み込まれていきます
ということは…
コードの構成に実質的な「ムダ」があると、それだけページ表示に時間がかかってしまうということ
そんな各種コードの構成を…
自動で整えて最適化
してくれるのが、今回の「Autoptimize」です
ちなみに！
ブログの「表示スピード」を測るツールとして代表的な「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) を利用」という項目では、初めて聞いた人にとってはマイナスな機能にも思えるかもしれませんが、むしろこの…
遅延読み込み＝Lazy Load
という機能によって、ページ表示の高速化が期待できます
なので基本的には…
↑ チェックを入れておくのがおすすめです
関連
「画像の遅延読み込みってそもそもなに…？」という場合は、こちらをどうぞ ↓
-
ブログの「Lazy Load」機能とは？「画像の遅延読み込み」で、ページ表示速度を高速化しよう【WordPressブログ】
続きを見る
重要
そのほかのプラグインやテーマ側の機能などで「Lazy Load＝遅延読み込み」機能がすでに有効になっている場合は、重複を避けるために、この「遅延読み込み」の項目はチェックを外します
ちなみにこのブログでは、WordPressテーマ「WING AFFINGER5」専用の…
LazyLoad SEO
という「遅延読み込み」の有料プラグインを使っているので、「EWWW Image Optimizer」側の「遅延読み込み」の項目はチェックを外しています
※SEO対策を維持しつつ、遅延読み込みを有効にするプラグインです
ちなみに！
この「画像の遅延読み込み (Lazy-load) を利用」にチェックを入れると、その下に…
↑ このように新たな項目が表示されますが、この追加項目については、通常すべて「デフォルトのまま」でOKです
ということで…
ここまで設定できたら、また「変更を保存」ボタンを忘れずにクリックして、この【画像】タブについても設定完了です🐥
【クリティカル CSS】タブ
↑ こちらの【クリティカル CSS】というタブについては、通常そのままでOKです
【追加】タブ
今度は…
↑ こちらの【追加】というタブの設定について
ここも基本的には「デフォルトのまま」でOKなんですが、1点だけ…
↑ こちらの「Google フォント」という項目で、WEBフォントの一種「Googleフォント」を現在使っていない場合には…
↑ このように「Google フォントの削除」という設定を選んでおくと、読み込みの軽量化につながります
関連
「そもそもWEBフォントってなに…？」という場合は、こちらをどうぞ ↓
-
「Webフォント」とは？通常のフォントとの違いって？メリット＆デメリットを初心者向けに優しく解説
続きを見る
「Googleフォントを削除するかどうか迷う…」という場合は、こちら ↓
-
WordPressで、Webフォント「Googleフォント」の削除は実際するべきか？【サイト表示の高速化】
続きを見る
ということで…
ここまで設定できたら、また「変更を保存」ボタンを忘れずにクリックして、この【追加】タブについても設定完了です🐥
【さらに最適化！】タブ
最後に…
↑ こちらの【さらに最適化！】というタブについては、通常そのままでOKです
これで、プラグイン「Autoptimize」における基本的な設定は一通り完了となります
最後に…
「Autoptimize」のもう1つの機能である、「WordPressキャッシュの削除」について見ていきましょう🐥
＼「超強力」なサイト改善と効率化 ／
―― 効果のある広告やリンクを徹底解析 ――
「AFFINGERタグ管理マネージャー3 + PVモニター」
プラグインセット
※WordPressテーマ「WING AFFINGER5」専用のプラグインです（ver20181120以上必須）
※「STINGERタグ管理プラグイン3」から移行する場合、登録済みのタグデータはそのまま引き継ぐことができます
PDFマニュアル「AffiliateRun～なぜ売れないか？」付き！
ステップ④：プラグイン「Autoptimize」で、WordPressキャッシュを削除するやり方【WordPress管理画面から、簡単1クリック】
冒頭でもお伝えした通り、プラグイン「Autoptimize」では「コードの最適化」というメイン機能以外に、もう1つ…
WordPressキャッシュの削除
という、ブログ運営には欠かせない大事な機能も付属されています
関連
「そもそもキャッシュってなに…？」という場合は、こちらをどうぞ ↓
-
ネットで見かける「キャッシュ」とは何なのか？役割は？知っておくべき2つのデメリットと、その対策【キャッシュ削除】
続きを見る
手順はいたって簡単で、WordPress管理画面の上側に表示されている…
↑ こちらの、「Autoptimize」という場所にカーソルを合わせましょう
すると…
↑ このように、現在WordPressに溜まっている「キャッシュの容量」が表示されるので、その下側の…
キャッシュを削除
という項目をクリックするだけ
この「キャッシュ削除」を行うタイミングや頻度については任意ですが、参考までに自分の場合は…
- 記事を投稿・更新したとき
- 設定などを変更したとき
- 1日の作業をおえたとき
という感じです
サーバーへの負荷を考慮すると、「1日1回～多くても数回」くらいの頻度がわりと一般的だと思います🐥
関連
▼ WordPressの「おすすめプラグイン一覧」についてはこちら ▼
-
【2021年】WordPressで愛用中のおすすめプラグイン14選と、設定方法＆使い方を初心者向けに1から解説【専業ブロガー4年目が厳選】
続きを見る
今回の記事はこちらの章に属しています
＼ このブログでも愛用中！／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現
✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
-
WordPressの「タグ管理」とは？どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化／一括修正が最強に便利】
続きを見る
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^