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】特定の画像には Easy FancyBox を適用させない方法

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

WordPressサイトで現在表示しているページの編集ページを開くブックマークレットを作りました

目次概要編集ページへのURL作成したブックマークレットまとめ 概要 WordPressにログインした後、通常のページ(管理ページではなく)を表示すると、画面上部に管理ツールバーが表示されます。このツー …

WordPress

WordPress プラグイン開発における多言語対応(gettextを利用する場合)

目次1. はじめに2. 想定している開発環境3. gettext のインストール4. 多言語対応の作業1. プログラム中の翻訳文字列を使用する箇所で、専用の関数を使うようにします。2. 翻訳ファイルを …

WordPress

WordPress テーマ STINGER 8 で、style.css の変更をすぐに反映させる方法

WordPress の無料テーマである STINGER 8 のカスタマイズのお話です。 スポンサードリンク 目次1. 問題点2. 対策準備作業style.css に変更を加えた後に必要な作業3. まと …

WordPress

【WordPress】Gutenberg をカスタマイズするための情報

WordPress の Gutenberg をカスタマイズするための情報を紹介します。