Cocoon｜レンダリングを妨げるリソースの除外の改善

WordPress テーマ『Cocoon』のサイトを PageSpeed Insights でチェックしたときに、改善できる項目に『レンダリングを妨げるリソースの除外』という表示がされます。

今回はこれを改善していきたいと思います！

レンダリングを妨げるリソース（初期状態）
レンダリングを妨げるリソースの除外方法
1. Cocoon の『高速化』設定を行う
2. JavaScript をフッターで読み込む

レンダリングを妨げるリソース（初期状態）

初期状態の Cocoon でチェックしてみると、下記の URL がレンダリングを妨げるリソースとして指摘されていました。

https://example.com/wp-content/themes/cocoon-master/style.css?ver=5.7.2
https://example.com/wp-content/themes/cocoon-master/webfonts/fontawesome/css/font-awesome.min.css?ver=5.7.2
https://example.com/wp-content/themes/cocoon-master/webfonts/icomoon/style.css?ver=5.7.2
https://example.com/wp-includes/css/dist/block-library/style.min.css?ver=5.7.2
https://example.com/wp-content/themes/cocoon-master/plugins/baguettebox/dist/baguetteBox.min.css?ver=5.7.2
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4
https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js?ver=1.4.1

（バージョン等が異なる場合もあります）

それぞれ簡単に説明しますと……

Cocoon 親テーマの CSS ファイル
Font Awesome（アイコンフォント）の CSS ファイル
IcoMoon（アイコンフォント）の CSS ファイル
Gutenberg 関連の CSS ファイル
baguetteBox.js（画像ポップアップ）の CSS ファイル
jQuery（本体）の JS ファイル
jQuery Migrate（本体のバージョンアップをサポート）の JS ファイル

といった感じです。

では、それぞれ改善していきたいと思います。

レンダリングを妨げるリソースの除外方法

Cocoon の『高速化』設定を行う

まずは手っ取り早いところで、『Cocoon 設定』の『高速化』設定からやってみましょう。

全部の項目にチェックを入れればOKです！

が……レンダリングを妨げるリソースに該当する部分の説明も書いておきますね。

『縮小化 ⇒ CSS縮小化』の『CSSを縮小化する』のチェックを入れると、Cocoon や Gutenberg の CSS ファイルが除外されます。

あと、『Lazy Load設定 ⇒ WEBフォント（β版）』の『アイコンフォントの非同期読み込みを有効にする』のチェックを入れると、Font Awesome や IcoMoon の CSS ファイルが除外されます。

この設定だけでは、完全に改善できないので、引き続きやっていきましょう。

JavaScript をフッターで読み込む

おそらく下記の2つは改善されず、残ったままになっていると思います。

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4
https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js?ver=1.4.1

JS ファイルはフッターで読み込むようにすればOKです。

具体的な改善方法は、子テーマの functions.php に下記のコードをコピペするだけです。

//-------------------------------------------------------
//JavaScriptをフッターで読み込む
//-------------------------------------------------------

function is_footer_javascript_enable() {
	return true;
}

functions.php は非常にデリケートなファイルです。編集前には必ずバックアップを取り、もしも編集後にエラーが出るようでしたら、バックアップから復元しましょう。

これで JavaScript をフッターで読み込めるので、レンダリングをブロックしているリソースがなくなります。

今一度 PageSpeed Insights でサイトをチェックしてみてください。改善できる項目から『レンダリングを妨げるリソースの除外』がないことを確認できると思います。

実は以前、Cocoon には JavaScriptをフッターで読み込む機能があったのですが、不具合が出るプラグインがけっこうあったそうで、廃止されたとのこと。