WordPress

WordPress のプラグイン Autoptimize についての覚書

投稿日:2021年3月11日 更新日:

1. Autoptimize プラグインについて

WordPress のプラグイン Autoptimize は、サイトを高速化してくれる様々な機能を備えています。

この手のプラグインは、各設定項目により何が起きるのか把握しずらく、その手の情報も多くありません。そこで本記事では、私の認識しているいくつかのポイント(HTML, CSS, JS のいくつかの項目のみ)をまとめてみました。

※ 私の認識ですので、細かい部分で実際と異なるところがあるかもしれません。

2. Autoptimize プラグインを有効化

有効化しただけでは何も変わりません(「その他オプション」にチェックが入っていても)。

3. その他オプション

本記事の内容は、[JS, CSS & HTML] タブ内の [その他オプション] はすべてチェックを入れていることを前提としています(デフォルトでこうなっています)。

[JS, CSS & HTML] タブ内の [その他オプション]

4. JavaScript オプション

ここの設定によって実行される処理は、本プラグインのディレクトリ内にある classes/autoptimizeScripts.php に記述されています。

設定項目 説明
JavaScript コードの最適化
  • ここだけチェックを入れても、ほぼ変化なし。
  • 1つの <script> タグのリンク先が Autoptimize のキャッシュファイルに変わるだけ(中身はほぼそのまま)。
  • ここにチェックを入れた上で、この下の設定項目にチェックを入れて利用する。
JS ファイルを連結する
  • JavaScriptファイルを読み込んでいる <script> タグが削除され、代わりに 1つの <script src=”xxxx” …> タグが出力される。削除された JavaScript コードは、こちらのファイルにまとめられる。
  • デフォルトでは defer 属性が指定される。[<head> 内へ JavaScript を強制] にチェックが入っていると、defer は付かないようだ。
  • 追加されるコード例:<script defer src="https://example.com/wp-content/cache/autoptimize/js/autoptimize_XXXX.js"></script>
インラインのJSも連結
  • [JS ファイルを連結する] と合わせて利用できる。
  • インラインの <script> タグも削除され、1つのファイルにまとめられる。
連結しないで遅延
  • <script …> が <script defer …> に置換される。
  • async 属性は削除されるようだ。
[JS, CSS & HTML] タブ内の [JavaScript オプション]

5. CSS オプション

ここの設定によって実行される処理は、本プラグインのディレクトリ内にある classes/autoptimizeStyles.php に記述されています。

設定項目 説明
CSS コードを最適化
  • ここだけチェックを入れても、ほぼ変化なし。
  • 1つの <link rel=”stylesheet” …> タグのリンク先が Autoptimize のキャッシュファイルに変わるだけ(中身はほぼそのまま)。
  • ここにチェックを入れた上で、この下の設定項目にチェックを入れて利用する。
CSS ファイルを連結する
  • CSSファイルを読み込んでいる <link> タグが削除され、代わりに 1つの <link rel=”stylesheet” src=”xxxx” …> タグが出力される。削除された CSS コードは、こちらのファイルにまとめられる。
  • <link rel="preload" ...> は出力されない。
  • インラインのCSSコードは、まとめられない。
  • 何らかの CSS ファイルに対して、<link rel=”preload” …> を出力していた場合、このタグは削除されないので、「対応するCSSファイルが読み込まれていない」といった旨の警告メッセージが表示される。
インラインの CSS も連結
  • インラインの CSS もまとめられる。
CSS のインライン化と遅延
  • まとめられた CSS ファイルを読み込む <link> タグが遅延読み込みされる属性で出力される。
    • 具体的には、<link rel="stylesheet" media="print" href="https://example.com/wp-content/cache/autoptimize/css/autoptimize_XXXXXX.css" onload="this.onload=null;this.media='all';" /> というタグが出力される(onload イベント発生時に読み込まれるようだ)。
  • チェックボックスの下にあるテキストエリア(ファーストビューのCSS)にCSSコードが入力されていれば、<style id="aoatfcss" media="all">.foo{color:#000}</style> といったタグが出力される。
  • テーマの functions.php に、「add_filter( 'autoptimize_fitler_css_preload_and_print', '__return_true' );」を記述すると、<link rel="preload" ...> タグも出力される。

[JS, CSS & HTML] タブ内の [CSS オプション]

5. HTML オプション

ここの設定によって実行される処理は、本プラグインのディレクトリ内にある classes/autoptimizeHTML.php に記述されています。

設定項目 説明
HTML コードを最適化
HTML コメントを維持
  • HTML コメントが残る(<!-- XXXX --> の部分が残る)。
[JS, CSS & HTML] タブ内の [HTML オプション]

6. どの機能を使うか?

本記事で取り上げた設定項目に関しては、どれを使っても問題ないです。

但し、「少しずつ設定を変更しては、出力されるHTMLに対して、エラーがないか? 読み込み速度は向上したか?を確認する」といった作業を行い、問題ない範囲で利用することをお勧めします。

Webページのチェックツールのリンクを載せておきます。

7. 問題点

CSSファイルの連結は、CSSの文法を考慮せずに連結するので、文法がおかしくなる場合があります。
例えば、個別のCSSファイルの先頭にあった「@charset "UTF-8";」が、まとめられたCSSファイルでは途中に入ってしまう等。このCSSコードに対して、CSSの文法チェックするとエラーになります。

8. 参考

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPress の機能を使って独自のPHPファイルにヘッダーとフッターを追加するサンプルページを作成しました

WordPress の持つ get_header(), get_footer() 関数を利用して、独自のPHPファイルにヘッダとフッターを表示するサンプルページを作成しました。 サンプルページのURL …

WordPress

WordPress 5.3 のエディターで、カスタムHTMLのボックスをリサイズ可能にする

WordPress 5.3 のエディターで、カスタムHTMLのボックスをリサイズ可能にする方法について説明します。

WordPress

【WordPress】特定の画像には Easy FancyBox を適用させない方法

目次1. WordPress の Easy FancyBox プラグインについて問題点2. 特定の画像リンクで、Easy FancyBox を適用させない方法3. デモ 1. WordPress の …

WordPress

JP Markdown と Classic Editor をやめ、Gutenberg を利用することにしました

JP Markdown と Classic Editor をやめ、Gutenberg を利用することにしました。かなり便利そうです。

WordPress

【WordPress】Gutenberg の 画像ブロック(core/image)で相対URLをセットする

WordPress の Gutenberg において、「 画像ブロック (core/image)」で相対URLを使用するプラグインを作りましたので紹介します。