あずきです🐥
WordPressブログでおすすめなプラグインの1つ…
Autoptimize
について、ブログ初心者さん向けに1から解説していきます♪
具体的には、次の3点です
- WordPressプラグイン「Autoptimize」とは？ その役割
- 「Autoptimize」の導入手順（インストール＆有効化）
- 「Autoptimize」の基本的な設定方法
さっそく見ていきましょー🐥
＼ 本気でブログ収益化するなら ／
-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -
WING AFFINGER5
- ターゲットに合わせた圧倒的な最適化！
- SEO対策と広告収入UPの機能が標準装備！
- 面倒なカスタマイズも「クリック1つ」で簡単・時短！
今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中！
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事で公開しています
プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします
Contents
WordPressプラグイン「Autoptimize」とは？ その役割【コードの最適化で、ページ表示速度を改善】
「Autoptimize」とは、WordPressブログにおける「ページ表示の高速化」に極めて便利なプラグインです
主な機能は、次の4つになります
- 「JavaScript」の最適化
- 「CSS」の最適化
- 「HTML」の最適化
- 「画像」の最適化
初心者の方にとっては、間違いなく「なんのこっちゃ？」ですよね（←経験談）
そもそも！
僕らが普段目にする「いわゆるWEBサイトの画面」というのは、その画面には直接映らない「水面下の膨大なコードたち」で形成されてます
このコードというのは、例えば…
- プログラミング言語 → 「JavaScript」とかのこと！
- マークアップ言語 → 「HTML」とかのこと！
- スタイルシート → 「CSS」のこと！
などと呼ばれてるものたち
あなたのブログが読者の画面に表示されるときというのは、これらの「各種コード」がものすごい勢いで読み込まれていくんですね
ということは…
ページ表示に必要なコード内において「記述構成の（実質的な）ムダ」があると、それだけ読み込みに時間がかかってしまうということ
そんなコードの構成を自動で整えて ”最適化” してくれるのが、今回の「Autoptimize」です
ちなみに…
WEBサイトの「ページ表示速度」を測る代表的なツールとして、「PageSpeed Insights」というものがあるんですが…
このツールにおける、表示スピード計測後の「改善点」の欄に…
- レンダリングを妨げるリソースの除外
という項目が、わりとよく出てくるんですね
これがまさに、今回のテーマである…
- 「レンダリング」 ⇒ 「JavaScript」や「CSS」といった各種コードを読みこんで、実際の画面を形成すること！
- 「～を妨げるリソース」 ⇒ コードの構成にムダがあって読みこみが遅れてしまう、その原因になってる部分！
- 「～の除外」 ⇒ 上記のムダを最適化して、読みこみをできるだけスムーズにしよう！
に該当します
「Autoptimize」は、そんな「コードの最適化ツール」として最も代表的なプラグインの1つ
つづいて、そんな「Autoptimize」の導入方法を見ていきましょう🐥
「Autoptimize」の導入手順（インストール＆有効化）
普通に「インストール」と「有効化」をするだけなので、わかる方は読み飛ばしていだたいてOKです
WordPress管理画面にログインしたら…
↑ プラグイン ＞ 新規追加 をクリックしましょう
↑ 右上の検索バーに、「Autoptimize」と入力します
↑ こちらの「Autoptimize」が表示されたら、「インストール」をクリックし…
↑ インストールが完了したら、そのまま「有効化」ボタンをクリックしましょう
「プラグインを有効化しました」と表示されたら、プラグインの導入は完了です
今度は、肝心の設定方法について見ていきましょう🐥
「Autoptimize」の基本的な設定方法【JavaScript／CSS／HTML／画像の最適化】
プラグイン「Autoptimize」で、一般的かつ僕のブログでも実際に行ってる設定例を解説していきます♪
まずは、設定画面を開きましょう（下記手順です）
↑ WordPress管理画面 ＞ 設定 ＞ Autoptimize をクリックします
「Autoputimize」の設定画面が開けたら、上から順に見ていきますね🐥
「JS、CSS＆HTML」タブ
まずは「JS、CSS＆HTML」タブをクリックします
「JS、CSS＆HTML」タブは…
- JavaScript オプション
- CSS オプション
- HTML オプション
- CDN オプション
- その他 オプション
この5つの項目にわかれます🐥
「JavaScript オプション」の設定
まず1番上の、「JavaScript オプション」の設定は次の通りです
↑ 上記の通り…
- JavaScript コードの最適化
- JS ファイルを連結する
の2つにチェックを入れればOK♪
コードを最適化することで、ページ読み込みにおける負荷を減らします
2つ目の「JSファイルを連結する」も、同様の目的です
注意ポイント
そのほかに使用してるプラグインで同じ機能を有効にしてる場合は、どちらかの該当機能をオフにしてください
機能が重複してしまうと、ブログの動作に支障をきたす可能性があります
当ブログの場合、キャッシュ管理プラグイン「WP Fastest Cache」における…
- 「JSの結合」
という項目と重複してました
で、結論「WP Fastest Cache」側の「JSの結合」のチェックを外しています
※「WP Fastest Cache」はあくまで「キャッシュ管理」がメインで、今回の「コードの最適化」については「Autoptimize」の方が専門であるため、という考えからです
参考までに、このブログで使ってるプラグイン一覧は ↓
-
【定番】WordPressで愛用中のおすすめプラグイン「17選」をまとめて公開【導入手順＆設定方法】
続きを見る
「WP Fastest Cache」の設定については ↓
-
【2020年版】WordPressプラグイン「WP Fastest Cache」の基本的な設定方法【ブログのキャッシュ削除】
続きを見る
「CSS オプション」の設定
つづいて、2つ目の「CSS オプション」について
↑ 上記の通り…
- CSSコードを最適化
- CSSファイルを連結する
- インラインのCSSを連結
- すべてのCSSをインライン化
この4つにチェックを入れればOK♪
注意ポイント
1つ目の「JavaScript」と同様、そのほかに使用しているプラグインで同じ機能を有効にしてる場合は、どちらかの該当機能をオフにしてください
当ブログの場合、同じく「WP Fastest Cache」の…
- 「CSSの圧縮」
- 「CSSの結合」
という項目と重複してました
で、結論「WP Fastest Cache」側の「CSSの圧縮」「CSSの結合」のチェックを外しています
ちなみに「インライン化」とは、外部ファイルである「CSSコード」を「HTMLコード」内でひとまとめにすることで、読み込みをスムーズにする仕組みです
基本的に、短文のコードならインライン化で読み込みが効率化されますが、長文のコードをインライン化すると、かえって読み込みが重たくなる可能性もあります
なので基本的には、一度「インライン化」にチェックを入れてみて、表示スピードが気になるようなら、チェック外してまた速度を検証してみるのがおすすめです
「HTML オプション」の設定
3つ目の「HTML オプション」について
↑「HTMLコードを最適化」にチェックを入れればOK♪
注意ポイント
こちらも「JavaScript」「CSS」と同様に、そのほかに使用しているプラグインで同じ機能を有効にしてる場合は、どちらかの該当機能をオフにしてください
当ブログの場合、同じく「WP Fastest Cache」の…
- 「HTMLの圧縮」
という項目と重複してました
で、結論「WP Fastest Cache」側の「HTMLの圧縮」のチェックを外しています
「CDN オプション」の設定
4つ目の「CDNオプション」について
↑ ここは、初期設定のままノータッチでOKです♪
「その他 オプション」の設定
5つ目の「その他オプション」について
↑ こちらも、初期設定のままノータッチでOKです♪
「画像」タブ
つづいて、「画像」タブの設定に入ります
↑ 画面上部の「画像」タブをクリックしましょう
↑ ここは…
- 画像を最適化
- Lazy-load images?
ともに、初期設定のまま「オフ」にしてます
ちなみに！
2つ目の「Lazy-load images?」については…
表示速度を改善するための「画像の遅延読み込み」という機能を意味する「Lazy Load」系プラグインを導入していない場合は、チェックを入れてもOKです
合わせてどーぞ♪
-
ブログの「Lazy Load」機能とは？「画像の遅延読み込み」で、ページ表示速度を高速化しよう【WordPressブログ】
続きを見る
僕の場合、すでに…
- LazyLoad SEO
というプラグインを導入していたので、こちらでは「オフ」にしてます
合わせてどーぞ♪
-
WordPressプラグイン「LazyLoad SEO」とは？購入手順と、ダウンロード＆解凍方法【AFFINGER系専用】
続きを見る
-
WordPressプラグイン「LazyLoad SEO」の導入手順と、基本的な設定方法【画像の遅延読み込み＋SEO対策】
続きを見る
「Critical CSS」タブ
お次は、「Critical CSS」タブについて
↑ こちらは、すべて初期設定のままノータッチでOK♪
「追加」タブ
今度は、「追加」タブについて
↑ 画面上部の「追加」タブをクリックしましょう
↑ こちらも基本的には、初期設定のままノータッチでOKです
強いて言えば…
↑ この「Googleフォント」という項目について、WEBフォントの1種「Googleフォント」を現在使っていない場合は…
↑「Googleフォントの削除」を選択すると、読み込みの軽量化につながります
くわしくは ↓ をどうぞ♪
-
WordPressで、Webフォント「Googleフォント」の削除は実際するべきか？【サイト表示の高速化】
続きを見る
-
【Autoptimizeなら一瞬】WordPressで「Googleフォントの削除」を行う方法【表示スピードの改善】
続きを見る
「さらに最適化！」タブ
最後に、「さらに最適化！」タブについて
↑ ここは「Autoptimize」における関連サービスの紹介になるので、基本的にノータッチのままでOKです♪
おしまい♪
あずき🐥
＼ 本気でブログ収益化するなら ／
-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -
WING AFFINGER5
- ターゲットに合わせた圧倒的な最適化！
- SEO対策と広告収入UPの機能が標準装備！
- 面倒なカスタマイズも「クリック1つ」で簡単・時短！
今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中！
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
今回の記事はこちらの章に属しています
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^