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

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

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

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

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

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

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

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

  1. Cocoon 親テーマの CSS ファイル
  2. Font Awesome(アイコンフォント)の CSS ファイル
  3. IcoMoon(アイコンフォント)の CSS ファイル
  4. Gutenberg 関連の CSS ファイル
  5. baguetteBox.js(画像ポップアップ)の CSS ファイル
  6. jQuery(本体)の JS ファイル
  7. jQuery Migrate(本体のバージョンアップをサポート)の JS ファイル

といった感じです。

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

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

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

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

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

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

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

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

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

JavaScript をフッターで読み込む

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

  1. https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4
  2. 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をフッターで読み込む機能があったのですが、不具合が出るプラグインがけっこうあったそうで、廃止されたとのこと。

その機能は、不具合が出てしまうプラグインが結構あったので、廃止しました。

レンダリングを妨げるリソースの除外について

なので、もしもご自身のサイトに何が不具合が起きた場合は、functions.php をカスタマイズ前の状態に戻してくださいね。

コメント

  1. ブログ初心者 より:

    わかりやすい記事有難うござます。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

      • ブログ初心者 より:

        お返事ありがとうございます。
        キャッシュは一通りしてみたのですが、まだ残っているのでプラグインの仕様かもしれません。
        ひとまずこのままで様子見してみます。
        ご丁寧にありがとうございました。

        • トモ トモ より:

          またご不明な点などあれば、気軽にコメントしてくださいね^^

  2. ブログ初心者 より:

    先ほどコメントした者です。不要なプラグインを削除すると、…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つは残ります…

タイトルとURLをコピーしました