BLOG

【プラグイン】Autoptimizeの使い方・設定方法をわかりやすく解説

Autoptimize

悩み

WordPressサイトの表示速度を改善したい

こんな悩みを解決します。

こんにちは、やす(@yasublog_1995)です。

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

そこで主要なリソースを簡単に軽量化・圧縮してくれるプラグイン「Autoptimize」が便利です。

本記事の内容

  • Autoptimizeとは?
  • Autoptimizeの導入・インストール
  • Autoptimizeの使い方・設定方法

画像付きでわかりやすく解説します。

本記事を読めば、Autoptimizeの使い方・設定方法を理解でき、カンタンにサイトの表示速度を高速化できます。

画像ファイルの圧縮プラグインについては「EWWW Image Optimizerの設定方法・使い方」を参考にしてみてください。

Autoptimizeとは?

Autoptimize

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

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

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

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

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

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

Autoptimizeの導入・インストール

Autoptimizeのインストール方法

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

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

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

Autoptimizeの使い方・設定方法

Autoptimizeの設定は、簡単で項目にチェックを入れるだけです。

設定が必要な項目は、以下の3つです。

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

WordPressの管理画面から「設定→Autoptimize」をクリックして各種設定していきます。

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)を利用

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

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

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

追加の自動最適化

Autoptimizeの設定

追加の自動最適化では、以下のように設定してくだい。

  • Googleフォント:Googleフォントの削除にチェック
  • 絵文字の削除にチェック

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

まとめ

今回は、【プラグイン】Autoptimizeの使い方・設定方法について解説しました。

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

簡単に設定できるので、サイトが重くて悩んでいる方は使ってみてください。

おわり