Autoptimize コードを最適化して高速化するプラグイン 設定方法と使い方

この記事を読むのに必要な時間は0分です。

ワードプレス(WordPress)のソースコードを最適化して高速化するプラグイン Autoptimize を解説します。

Autoptimizeで実現できること

Autoptimizeを使うとWordpress内の下記のソースコードを最適化してファイルサイズを圧縮してくれるのでブログ・サイトの表示速度が速くなります

• JavaScriptコード
• CSSコード
• HTMコード

コードファイル以外に画像ファイルも最適化してくれます。

Autoptimizeをインストールして有効化しただけではすべての最適化機能は有効になっていないので設定は必須になります。

Autoptimizeのインストール方法

AutoptimizeプラグインをWordpressにインストールする手順を解説します。

WordPressのダッシュボード(管理者画面)のプラグインの新規追加を選択します

↑WordPressのダッシュボード(管理者画面)のプラグインの新規追加をクリックします。

プラグインを追加画面の検索ボックスに「Autoptimize」と入力して検索結果を表示させます

1. 検索ボックスに”Autoptimizeと入力すると下に検索結果が表示されます
2. ”Autoptimize”の今すぐインストール”ボタンをクリックします

「インストール中」と表示されます

Autoptimizeのインストールが完了すると「有効化」と表示されるのでクリックします

↑Autoptimizeのインストールが完了すると有効化ボタンが表示されるのでクリックします。

Autoptimizeを有効化すると表示される画面

これでAutoptimizeのインストールと有効化が完了しました。

Autoptimizeの使い方

Autoptimizeをインストールして有効化しただけだと全ての最適化機能はオフの状態になっています。

コードを最適化してブログ・サイトの表示スピードを改善するには最適化の設定項目をオンに変更する必要があります。

Autoptimizeの設定

Autoptimizeには次の4つの設定タブ画面があります。

• JS、CSS&HTML
  JavaScript オプション
  CSS オプション
  HTML オプション
  CDNオプション
  キャッシュ情報
  その他オプション
• 画像 ※設定不要
  
• クリティカル CSS ※有料サービス
• 追加 ※設定不要

JavaScriptオプション

Autoptimize設定のJavaScriptオプション

↑「JavaScriptコードの最適化」の1か所にチェックマークを入れてオンにします。

他の設定項目は初期設定のままで大丈夫です。

「連結しないで遅延」や「連付しないで遅延」等にはチェックを入れない方がパフォーマンスは上がります。※全ての環境で同じになるわけではりませんが、テーマにJINを利用している場合は「JavaScriptコードの最適化」の1か所だけを有効にしたほうがPageSpeed Insightsで計測した時にモバイルの速度は向上しました。

CSS オプション

Autoptimize設定のCSS オプション

↑一番上の「CSS コードの最適化」にのみチェックマークを入れてオンにします。

「CSSファイルを連結」やはファイルを結合するのでサーバへのリクエスト数が減るのでパフォーマンス向上が見込めますが、テーマにJINを利用している場合は「CSS コードの最適化」の1か所だけを有効にしたほうがPageSpeed Insightsで計測した時にモバイルの速度は向上しました。

他の設定項目は初期設定のままで大丈夫です。
ブログ・サイトがHTTP/2通信の場合はファイルを連結しないほうが表示速度は速くなるため、他の設定はオフにすることをおすすめします。

HTML オプション・CDNオプション・キャッシュ情報・その他オプション

Autoptimize設定のHTML オプション・CDNオプション・キャッシュ情報・その他オプション

↑一番上の「HTML コードを最適化」にチェックマークを入れてオンにします。

他の設定項目は初期設定のままで大丈夫です。

画像

ここからは画像タブの説明になります。

Autoptimize設定の画像

↑この画像設定では有効にする箇所はありません。

「画像を最適化」はCDNという外部キャッシュサービスを利用している時に初めて有効になる項目なのでチェックマークを付けてオンにしても画像は最適化されません。

「画像の遅延読み込み (Lazy-load) を利用」は記事を表示する際に画像を全て読み込まなくなるので記事自体の表示速度を向上させることができます。つまり先にサイトの文字データの箇所を表示させ、画像ファイルは後から読み込んで表示するので利用者側にストレスがなくなるので離脱率を下げることができます。

ですが、WordPress5.5から標準でLazy load機能が実装されたので、プラグインを利用して遅延読み込み (Lazy load)機能を実装する必要がなくなりました。WordPress側とAutoptimize側の両方のLazy loadを有効化すると競合が起きて不具合が起きる可能性が高いので「画像の遅延読み込み (Lazy-load) を利用」はオフにしてください。

ちなみに他の画像読み込みプラグイン、例えば「EWWW Image Optimizer」を利用している場合はそちらにも遅延読み込み機能があり、競合するのでオフ(無効化)にしてください。

追加

Autoptimize設定の追加

↑この追加設定は初期設定のままで、何も有効化しなくても大丈夫です。
設定を有効にしても表示速度改善に繋がるような項目がないからです。

AutoptimizeのCSSとJavaScriptのキャッシュ表示

Autoptimizeのプラグインを有効化するとWordpress管理画面の上部にオンにするとCSSとJavaScriptのキャッシュサイズが表示され、キャッシュの削除もできます。

WordPress管理画面の上部に表示されるAutoptimizeのキャッシュ

まとめ

Autoptimizeを導入するメリットはJavaScriptやHTML/CSSのスクリプト(コード)ファイルを最適化し軽量化することでやブログ・サイトの表示速度の向上が期待できる点です。

コードの最適化用のプラグインとしては人気がありますが、使用しているテーマによっては表示が崩れる可能性があります。

他のコード最適化プラグインや高速化プラグイン、画像圧縮用プラグインと競合する可能性もあるので注意が必要です。

とはいえ競合が起きて不具合が発生した場合はどちらか一方のプラグインを無効化すれば解決するので、さほど慎重になる必要葉ありません。

有料版もあるプラグインなのでアップデート(更新)もされているのでセキュリティの面でも安心して使うことができます。

Autoptimizeと比較対象になる類似のコード最適化用プラグインは「Head Cleaner」というのもありますが、5年以上もアップデートされておらずWordPressの最新バージョンにも対応していない可能性が非常に高いので、実質メジャーなコード最適化プラグインはAutoptimizeしか存在しません。

WP-Optimizeという類似の最適化プラグインがありますが、Wordpressの有料テーマJINを利用している場合はAutoptimizeを利用したほうがパフォーマンスは向上します。

有料WordPressテーマの「JIN」を利用している場合は公式に推奨されているAutoptimizeの導入をおすすめします。