☰
ブロガーの森 Written by nabetaro

【2021年最新】Autoptimizeの設定方法と使い方：コード最適化プラグイン【WordPress】

ブログ

Autoptimizeの設定方法と使い方：コード最適化プラグイン【WordPress】

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・Autoptimizeのおすすめの設定を知りたい！
・サイトの表示速度を速くして検索順位を上げたい！
・Autoptimizeと合わせて表示速度を速くする方法も知りたい！

本記事の内容

  • Autoptimizeの機能やメリット・デメリット
  • Autoptimizeのインストール方法
  • Autoptimizeのおすすめの設定方法と使い方
  • さらに表示速度を速くする方法
  • 不具合が起きたときの対処法

本記事を読むと、Autoptimizeのおすすめの設定や使い方だけでなく、表示速度がさらに速くなる設定や方法がわかります。

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪
なべたろの実績

  • ライター100名以上の組織の法人を経営→株式譲渡
  • 立ち上げから半年で月間1,000万PVを達成
  • 1年で月間1200万PVを達成
  • 年商約1億円を達成
  • 法人向けコンサル1社あたり月額60~100万円
  • PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

Autoptimizeとは

①Autoptimizeとは
Autoptimize
>> Autoptimize

Autoptimizeとは、ブログを構成する様々なファイルのコードを自動で最適化してくれることでページの表示速度を速くしてくれるプラグインです。

Autoptimizeでできること

Autoptimizeを使うことで、具体的には以下の3つのファイルを最適化することができます。

  • HTML(ページを構成するコード)
  • CSS(デザインのためのコード)
  • JavaScript(システムのためのコード)

WordPressでブログを運営されている方はご存知だと思いますが、WordPressブログは上記のようなファイルが無数に集まって構成されています。

それらを最適化してサイトを軽くしてくれるのがAutoptimizeです。

「最適化」って？

Autoptimizeは、具体的には以下のことをしてサイトを軽くしてくれます。

  • HTML・CSS・JavaScriptファイルなどに含まれるスペースや改行を詰めて縮小
  • コードが書かれた複数のファイルを連結

一言で言うと、コードのムダな部分をギュッと詰めるイメージです。

Googleが無料で提供している、サイトの表示速度を計測できるツールであるPageSpeed Insightsでは、サイトスピードを改善するために以下のアドバイスが記載されています。

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

つまりどういうことかと言うと、、、

  • 「レンダリング」
    　→WordPressブログを構成しているファイルのコードを読み込んでページを表示すること
  • 「妨げるリソース」
    　→コードの読み込みが遅くなるようなムダな部分(スペースや改行など)
  • 「除外」
    　→上記のムダをなくしてコードを最適化すること

つまりGoogleのアドバイスの意味は、

コードのムダな部分を削って最適化すればページの表示速度が速くなるよ！

ということです。

これを自動で行ってくれるのがAutoptimizeになります。

Autoptimizeでできる他のこと

先述の通り、AutoptimizeはHTML・CSS・JavaScriptのファイルを最適化してくれることがメインの機能です。

が、他にも以下の最適化をしてさらにサイトを軽くしてくれます。

  • 画像ファイルの最適化
  • Googleフォントの削除
  • 絵文字のための使わないデータの削除
  • キャッシュの作成や削除
他のいろんなファイルまで全体的に最適化してくれるイメージだよ♪

メリットとデメリットも知っておこう！

Autoptimizeのメリットとデメリット(注意点)も簡単におさらいしておこう！

Autoptimizeのメリット

  • 様々なファイルやキャッシュなどを自動で最適化してサイトを軽くしてくれる
  • それによりサイトの表示速度が速くなる
  • ユーザーの離脱率が下がり、売上も上がりやすくなる
  • SEOの効果があり検索順位が上がりやすくなる
大きく売上が変わりそうだね♪

Autoptimizeのデメリット(注意点)

一方で、注意点も把握しておきましょう。

  • HTML・CSS・JavaScriptを最適化する他のプラグインを使っている場合は不具合の可能性がある
    　→対策①：二重になってしまうので、Autoptimizeだけを使う
    　→対策②：WordPressのバックアップをとっておく
  • WordPressテーマによってはページのデザインやレイアウトが崩れる可能性がある
    　→対策：「Autoptimizeで不具合が出たときは」で対処法を解説

あくまで可能性の話ではありますが、万が一に備えてバックアップをとっておくと安心です。

バックアップはBackWPupというプラグインでとても簡単にすぐに取れるので、心配な方は以下の記事を参考にバックアップをとっておきましょう。

>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】

説明通りに順番に設定と対処を進めていこう♪
⇡目次へ戻る

Autoptimizeのインストールと有効化

②Autoptimizeのインストールと有効化
まずはWordPressにAutoptimizeをインストールします。
Autoptimizeのインストール方法-1
WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。
Autoptimizeのインストール方法-2
検索窓に「Autoptimize」と入力して検索します。
Autoptimizeのインストール方法-3
上記の画像のプラグインがAutoptimizeになります。

「今すぐインストール」をクリックします。
Autoptimizeのインストール方法-4
「有効化」のボタンをクリックすればAutoptimizeのインストールと有効化は完了です。

⇡目次へ戻る

Autoptimizeの設定方法と使い方

③Autoptimizeの設定方法と使い方
Autoptimizeのメインの機能の設定方法を解説します。
Autoptimizeの設定方法-1
WordPressの管理画面から「設定」→「Autoptimize」をクリックして、Autoptimizeの設定画面を開きます。
Autoptimizeの設定方法-2
Autoptimizeの設定画面には上記の画像のように、以下の5つのタブが表示されるはずです。

  • 「JS、CSS & HTML」タブ
  • 「画像(Images)」タブ
  • 「クリティカル CSS」タブ
  • 「追加」タブ
  • 「さらに最適化！」タブ

これらの５つを順番に設定していきます。

順番に解説するよ♪

「JS、CSS & HTML」タブ

Autoptimizeの設定JS・CSS・ HTMLタブ-1
まずは「JS、CSS & HTML」タブからです。

5つのタブのうち、この「JS、CSS & HTML」タブの設定がメインになります。

このタブでは以下の5つの項目があります。

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

JavaScript オプション

まずはJavaScript オプションから♪

Autoptimizeの設定：JS・CSS・ HTMLタブ-2
最初は上記のように真っ白な状態になっています。
Autoptimizeの設定：JS・CSS・ HTMLタブ-3
「JavaScript コードの最適化」の欄にチェックを入れてください。

すると全体が表示されるようになるので、これで完了です。

デフォルトのままでOKです。

以下の2つにチェックが入っていることをご確認ください。

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

CSS オプション

Autoptimizeの設定：JS・CSS・ HTMLタブ-4
CSSオプションについてもJavaScriptオプションと同様に真っ白になっています。
Autoptimizeの設定：JS・CSS・ HTMLタブ-5
「CSS コードを最適化」にチェックを入れてください。

全ての項目が表示されます。全てデフォルトのままでOKです。

以下の3つにチェックが入っていることをご確認ください。

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

HTML オプション

Autoptimizeの設定：JS・CSS・ HTMLタブ-6
HTML オプションも同様に進めます。
Autoptimizeの設定：JS・CSS・ HTMLタブ-7
「HTML コードを最適化」にチェックを入れれば、あとはデフォルトのままでOKです。

CDN オプション

Autoptimizeの設定：JS・CSS・ HTMLタブ-8
CDNオプションは上記のように表示されていますが、デフォルトのままでOKです。

その他オプション

Autoptimizeの設定：JS・CSS・ HTMLタブ-9
その他オプションもデフォルトのままでOKです。

以下の4つにチェックが入っていることをご確認ください。

  • 連結されたスクリプト / CSS を静的ファイルとして保存
  • 除外された CSS ファイルと JS ファイルを最小化
  • 404 フォールバックの使用
  • ログイン状態の編集者、管理者にも最適化を行う

Autoptimizeの設定：JS・CSS・ HTMLタブ-10
ここまでできたら「変更を保存」をクリックすれば「JS、CSS & HTML」タブの設定は完了です。

他のタブはすぐに終わるよ♪

「画像(Images)」タブ

続いて「画像(Images)」タブについて解説するよ♪

Autoptimizeの設定：画像(Images)タブ-1
「画像」(もしくは「Images」)をクリックしてタブを開いてください。

画像最適化

Autoptimizeの設定：画像(Images)タブ-2
上記のページが表示されます。

このページでは画像最適化の設定ができます。

「画像を最適化」

Autoptimizeの設定：画像(Images)タブ-3

画像ファイルには実は画像データだけでなく、作成日時やGPS情報など様々な余分なデータも詰まっています。

こういったデータのことをメタデータと呼びますが、メタデータを削除することで画像ファイルも軽量化して表示速度を早めることができます。

ただし、WordPressでの画像の最適化はAutoptimizeではなくEWWW Image Optimizerを使うのがおすすめです。

EWWW Image Optimizerの使い方は以下の記事で詳しく解説しているので、画像をより最適化してさらに表示速度を速めるために、EWWW Image Optimizerも導入しておきましょう。

>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】

EWWW Image Optimizerを導入しておけば「画像を最適化」のチェックは不要で、デフォルトのままでOKです。

「画像の遅延読み込み (Lazy-load) を利用」

Autoptimizeの設定：画像(Images)タブ-4
続いて「画像の遅延読み込み (Lazy-load) を利用」の項目についてです。

この項目にチェックを入れることでページの表示速度が速くなります。

ただし、この項目についてもEWWW Image Optimizerで設定できるので、EWWW Image Optimizerを設定すればこの項目のチェックは不要です。

>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】

「クリティカル CSS」タブ

Autoptimizeの設定：クリティカルCSSタブ
「クリティカル CSS」タブについてもデフォルトのままでOKです。

「追加」タブ

続いて「追加」タブです。
Autoptimizeの設定：追加タブ-1
「追加」をクリックして「追加」タブを開いてください。

追加の自動最適化

Autoptimizeの設定：追加タブ-2
基本的にデフォルトのままでもOKですが、Googleフォントを使っていない場合は上の画像のように「Google フォントの削除」を選択しておくのがおすすめです。

使っていない余分な情報を削除することでサイトがより軽くなります。
Autoptimizeの設定：追加タブ-3
変更をしたら、「変更を保存」を忘れずにクリックして設定を保存しましょう。

「さらに最適化！」タブ

Autoptimizeの設定：さらに最適化！タブ
最後に「さらに最適化！」タブについてですが、このタブは有料機能や他の高度な機能のタブになるので触らなくてOKです。

「追加」タブまで設定が完了したら、Autoptimizeの設定は完了です。

⇡目次へ戻る

Autoptimizeの使い方：キャッシュの削除

④Autoptimizeの使い方：キャッシュの削除
手動で定期的に行うべき、「キャッシュの削除」について解説します。

これだけは定期的にやらないといけないから把握しておこう♪

Autoptimizeでキャッシュが自動で作成される

Autoptimizeでは、自動的に「キャッシュ」というものが作成されています。

キャッシュとは

一度表示されたページの情報を保存しておき、次回の表示速度を速くするためのもの

つまりキャッシュのおかげで、一度読み込んだり保存されたファイルやページは、次に表示されるときは速く表示されるようになります。

2つのキャッシュ

一般的なキャッシュには2種類あります。

  • サーバーキャッシュ(ページキャッシュ)：サイト運営者のサーバー上に保存されるキャッシュ
  • ブラウザキャッシュ：サイトを訪れたユーザーのブラウザに保存されるキャッシュ

Autoptimizeで作成されるキャッシュはサーバーキャッシュで、WordPressブログを運営しているサーバー上に作成されます。

キャッシュのメリット・デメリット

キャッシュのメリットは先述の通り、毎回読み込まなくても良くなるので表示速度が速くなることです。

一方でキャッシュには以下のようなデメリットもあります。

  • サイトの更新や変更がすぐに反映されない
  • キャッシュが溜まりすぎるとサイトの動作が遅くなる

こういったことが起こらないように、キャッシュは定期的に削除する必要があります。

キャッシュを定期的に削除しよう

それでは定期的に行うべき、キャッシュを削除する方法を解説します。

一瞬でできるから安心してね♪

Autoptimizeの使い方：キャッシュ削除-1
WordPressの管理画面の上部に「Autoptimize」という項目が表示されているのでカーソルを合わせます。
Autoptimizeの使い方：キャッシュ削除-2
画像のように「キャッシュ情報」が表示されるので、「キャッシュを削除」をクリックすれば削除が完了です。

とっても簡単だね♪

キャッシュがどれくらい溜まっているかもここで確認することができます。

キャッシュの削除は以下のようなタイミングで定期的に行うのがおすすめです。

  • 記事を更新・リライトしたとき
  • サイトの設定やデザインなど、何かを変更したとき
  • 変更していなくても数日に1度は削除する

など。

⇡目次へ戻る

Autoptimizeで不具合が出たときは

⑤Autoptimizeで不具合が出たときは
Autoptimizeでは、他のプラグインとの干渉により不具合が起こることがあります。

不具合が起こっても冷静に対処すれば大丈夫だよ♪

以下の3つの不具合が予想されるのでそれぞれ対処法を解説します。

  • WordPressの変更や更新が反映されない
  • レイアウトが崩れた
  • 画像が表示されなくなった

WordPressの変更や更新が反映されない

WordPressの変更や更新が反映されないという不具合です。

厳密にはこれは不具合ではなく、キャッシュが保存されていることで変更が反映されていない状態です。

キャッシュを削除してから再度ページを表示してみると変更や更新が反映されているはずです。

レイアウトが崩れた

レイアウトやデザインが崩れる場合は、他のプラグインの干渉が原因でCSSやJavaScriptの最適化に不具合が起こっていることが原因です。

この場合は、以下の2パターンのどちらかで対処できます。

  • JavaScript最適化を無効にする
  • CSS最適化を無効にする

順に解説します。

JavaScript最適化を無効にする

Autoptimizeの不具合対処：JavaScript最適化の無効-1
Autoptimizeの設定画面を開き、「JS、CSS & HTML」タブの「JavaScriptオプション」の箇所を表示します。
Autoptimizeの不具合対処：JavaScript最適化の無効-2
「JavaScript コードの最適化」のチェックを外し、「変更の保存とキャッシュの削除」をクリックしてからレイアウトが正常か確認します。

これでレイアウトが正常になった場合はAutoptimizeのJavaScriptの最適化が原因なので、無効化にしておきましょう。

「<head>内へJavaScriptを強制」で直ることも

Autoptimizeの不具合対処：JavaScript最適化の設定変更
画像のように、 「<head>内へJavaScriptを強制」にもチェックを入れてJavaScriptの最適化をすることで、この不具合が解消されることもあるようです。

「<head>内へJavaScriptを強制」にチェックを入れて、「変更の保存とキャッシュの削除」をクリックしてレイアウトを確認してみてください。

CSS最適化を無効にする

Autoptimizeの不具合対処：CSS最適化の無効-1
JavaScript最適化を無効にしても直らない場合はCSS最適化が原因の可能性が高いです。
Autoptimizeの不具合対処：CSS最適化の無効-2
「CSS コードを最適化」のチェックを外して「変更の保存とキャッシュの削除」をクリックしてレイアウトを確認してみてください。

レイアウトが直っていればCSS最適化が原因なので、CSS最適化は無効にしておきましょう。

画像が表示されくなった

画像が表示されなくなったり、記事のサムネイル画像が真っ暗になる不具合が起こる場合はJavaScript最適化が原因です。

JavaScript最適化を無効にすることで解消されるので、手順に従って無効にしてみてください。

⇡目次へ戻る

Autoptimizeと合わせて表示速度を速くする方法

⑥Autoptimizeと合わせて表示速度を速くする方法
EWWW Image Optimizer
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】

AutoptimizeはHTML・CSS・JavaScriptファイルの最適化やキャッシュの管理・Googleフォントなど様々な最適化をしてサイトを全体的に軽くしてくれます。

Autoptimizeだけでもページの表示速度の改善に大きく貢献しますが、さらに速くしてSEOも強化したい場合はEWWW Image Optimizerも合わせて導入するとさらに速くすることができます。

EWWW Image Optimizerは以下のように、画像を最適化して表示速度を改善してくれます。

  • 画像のリサイズ
  • 圧縮
  • 余分なメタデータの削除
  • 読み込み遅延

画像の最適化はAutoptimizeではなくEWWW Image Optimizerで設定するとさらに速くなるので、Autoptimizeと合わせて導入しておくのがおすすめです。

>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】

⇡目次へ戻る

Autoptimizeで最適化してサイトスピードを速くしよう！

⑦Autoptimizeで最適化してサイトスピードを速くしよう！
Autoptimizeでサイトを最適化してページの表示速度を改善する方法を解説しました。

ページの表示速度は、ブログを運営している自分自身は感じにくくても、ページを訪れたユーザーにとってはわずかな差がとても大きく感じるものです。

ページの表示速度は離脱率に大きく影響し、売上にも影響し、SEOの検索順位にも影響するのでAutoptimizeでしっかりと改善しておきましょう。

Autoptimizeと合わせてEWWW Image Optimizerも導入することで、さらに表示速度を改善することができます。

以下の記事で詳しく解説しています。

>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】

画像の圧縮プラグインはCompress JPEG & PNG imagesもおすすめです。

>> 【画像圧縮プラグイン】Compress JPEG & PNG imagesの設定と使い方

圧縮ではなく画像のリサイズだけ行いたい方は、アップロード方法に合わせて自動で画像をリサイズできるImsanityもおすすめです。

>> 【2021年最新】Imsanityの設定方法とおすすめの使い方：画像リサイズプラグイン【WordPress】

＼【無料ブログ講座】LINE限定でノウハウを配信／

ブログの無料講座：公式LINE

公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。

LINE参加者の声


400名が以上参加中！無料で読めます♪

＼ 最短で収益化 ／公式LINEで無料で学ぶ

⇡目次へ戻る

HOME >  ブログ >  【2021年最新】Autoptimizeの設定方法と使い方：コード最適化プラグイン【WordPress】
＼年商1億超えのプロが解説！ブログの収益化方法／
無料で受け取る
＼　年商1億超えのプロが解説！ブログの収益化方法　／
無料で受け取る