WordPress テーマ『Cocoon』のサイトを PageSpeed Insights でチェックしたときに、改善できる項目に『レンダリングを妨げるリソースの除外』という表示がされます。
今回はこれを改善していきたいと思います!
レンダリングを妨げるリソース(初期状態)
初期状態の 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;
}
これで JavaScript をフッターで読み込めるので、レンダリングをブロックしているリソースがなくなります。
今一度 PageSpeed Insights でサイトをチェックしてみてください。改善できる項目から『レンダリングを妨げるリソースの除外』がないことを確認できると思います。
実は以前、Cocoon には JavaScriptをフッターで読み込む機能があったのですが、不具合が出るプラグインがけっこうあったそうで、廃止されたとのこと。
その機能は、不具合が出てしまうプラグインが結構あったので、廃止しました。
レンダリングを妨げるリソースの除外について
なので、もしもご自身のサイトに何が不具合が起きた場合は、functions.php をカスタマイズ前の状態に戻してくださいね。
コメント
わかりやすい記事有難うござます。cocoon使用している者です。
全プラグイン停止→コードコピペ+php更新→全プラグインONにしても、やっぱり1.12.4/jquery.min.js?ver=1.12.4と1.4.1/jquery-migrate.min.js?ver=1.4.1が出てきます。
上は(ajax.googleapis.com)、下は(cdnjs.cloudflare.com)です。どうすれば解決できるんでしょうか…
また、他にも/css?family=Montserrat&display=swap&ver=5.8.4(ajax.googleapis.com)
css/all.css?ver=5.8.4(cdnjs.cloudflare.com)
がありこれも消えません。
またお時間のあるときに教えて頂ければと思います。
ブログ初心者さん
こんにちは、トモです^^
コメントありがとうございます。
このカスタマイズは現在当サイトでも適用していますので、コード自体に問題はなさそうです。
そうなると「キャッシュ」関係が怪しいです。
(キャッシュは大まかに言うと、「記事の情報を一時保存しておき、ページの表示速度を高速化するための仕組み」になります)
ひとまず「キャッシュの削除」を行ってみてはいかがでしょうか?
キャッシュにも色々あるので、ややこしいのですが……
「レンタルサーバー名 キャッシュ削除」
「Cocoon キャッシュ削除」
「ブラウザ名 キャッシュ削除」
などと検索すれば方法はわかると思います。
一通りキャッシュ削除を行った状態で、再度チェックしてみてください。
あと、このカスタマイズは初期状態の Cocoon で行っているものです。
なのでプラグインを有効化すると、別のレンダリングを妨げるリソースが出てしまう可能性があります。
キャッシュを削除しても消えないレンダリングを妨げるリソースは、おそらく何かしらの「プラグイン」が出力しているものだと思います。
プラグインが原因の場合、この記事のカスタマイズでは対処できません。申し訳ありませんm(_ _)m
お返事ありがとうございます。
キャッシュは一通りしてみたのですが、まだ残っているのでプラグインの仕様かもしれません。
ひとまずこのままで様子見してみます。
ご丁寧にありがとうございました。
またご不明な点などあれば、気軽にコメントしてくださいね^^
先ほどコメントした者です。不要なプラグインを削除すると、…1.12.4/jquery.min.js?ver=1.12.4(ajax.googleapis.com)
…1.4.1/jquery-migrate.min.js?ver=1.4.1(cdnjs.cloudflare.com)
のみになりましたが、やはり上の2つは残ります…