書きそびれました。

メインのstyles.css以外にも、下記のような使っていない外部cssのインライン化を防ぐ方法はありますか？

• keyframes.css
• slick系
• baguetteBox（←これは画像拡大プラグインのcss…？ですか？）

よろしくお願いいたします。

①インライン化しないようにするにはstyles.css自体から内容を削除するしか方法を思いついていないのですが、他になにか策はありますか？

Cocoonでは各CSSファイルをインライン化する際に縮小化コードを通していますが、そのコード実行時に不要なスタイルのコードを除外するようにする方法があります。

具体的には、'tag_code_to_minify_css'や'css_url_to_css_minify_code'といったフックを用い、不要な箇所を空に置換するなど。

②これではテーマを更新するたびにstyles.cssが上書きされてしまいますが、一度クリーンな状態にした親cssを維持し続ける方法はなにかありますか？

上記の方法で子テーマのfunctions.phpにでもプログラムを書いておけば、アップデートされるマスターのファイルを触る必要がないので、上書きされる心配はありません。

メインのstyles.css以外にも、下記のような使っていない外部cssのインライン化を防ぐ方法はありますか？

ほとんどのスタイルファイル読み込みはwp_enqueue_style関数で行われていると思うので、不要な該当ファイルのハンドル名を調べて、wp_dequeue_style関数で読み込みから削除すればよいかと思います。

スタイルの読み込みはscripts.phpにまとめられているので、このファイル内にある各関数を見ることでハンドル名を調べることができます。

ただし、各スタイルファイルの読み込みはCocoon設定に応じて行われている（読み込まれている＝設定上必要なファイルだということ）ため、読み込みを削除するとスタイルが反映されない箇所が出てくると思います。

baguetteBoxとかであれば、Cocoon設定の「画像の拡大効果」を「なし」にすれば読み込まれないかもしれません。
他は、ロコさんが疲れているようにPHPでカスタマイズするしかないかと思います。

slickについては、Cocoon設定「カルーセル」で「表示しない」設定にするとcssとJavaScriptを読み込まない用にもしておきました（これは追加し忘れてました）。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

ロコさん、わいひらさん、ありがとうございます。

具体的には、'tag_code_to_minify_css'や'css_url_to_css_minify_code'といったフックを用い、不要な箇所を空に置換するなど。

実際に子テーマと被っているcssを探し出す作業が大変すぎてこれはまだやっていませんが、空への置換でなんとかやってみようと思います…。
＞ちなみにわいひらさん、上記２つのフックは今回の件で言うとなにか違いはありますか？

上記の方法で子テーマのfunctions.phpにでもプログラムを書いておけば、アップデートされるマスターのファイルを触る必要がないので、上書きされる心配はありません。

おっしゃるとおりですね、まさにこういうのをお聞きしたかったです！ありがとうございます。

ほとんどのスタイルファイル読み込みはwp_enqueue_style関数で行われていると思うので、不要な該当ファイルのハンドル名を調べて、wp_dequeue_style関数で読み込みから削除すればよいかと思います。

上記のようにわいひらさんが対応してくれましたので、実際に作業を行ったのはkeyframes.cssだけでしたが、上手く行きました。これもありがとうございます。

slickについては、Cocoon設定「カルーセル」で「表示しない」設定にするとcssとJavaScriptを読み込まない用にもしておきました（これは追加し忘れてました）。

ご対応ありがとうございます。昔自分で導入したslickとぶつかって困ったりしたこともありましたので、大変助かります！

大変恐縮ですが、追加で質問させてください…！

同じ背景で、icomoonで使用するcssもインライン化して外部ファイルとして読み込まれないようにしたいです。
実際のcssを子テーマのcssに転記して読み込まれるようになったのはいいのですが、「icomoon/style.css」だけは他のwp_enqueue_scriptsと違い、下記のような表示になるため上手く制御できませんでした。フィルターフックでfalseを返すとかもできず…。

「loadWebFont」というものについて知識がないので八方塞がりでした。ぜひ教えていただけませんか！

【非短縮時】

loadWebFont("https://milmemo.net/wp-content/themes/cocoon-master/webfonts/fontawesome/css/font-awesome.min.css");
loadWebFont("https://milmemo.net/wp-content/themes/cocoon-master/webfonts/icomoon/style.css");

【短縮時】

performance.mark("inline-js-12-start");
loadWebFont("https://milmemo.net/wp-content/themes/cocoon-master/webfonts/fontawesome/css/font-awesome.min.css");
loadWebFont("https://milmemo.net/wp-content/themes/cocoon-master/webfonts/icomoon/style.css");
performance.mark("inline-js-12-end");
performance.measure("inline-js-12", "inline-js-12-start", "inline-js-12-end");

※見やすくするため便宜上改行などを入れています。

よろしくお願いいたします。

上記２つのフックは今回の件で言うとなにか違いはありますか？

'css_url_to_css_minify_code'は個々のCSSファイルをインライン化した際に実行されるフック、'tag_code_to_minify_css'は最終的に全てのインライン化されたスタイルを出力する際に実行されるフックですが、実際に今回の件でコードを書く分にはあまり大きな違いはないかと思います。

強いて言うなら、個々のCSSファイルのURLを活用するかどうかで、特定のファイルURLに絞ってコードを実行させたいのであれば、'css_url_to_css_minify_code'を利用する形になります。

同じ背景で、icomoonで使用するcssもインライン化して外部ファイルとして読み込まれないようにしたいです。

loadWebFontはアイコンフォント用のファイルを非同期読み込みさせるためのものです。
（高速化設定の「アイコンフォントの非同期読み込みを有効にする」を有効化した場合に動作）

アイコンフォント用CSSファイルは容量が大きい一方で、サイトの外形を整えるような重要なスタイルは含まれていないので、そのような実装になっています。

IcoMoonファイルが読み込まれないと、シェアボタンやフォローボタンのアイコンが全部表示されなくなると思うんですけど、それでも無効にするということでしょうか。

＞ロコさん

フックの件、承知しました。また分からない点が出てきたらこのトピックに質問させていただければ幸いです。

＞ロコさん、わいひらさん

たぶん僕がやろうとしていることが意味不明すぎてあまり意図をお伝えできていなかったです…。

icomoonで使うcssは、子テーマのcssに追記して使用してます（この子テーマcssはインライン化されて読み込まれる）。この変更によって、icomoonを使ってオリジナルで実装しているSNSボタンの表示が爆速になりました。
というか今まではページ読み込み時に背景色すら表示されなかったですが、フォントの実体が読み込まれたおかげでボタン全体もすぐに表示されるようになり満足です。画像添付しておきます。

そして、そうなると「wp-content/themes/cocoon-master/webfonts/icomoon/style.css」は無駄な読み込みになってしまいますし、事実404になっています。ロコさんがおっしゃるように「アイコンフォントの非同期読み込みを有効にする」をOFFにすればその状態ではなくなりますが、FontAwesomeの件を考慮するとOFFにしたくはありません。

そこで、ここの設定をONにしつつ

loadWebFont(" https://milmemo.net/wp- content/themes/cocoon-master/webfonts/icomoon/style.css");

が出力されなくなるようにするにはどうすればいいか？というご質問でした。
「この機能の出力元を知りたい」など、そういうイメージです。

大変分かりにくい上に何度もご足労おかけして申し訳ありません。

また分からない点が出てきたらこのトピックに質問させていただければ幸いです。

WordPressの高速化施策は細かくやりだすとキリがないので、詳しい実装方法などはサポート対象外になるのかもしれません。

icomoonで使うcssは、子テーマのcssに追記して使用してます（この子テーマcssはインライン化されて読み込まれる）。この変更によって、icomoonを使ってオリジナルで実装しているSNSボタンの表示が爆速になりました。

厳密には、表示速度が速くなったわけではなく、icomoonのスタイルを読み込む分だけサイト表示に時間がかかり、その代わりにサイトの表示と同時にicomoonのアイコンも表示されるようになっただけだと思います。

表示速度の改善と視覚的な品質のバランスは人によるかと思います。

この機能の出力元を知りたい

前の返信でも書いた通り、基本的にはscripts.phpにまとめられていますので、ここから各々の関数を見ていけばいいわけです。

 ///////////////////////////////////
//WEBフォントの非同期読み込み
///////////////////////////////////
wp_enqueue_web_font_lazy_load_js();

とあるように、関数wp_enqueue_web_font_lazy_load_jsの中身を必要に応じてカスタマイズすればよいのではないかと。

最も手っ取り早くやるとすれば、子テーマno functions.phpで以下のように空のwp_enqueue_web_font_lazy_load_jsをオーバーライドで読み込めば、親テーマのは読み込まれ無くなります。

function wp_enqueue_web_font_lazy_load_js(){}

引き続きありがとうございます。

wp_enqueue_web_font_lazy_load_js();

はCocoonoテーマフォルダ内でパッと見たところ関数自体が見つからなかったのですが、本体はどこにあるのでしょうか？
（wp_enqueue_styleなどのようにWordPress側の動作になるということ…ですか？）

オーバーライドする案は実質非同期読み込みの設定をOFFにしているのと同じだと思いますので、できればicomoonだけいじりたいと思いました。

utils.php#L532ですね。
子テーマに関数を上書きする形でカスタマイズすることになります。

長々とありがとうございました。
やりたいことは実行できました。

このトピックは終了とさせていただければと思います。