ワードプレス

WordPressプラグイン「Autoptimize」の基本的な設定方法【ブログのページ表示速度を高速化】

WordPressプラグイン「Autoptimize」とは?導入&設定方法_アイキャッチ



あずきです🐥

WordPressブログでおすすめなプラグインの1つ…

Autoptimize

について、ブログ初心者さん向けに1から解説していきます♪

具体的には、次の3点です

  • WordPressプラグイン「Autoptimize」とは? その役割
  • 「Autoptimize」の導入手順(インストール&有効化)
  • 「Autoptimize」の基本的な設定方法

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

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

このブログのWordPress環境

プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします

関連:WordPressプラグイン「BackWPup」の基本的な設定方法【ブログに必須なバックアップ】

WordPressプラグイン「Autoptimize」とは? その役割【コードの最適化で、ページ表示速度を改善】

ブログガイド_見出し_01

「Autoptimize」とは、WordPressブログにおける「ページ表示の高速化」に極めて便利なプラグインです

主な機能は、次の4つになります

  • 「JavaScript」の最適化
  • 「CSS」の最適化
  • 「HTML」の最適化
  • 「画像」の最適化
このほかにも補足機能はあるけど、メインはまずこの3つ!

初心者の方にとっては、間違いなく「なんのこっちゃ?」ですよね(←経験談)

そもそも!

僕らが普段目にする「いわゆるWEBサイトの画面」というのは、その画面には直接映らない「水面下の膨大なコードたち」で形成されてます

このコードというのは、例えば…

  • プログラミング言語 → 「JavaScript」とかのこと!
  • マークアップ言語 → 「HTML」とかのこと!
  • スタイルシート → 「CSS」のこと!

などと呼ばれてるものたち

あなたのブログが読者の画面に表示されるときというのは、これらの「各種コード」がものすごい勢いで読み込まれていくんですね

ということは…

ページ表示に必要なコード内において「記述構成の(実質的な)ムダ」があると、それだけ読み込みに時間がかかってしまうということ

そんなコードの構成を自動で整えて ”最適化” してくれるのが、今回の「Autoptimize」です

ちなみに…

WEBサイトの「ページ表示速度」を測る代表的なツールとして、「PageSpeed Insights」というものがあるんですが…

Googleの無料ツール!

このツールにおける、表示スピード計測後の「改善点」の欄に…

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

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

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

  • 「レンダリング」 ⇒ 「JavaScript」や「CSS」といった各種コードを読みこんで、実際の画面を形成すること!
  • 「~を妨げるリソース」 ⇒ コードの構成にムダがあって読みこみが遅れてしまう、その原因になってる部分!
  • 「~の除外」 ⇒ 上記のムダを最適化して、読みこみをできるだけスムーズにしよう!

に該当します

「Autoptimize」は、そんな「コードの最適化ツール」として最も代表的なプラグインの1つ

つづいて、そんな「Autoptimize」の導入方法を見ていきましょう🐥

「Autoptimize」の導入手順(インストール&有効化)

ブログガイド_見出し_02

普通に「インストール」と「有効化」をするだけなので、わかる方は読み飛ばしていだたいてOKです

WordPress管理画面にログインしたら…

WordPressプラグイン「Autoptimize」とは?導入&設定方法_2-01

↑ プラグイン > 新規追加 をクリックしましょう

WordPressプラグイン「Autoptimize」とは?導入&設定方法_2-02

↑ 右上の検索バーに、「Autoptimize」と入力します

WordPressプラグイン「Autoptimize」とは?導入&設定方法_2-03

↑ こちらの「Autoptimize」が表示されたら、「インストール」をクリックし…

WordPressプラグイン「Autoptimize」とは?導入&設定方法_2-04

↑ インストールが完了したら、そのまま「有効化」ボタンをクリックしましょう

「プラグインを有効化しました」と表示されたら、プラグインの導入は完了です

今度は、肝心の設定方法について見ていきましょう🐥

「Autoptimize」の基本的な設定方法【JavaScript/CSS/HTML/画像の最適化】

ブログガイド_見出し_03

プラグイン「Autoptimize」で、一般的かつ僕のブログでも実際に行ってる設定例を解説していきます♪

まずは、設定画面を開きましょう(下記手順です)

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-top-01

↑ WordPress管理画面 > 設定 > Autoptimize をクリックします

「Autoputimize」の設定画面が開けたら、上から順に見ていきますね🐥

「JS、CSS&HTML」タブ

まずは「JS、CSS&HTML」タブをクリックします

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-1-01

「JS、CSS&HTML」タブは…

  • JavaScript オプション
  • CSS オプション
  • HTML オプション
  • CDN オプション
  • その他 オプション

この5つの項目にわかれます🐥

「JavaScript オプション」の設定

まず1番上の、「JavaScript オプション」の設定は次の通りです

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-1-02

↑ 上記の通り…

  • JavaScript コードの最適化
  • JS ファイルを連結する

の2つにチェックを入れればOK♪

コードを最適化することで、ページ読み込みにおける負荷を減らします

2つ目の「JSファイルを連結する」も、同様の目的です

注意ポイント

そのほかに使用してるプラグインで同じ機能を有効にしてる場合は、どちらかの該当機能をオフにしてください

機能が重複してしまうと、ブログの動作に支障をきたす可能性があります

当ブログの場合、キャッシュ管理プラグイン「WP Fastest Cache」における…

  • 「JSの結合」

という項目と重複してました

で、結論「WP Fastest Cache」側の「JSの結合」のチェックを外しています

※「WP Fastest Cache」はあくまで「キャッシュ管理」がメインで、今回の「コードの最適化」については「Autoptimize」の方が専門であるため、という考えからです

参考までに、このブログで使ってるプラグイン一覧は ↓

WordPress_おすすめプラグイン一覧と設定方法_アイキャッチ
【定番】WordPressで愛用中のおすすめプラグイン「17選」をまとめて公開【導入手順&設定方法】

続きを見る

「WP Fastest Cache」の設定については ↓

WordPressプラグイン「WP Fastest Cache」とは?導入手順と設定方法_アイキャッチ
【2020年版】WordPressプラグイン「WP Fastest Cache」の基本的な設定方法【ブログのキャッシュ削除】

続きを見る

「CSS オプション」の設定

つづいて、2つ目の「CSS オプション」について

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-1-03

↑ 上記の通り…

  • CSSコードを最適化
  • CSSファイルを連結する
  • インラインのCSSを連結
  • すべてのCSSをインライン化

この4つにチェックを入れればOK♪

注意ポイント

1つ目の「JavaScript」と同様、そのほかに使用しているプラグインで同じ機能を有効にしてる場合は、どちらかの該当機能をオフにしてください

当ブログの場合、同じく「WP Fastest Cache」の…

  • 「CSSの圧縮」
  • 「CSSの結合」

という項目と重複してました

で、結論「WP Fastest Cache」側の「CSSの圧縮」「CSSの結合」のチェックを外しています

ちなみに「インライン化」とは、外部ファイルである「CSSコード」を「HTMLコード」内でひとまとめにすることで、読み込みをスムーズにする仕組みです

基本的に、短文のコードならインライン化で読み込みが効率化されますが、長文のコードをインライン化すると、かえって読み込みが重たくなる可能性もあります

なので基本的には、一度「インライン化」にチェックを入れてみて、表示スピードが気になるようなら、チェック外してまた速度を検証してみるのがおすすめです

「HTML オプション」の設定

3つ目の「HTML オプション」について

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-1-04

↑「HTMLコードを最適化」にチェックを入れればOK♪

注意ポイント

こちらも「JavaScript」「CSS」と同様に、そのほかに使用しているプラグインで同じ機能を有効にしてる場合は、どちらかの該当機能をオフにしてください

当ブログの場合、同じく「WP Fastest Cache」の…

  • 「HTMLの圧縮」

という項目と重複してました

で、結論「WP Fastest Cache」側の「HTMLの圧縮」のチェックを外しています

「CDN オプション」の設定

4つ目の「CDNオプション」について

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-1-05

↑ ここは、初期設定のままノータッチでOKです♪

「その他 オプション」の設定

5つ目の「その他オプション」について

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-1-06

↑ こちらも、初期設定のままノータッチでOKです♪

「画像」タブ

つづいて、「画像」タブの設定に入ります

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-2-01

↑ 画面上部の「画像」タブをクリックしましょう

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-2-02

↑ ここは…

  • 画像を最適化
  • Lazy-load images?

ともに、初期設定のまま「オフ」にしてます

ちなみに!

2つ目の「Lazy-load images?」については…

表示速度を改善するための「画像の遅延読み込み」という機能を意味する「Lazy Load」系プラグインを導入していない場合は、チェックを入れてもOKです

合わせてどーぞ♪

WordPress_Lazy Loadとは?_アイキャッチ
ブログの「Lazy Load」機能とは?「画像の遅延読み込み」で、ページ表示速度を高速化しよう【WordPressブログ】

続きを見る

僕の場合、すでに…

  • LazyLoad SEO

というプラグインを導入していたので、こちらでは「オフ」にしてます

合わせてどーぞ♪

WordPressプラグイン「LazyLoad SEO」の購入・ダウンロード・解凍手順_アイキャッチ
WordPressプラグイン「LazyLoad SEO」とは?購入手順と、ダウンロード&解凍方法【AFFINGER系専用】

続きを見る

WordPressプラグイン「LazyLoad SEO」の導入・設定方法_アイキャッチ
WordPressプラグイン「LazyLoad SEO」の導入手順と、基本的な設定方法【画像の遅延読み込み+SEO対策】

続きを見る

リクナビNEXT

30代向け

約85%がリクナビNEXT限定求人

正社員求人は9割以上

無料登録はたった5分で完了!!!

「Critical CSS」タブ

お次は、「Critical CSS」タブについて

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-3-01

↑ こちらは、すべて初期設定のままノータッチでOK♪

「追加」タブ

今度は、「追加」タブについて

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-4-01

↑ 画面上部の「追加」タブをクリックしましょう

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-4-02

↑ こちらも基本的には、初期設定のままノータッチでOKです

強いて言えば…

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-4-03

↑ この「Googleフォント」という項目について、WEBフォントの1種「Googleフォント」を現在使っていない場合は…

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-4-04

「Googleフォントの削除」を選択すると、読み込みの軽量化につながります

くわしくは ↓ をどうぞ♪

WordPressで表示スピード改善のために、Googleフォントは削除すべき?_アイキャッチ
WordPressで、Webフォント「Googleフォント」の削除は実際するべきか?【サイト表示の高速化】

続きを見る

WordPress_Googleフォントの削除方法_アイキャッチ
【Autoptimizeなら一瞬】WordPressで「Googleフォントの削除」を行う方法【表示スピードの改善】

続きを見る

「さらに最適化!」タブ

最後に、「さらに最適化!」タブについて

WordPressプラグイン「Autoptimize」とは?導入&設定方法_3-5-01

↑ ここは「Autoptimize」における関連サービスの紹介になるので、基本的にノータッチのままでOKです♪

おしまい♪

あずき🐥

本気でブログ収益化するなら /

WING AFFINGER5 バナー 02

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

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

WordPressブログガイド 第4章「プラグイン」編 

あずきのWordPressブログガイド 総合TOP 

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。