BLOG

【2022年】Autoptimizeの使い方・設定方法をわかりやすく解説

Autoptimizeの使い方・設定方法をわかりやすく解説

悩み

WordPressブログの表示速度を改善したい。Autoptimizeの設定方法・使い方を知りたい。

こんな悩みに答えます。

WordPressのサイトスピード改善には画像ファイルの最適化以外にも、HTML・CSS・Javascriptなどのリソースを最適化する方法もあります。

そこで本記事では、主要なリソースを簡単に軽量化・圧縮してくれるAutoptimize(プラグイン)の設定方法・使い方をわかりやすく解説します。

この記事を読めば、サイトスピードが上がりSEOの評価も上がります。

ちなみに、画像ファイルの圧縮プラグインについては、EWWW Image Optimizerの設定方法・使い方をご覧ください。

WordPressブログにおすすめのプラグイン
【2022年】WordPressブログにおすすめのプラグイン10選本記事では、WordPressブログへ最初に導入するべき必要最低限のプラグインだけをまとめました。この記事を読めば、WordPress初心者さんでもカンタンにプラグインを導入できますよ。...

Autoptimizeとは?

Autoptimize

Autoptimizeとは、WordPressのソースコード(HTML・CSS・JSなど)を最適化して、表示速度を高速化するプラグインです。

本来なら専門的な知識が必要ですが、簡単な設定だけで最適化することができます。

たとえば、改行やスペースを削除して「縮小」したり、複数のファイルを結合して「圧縮」したりできる。

コンピュータがプログラムを読み取るときの 「ムダ」を省いてくれます。

ちなみにGoogleが無料で提供している「PageSpeed Insights」というツールで、サイトの表示速度を計測することができます。

PageSpeed Insightsの使い方

まず、PageSpeed Insightsにアクセスします。

PageSpeed Insightsの使い方

調べたいサイトURLを入力して「分析」をクリックします。

PageSpeed Insightsの使い方

すると、1分ほどで分析結果が表示されます。

上記より、当サイトの携帯電話のページスピードは「78」という結果でした。

PageSpeed Insightsの使い方

デスクトップのページスピードは「98」という結果でした。

ここで「改善できる項目」として指摘されている内容を、Autoptimizeでまとめて対策できます。

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

つぎに、 Autoptimizeをインストールして有効化していきます。

プラグインの新規追加

WordPressの管理画面から、「プラグイン→新規追加」をクリックします。

Autoptimizeのインストール方法

画面右側の検索窓に「Autoptimize」と入力して、「今すぐインストール→有効化」をクリックします。

これで、インストールと有効化の完了です。

Autoptimizeの設定方法・使い方

つぎに、Autoptimizeの設定方法と使い方について解説していきます。

設定は簡単で項目にチェックを入れていくだけです。

Autoptimizeの設定方法・使い方

WordPressの管理画面から「設定→Autoptimize」をクリックして、以下の項目を設定します。

  • JS、CSS&HTMLの最適化
  • 画像最適化
  • 追加の自動最適化

JS、CSS&HTMLの最適化

まず、JavaScript・CSS・HTMLのソースコードを最適化していきます。

JavaScript オプション

Autoptimizeの設定

JavaScriptオプションでは、以下の2つにチェックを入れてください。

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

CSSオプション

Autoptimizeの設定

CSSオプションでは、以下の3つにチェックを入れてください。

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

HTMLオプション

Autoptimizeの設定

HTMLオプションでは、以下の1つにチェックを入れてください。

  • HTMLコードを最適化

設定が完了したら、「変更の保存とキャッシュの削除」をクリックします。

画像最適化

画像最適化の設定では、以下の2つがあります。

  • 画像を最適化
  • 画像の遅延読み込み(Lazy-load)を利用

ここでは「画像の遅延読み込み(Lazy-load)を利用」にチェックを入れてください。

画像の遅延読み込みとは、表示されている画面内だけの画像を読み込み、それ以外の画像はスクロールした時に読み込むことで軽くしてくれる機能です。

プラグイン「EWWW Image Optimizer」を使って設定している方は、上記2つのチェックを外しましょう。

機能が重複するので、どちらか1つを設定しておけばOKです。

EWWW Image Optimizerの使い方・設定方法
EWWW Image Optimizerの使い方・設定方法【画像圧縮プラグイン】本記事では、プラグイン「EWWW Image Optimizer」の使い方・設定方法を画像付きでわかりやすく解説しています。この記事を読めば、ブログ初心者さんでも簡単にサイトの表示速度を改善できますよ。 ...

追加の自動最適化

Autoptimizeの設定

追加の自動最適化では、以下の2つにチェックを入れてください。

  • Googleフォント:Googleフォントの削除
  • 絵文字の削除

設定が完了したら、「変更の保存」をクリックします。

Autoptimizeでリソースを最適化しよう!

まとめ:Autoptimizeでリソースを最適化しよう!

今回は、【プラグイン】Autoptimizeの設定方法・使い方を画像付きでわかりやすく解説しました。

Autoptimizeは、サイトを軽くして表示速度を改善してくれる便利なプラグインです。

簡単に設定できるので、サイトスピードが遅くて悩んでいる方は試してみてください。

今回は以上です。

WordPressブログにおすすめのプラグイン
【2022年】WordPressブログにおすすめのプラグイン10選本記事では、WordPressブログへ最初に導入するべき必要最低限のプラグインだけをまとめました。この記事を読めば、WordPress初心者さんでもカンタンにプラグインを導入できますよ。...