WordPress設定

Autoptimize コードを最適化して高速化するプラグイン 設定方法と使い方読み終わるまで 1

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

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

この記事を見ることで得られるメリット
  • Autoptimizeのインストール方法がわかります
  • コードを最適化して高速化する設定がわかります

Autoptimizeで実現できること

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

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

これらのスクリプトコード内の空行などの無駄な部分を圧縮して最適化するのはファイルを送信する時だけ実施され、キャッシュ化されます。つまりの恒久的に最適化するわけではなく、元々のコードファイルはそのままの状態に保たれています。

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

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

Autoptimizeは利用しているWordpress用のテーマによってはブログ・サイトの表示に不具合が起きる可能性があります。不具合が起きた場合は無効化することで元に戻すことができます。
Wordpressの有料テーマ「JIN」の場合は公式にAutoptimizeを推奨しているので不具合が起きる可能性は低いです。

類似のWP-Optimizeというプラグインがありますが、使用しているテーマがJINの場合はAutoptimizeのほうがモバイルのパフォーマンスは高いです。 ※PageSpeed Insightsで検証済み

Autoptimizeのインストール方法

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

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

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

プラグインを追加画面の検索ボックスに「Autoptimize」と入力して検索結果を表示させますプラグインを追加画面の検索ボックスに「Autoptimize」と入力して検索結果を表示させます
  1. 検索ボックスに”Autoptimizeと入力すると下に検索結果が表示されます
  2. ”Autoptimize”の今すぐインストール”ボタンをクリックします

上の写真に表示されている「Autoptimize criticalcss.com power-up」は有料版なので間違えてインストールしてしまわないようご注意ください

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

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

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

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

Autoptimizeの使い方

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

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

Autoptimizeの設定

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

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

JavaScriptオプション

Autoptimize設定のJavaScriptオプションAutoptimize設定のJavaScriptオプション

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

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

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

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

CSS オプション

Autoptimize設定のCSS オプションAutoptimize設定のCSS オプション

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

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

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

もし他の設定項目を有効化した後にブログ・サイトの表示に問題が発生した場合はオンにした設定項目の☑を外してオフにしてください。

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

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

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

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

キャッシュ情報はAutoptimizeプラグインが利用しているキャッシュの保存先です。

CDNとは外部サービスのキャッシュ機能です。サイトの高速化や負荷軽減に利用するので、アクセス数の多くない個人ブログ・サイトでは利用することはありません

画像

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

Autoptimize設定の画像Autoptimize設定の画像

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

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

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

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

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

「画像の遅延読み込み (Lazy-load) を利用」は画像ファイル形式がWebPになっているブログサイトでは有効化しないほうがPageSpeed Insightsで計測した時にモバイルの速度は向上しました。一方では画像ファイル形式がJPEGになっているブログサイトでは有効化したほうがパフォーマンスは向上しました。なので環境によってパフォーマンスに差があるため検証する必要があります。

画像の右隣りにあるタブの「クリティカルCSS」機能は有料サービスなので設定は不要です

追加

Autoptimize設定の追加Autoptimize設定の追加

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

Googleフォントの削除を選択するとパフォーマンス向上が見込めますが、デメリットとして目次生成プラグイン「Rich Table of Contents」の基本設定のフォント設定でNoto SansやHelveticaを利用していると目次がデフォルトの文字に変わってしまいます

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

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

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

まとめ

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

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

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

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

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

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

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

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