WORDPRESS

【2021年】WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方【コードの最適化で、ブログの表示スピードを高速化/キャッシュ削除】

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

あずきです🐥

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

Autoptimize

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

 

まず!

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

自動で最適化

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

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

ちなみに!

「Autoptimize」では、上記の【メイン機能】以外にもう1つ…

WordPressキャッシュの削除

という、ブログ運営には欠かせない大事な機能も付属されています

 

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

  1. 「Autoptimize」とは? どんな役割があるの?
  2. 「Autoptimize」の導入手順【インストールと有効化】
  3. 「Autoptimize」の基本的な設定方法
  4. 「Autoptimize」で、WordPressキャッシュを削除するやり方

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

 

\「本気」で戦うなら /

WING AFFINGER5 バナー 02

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

WING AFFINGER5

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

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

続きを見る

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

続きを見る

 
 

注意

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

 
WordPressプラグイン「BackWPup」の基本的な設定方法 アイキャッチ
【2021年】WordPressプラグイン「BackWPup」の基本的な設定方法を初心者向けに解説【ブログに必須な自動バックアップ】

続きを見る

※プラグインを使用されたことで生じたいかなる損失、損害につきましても当ブログでは一切の責任を負いかねます

 

【2021年版】WordPressプラグイン「Autoptimize」の基本的な設定方法と使い方【コードの構成を「最適化」して表示スピードを高速化/WordPressのキャッシュ削除】

ステップ①:プラグイン「Autoptimize」とは? どんな役割があるの?【各種コードの最適化で、表示速度を向上させる】

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

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

「Autoptimize」とは?

その主な役割についてです

 

「Autoptimize」の主な役割は…

  • JavaScript
  • HTML
  • CSS

といった、各種「コード」の構成を最適化することです

 

ブログ初心者さんにとっては、「なんのこっちゃ?」といった感じですよね

経験談…
 

そもそも!

普段目にしているWEBサイトというのは、その画面上には映らない ”水面下” の膨大な「コード」によって形成されています

 

なかでも代表的なのが…

  • プログラミング言語(例 JavaScript )
  • マークアップ言語(例 HTML )
  • スタイルシート(例 CSS )

などですね

 

あなたのブログがユーザーの手元に表示されるときというのは、これらの各種「コード」がものすごい勢いで読み込まれていきます

 

ということは…

コードの構成に実質的な「ムダ」があると、それだけページ表示に時間がかかってしまうということ

表示スピードの遅さは、ブロガーにとっては死活問題である
 

そんな各種コードの構成を…

自動で整えて最適化

してくれるのが、今回の「Autoptimize」です

 

ちなみに!

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

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

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

 

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

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

といった意味になります

 

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

  • 「画像」の最適化
  • 「Googleフォント」の削除

といった、同じく「表示スピード向上」につながる機能も任意で設定できたり…

「WordPressキャッシュ」の削除

という、「古い読み込みデータを消去して画面の表示を更新する」ためのサブ機能も付属しています

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

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

 

 

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

WordPressブログ「完全初心者」ガイド 見出し c-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ブログ「完全初心者」ガイド 見出し 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

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

 
 

つづいてその下の…

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

↑「画像の遅延読み込み (Lazy-load) を利用」という項目では、初めて聞いた人にとってはマイナスな機能にも思えるかもしれませんが、むしろこの…

遅延読み込み=Lazy Load

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

 

なので基本的には…

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

↑ チェックを入れておくのがおすすめです

 

関連

 

重要

そのほかのプラグインやテーマ側の機能などで「Lazy Load=遅延読み込み」機能がすでに有効になっている場合は、重複を避けるために、この「遅延読み込み」の項目はチェックを外します

 

ちなみにこのブログでは、WordPressテーマ「WING AFFINGER5」専用の…

LazyLoad SEO

という「遅延読み込み」の有料プラグインを使っているので、「EWWW Image Optimizer」側の「遅延読み込み」の項目はチェックを外しています

※SEO対策を維持しつつ、遅延読み込みを有効にするプラグインです

 

ちなみに!

この「画像の遅延読み込み (Lazy-load) を利用」にチェックを入れると、その下に…

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

↑ このように新たな項目が表示されますが、この追加項目については、通常すべて「デフォルトのまま」で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」のもう1つの機能である、「WordPressキャッシュの削除」について見ていきましょう🐥

一瞬だよ!

\「超強力」なサイト改善と効率化 /

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

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

「AFFINGERタグ管理マネージャー3 + PVモニター」

プラグインセット

※WordPressテーマ「WING AFFINGER5」専用のプラグインです(ver20181120以上必須)
※「STINGERタグ管理プラグイン3」から移行する場合、登録済みのタグデータはそのまま引き継ぐことができます

PDFマニュアル「AffiliateRun~なぜ売れないか?」付き!

 

ステップ④:プラグイン「Autoptimize」で、WordPressキャッシュを削除するやり方【WordPress管理画面から、簡単1クリック】

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

冒頭でもお伝えした通り、プラグイン「Autoptimize」では「コードの最適化」というメイン機能以外に、もう1つ…

WordPressキャッシュの削除

という、ブログ運営には欠かせない大事な機能も付属されています

 
 

手順はいたって簡単で、WordPress管理画面の上側に表示されている…

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

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

 

すると…

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

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

キャッシュを削除

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

これで、蓄積されてたキャッシュが空になるよ!
 

この「キャッシュ削除」を行うタイミングや頻度については任意ですが、参考までに自分の場合は…

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

という感じです

 

サーバーへの負荷を考慮すると、「1日1回~多くても数回」くらいの頻度がわりと一般的だと思います🐥

 
 

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

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にわりといるので、覗いてもらえると嬉しいです^^

Twitter

-WORDPRESS

© 2019 あずきのぶろぐ