Cocoonを使うとAutoptimizeプラグインが不要になるという記事をよく見かけます。
逆に、普通にAutoptimizeを導入すると上手く動かないので、Autoptimizeの導入を諦めている人も多いかもしれません。
私もAutoptimizeを有効化してうまく動かないので放置していた一人です。
この記事では、重い腰を上げて、CocoonでAutoptimize不要という流れに逆らってAutoptimizeを使う方法を調べた結果をまとめておきます。
ちなみに、Autoptimizeを導入しても、Page Speed Insightの数値はCocoonの高速化オプションを使っている時とほとんど変わりません。PSIの点数を上げたいということであれば、今回の記事は役に立たないと思います。
Adsenceを導入しているとAdsenseを遅延読み込みしない限り、どうやっても上がらない壁がありますので、諦めが肝心です
この記事には親テーマのバージョンアップに依存する子テーマのカスタマイズが含まれます。テーマのバージョンアップの際にデザインが崩れた場合は、同じ手順で子テーマのカスタマイズを再度行えば、デザインの崩れは解消します。
Autoptimizeをインストール
有名プラグインなので、ダッシュボードで検索してインストールします。
Cocoonの高速化オプションをOFFにする
ブラウザキャッシュの有効化:ON
こちらはAutoptimizeには無い機能なので、お好みでONにします。
縮小化（HTML/CSS/JS）：OFF
縮小化は、Autoptimizeの機能で賄いますので、全てOFFにします。
特に、Query monitorが動かない件があるのでHTML圧縮はOFFはマストです。
Autoptimizeの設定
JavaScript
インラインのJSも連結をチェック
インラインのJSも連結をチェックしないとCocoonの場合は動きません。
Cocoonでは、wp_add_inline_script()で動的にinline JSを追加しています。
参考：https://github.com/yhira/cocoon/blob/master/lib/utils.php
inline JSを同時にaggregateしないと、inline JSが先に読み込まれて依存関係が崩れてしまうのが理由です。
inline JSをaggregateするオプションを有効にするとCacheファイルが巨大になるとAutoptimizeには書かれていますが、Cocoonの場合は大丈夫だと思います。
もし、キャッシュファイルが増え続けるような場合、一つの一つのキャッシュファイルが巨大になるわけではないので読み込み自体は影響ないですが、HDD/SSDの容量的にネックになる可能性があります。
キャッシュファイルのサイズが気になる場合はの対策は、参考記事に書かれています。
* keep “aggregate inline JS” on, excluding the inline JS that is busting your cache
⇒inline JSの記述にならないように修正する
* or you can disable “aggregate inline JS” and exclude the JS that are needed early by the inline JS
⇒inline JSの連結をやめて、inline JSが依存しているJSファイルを除外指定する
上記はCSSのインラインCSSを連結する場合にも適用できる
JS除外設定
Contact form 7 add confirmを使っている場合は、CocoonのJS除外設定と同じでは動かなくなります。
Cocoonは、jQueryが標準と違うので、jquery.min.js指定を追加します。
Contact form 7 add confirmを追加する場合は、wpc7も追加しないと動かないです。
jquery.min.js,plugins/contact-form-7-add-confirm/,plugins/contact-form-7/,wpcf7
Contact form 7が5.4にバージョンアップしてjsの除外設定を追加する必要が出たようです。
それに伴い、Ver5.4のContact form7との組み合わせで、Contact form 7 add confirmも動かなくなりました。現時点ではバージョンを下げるしか対策が無いです。
CSSオプション
『CSSのインライン化と遅延』以外を全てチェックします。
CSSを圧縮すると、CocoonのCSS圧縮では問題なかった記述が消えてしまうことがあります。そういう場合は、CSSの記述に問題がありますのでCSSを修正します。
インラインのCSSも連結をチェック
CSSを連結する場合は、『インラインのCSSも連結』のチェックは必須です。
このオプションをオフにするとcocoon-style-inline-cssで読み込まれるインラインスタイルがheadの一番最後に来てしまい、読み込みの依存関係が崩れてデザインも崩れますので、オンにする必要があります。
インラインのCSSも連結をチェックすると、キャッシュファイルが増え続けます。
ココは悩ましいところですが、少しテーマファイルを修正することで解消できます。
インラインのCSSも連結でキャッシュファイルを増やさなくする
Cocoonはアクセス解析用にインラインCSSを埋め込みます。この部分が記事毎に変わるので記事の数だけキャッシュファイルが増え続けます。
<?php //アクセスカウント取得用スタイル
if (!is_admin() && is_singular() && is_access_count_enable()): ?>
body::after{
content: url("<?php echo get_template_directory_uri(); ?>/lib/analytics/access.php?post_id=<?php echo get_the_ID(); ?>&post_type=<?php echo get_accesses_post_type(); ?>");
visibility: hidden;
position: absolute;
bottom: 0;
right: 0;
width: 1px;
height: 1px;
overflow: hidden;
display: inline !important;
}
<?php endif ?>参考：https://github.com/yhira/cocoon/blob/424b2a2371becedc85556c506f6478a55ac8e1e0/tmp/css-custom.php
これを避けるには、この部分をAutoptimizeで処理されないように変更する必要があります。
まず、一連のインラインCSSを出力する部分から、記事毎に異なる部分をコメントアウトします。
tmp/css-custom.phpを子テーマにコピーして、編集します。
<?php //アクセスカウント取得用スタイル
if ( 0 ) :
if (!is_admin() && is_singular() && is_access_count_enable()): ?>
body::after{
content: url("<?php echo get_template_directory_uri(); ?>/lib/analytics/access.php?post_id=<?php echo get_the_ID(); ?>&post_type=<?php echo get_accesses_post_type(); ?>");
visibility: hidden;
position: absolute;
bottom: 0;
right: 0;
width: 1px;
height: 1px;
overflow: hidden;
display: inline !important;
}
<?php endif ?>
<?php endif ?>記事毎に異なるCSSは別途ヘッダーに挿入することにします。
具体的には、tmp-user/header-insert.phpに以下のようにAOの最適化から除外を追加して上で転記します。
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>
<?php if (!is_admin() && is_singular() && is_access_count_enable()): ?>
<!--noptimize-->
<style>
body::after{
content: url("<?php echo get_template_directory_uri(); ?>/lib/analytics/access.php?post_id=<?php echo get_the_ID(); ?>&post_type=<?php echo get_accesses_post_type(); ?>");
visibility: hidden;
position: absolute;
bottom: 0;
right: 0;
width: 1px;
height: 1px;
overflow: hidden;
display: inline !important;
}
</style>
<!--/noptimize-->
<?php endif; ?>こうすることで、headの一番最後にbody:afterだけが移動します。body:afterを最後に読み込むことで上書きの問題が起きますが、この部分は他に使っていないのが前提なので問題は起きないと思います。
HTMLオプション
HTMLコード最適化もチェックします。CocoonのHTML圧縮よりも信用できると思います。
その他オプション
Autoptimizeのキャッシュファイルがそれでも増え続ける場合
記事毎にjsやcssが異なるのが原因ですので、キャッシュファイルを確認して対処するしかありません。
- wp-content/cache/以下のファイルを確認します。
- ファイルの差分を確認して、原因を探します。
- その原因の部分をautoptimizeの最適化から外します。
<!--noptimize-->
囲む
<!--/noptimize-->plugin load filterなどでページごとに使用するプラグインの組合せが変わるとその分だけキャッシュファイルの種類が増えていきます。これは仕方のないことだと思いますし、そのようなケースはキャッシュファイルの増加速度は遅いと思います。
まとめ
Cocoonの高速化オプションの代わりにAutoptimizeに変えるとかなり速くなった感じがします。
高速化オプションのHTML圧縮で動かなくなったQuery monitorもAutoptimizeに切り替えたら動くようになりました。
今回の内容は結構奥が深いので、CocoonのソースとAutoptimizeの挙動を照らし合わせながら解析して進める必要がありました。
そこまでやるのが面倒な場合は、AutooptimizeでJSとCSSの連結はやめて最適化と圧縮だけを担当させるようにすれば、インラインCSS、インラインJS、キャッシュファイル増加の問題は一切起きません。
- CSもJSも連結しなければ、CocoonとAutoptimizeの組合せで問題は起きない
- 連結する場合
- CocoonにはインラインCSSとインラインJSがあるので、インラインも含める必要あり
- CocoonのインラインCSSは記事毎に異なるので、キャッシュサイズが増える問題が起きる
- キャッシュサイズの増加を避けるには以下の方法が必要
- テーマファイルを修正するか
- CSSの連結をやめる
