【WordPress】jquery.min.jsのレンダリングブロック対策

はじめに

最初に申し上げますと、断念しました。
その格闘記です。

使用しているテーマはAffinger6、どうしてもjquery.min.jsがレンダリングブロックの項目に引っかかり、気になっていました。

functions.phpへのコード追加１

注意

functions.phpは間違えると画面が真っ白になったりします。ご注意ください。

これは、あくまでAffinger6での内容です。

まずはjqueryを宣言している箇所をみつけ、その下に「wp_script_add_data('jquery', 'async', true);」を追加します。
asyncではなくdeferにする場合は、asyncをそのままdeferに変えてください。

wp_enqueue_script(
	'jquery',
	'//ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js',//code.jquery.com/jquery-1.11.4.min.js
	array(),
	'1.11.4',
	false
);
wp_script_add_data('jquery', 'async', true); //←【追加】

functions.phpコード追加２

注意

functions.phpは間違えると画面が真っ白になったりします。ご注意ください。

追加１だけでは不十分で、functions.phpの最下行に下記コードを追加します。
asyncではなくdeferにする場合は、asyncをそのままdeferに変えてください。

//jquery,async 【追加】
function add_async_attribute($tag, $handle) {
    if ('jquery' !== $handle) {
        return $tag;
    }
    return str_replace(' src', ' async src', $tag);
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

結果

jqueryを使用している箇所があちこちにあるようです。

PageSpeed Insightなどではレンダリングブロックの警告から消えました。
サイトによっては上記の追記だけで十分なこともあるでしょう。

最終的には次のアドセンスのことで断念しました。

Googleアドセンスのコード書き換え

jqueryをレンダリングブロックから回避しますとアドセンスの広告も表示されず。

GPT-4に尋ねると下記のようにコードを書き換えろと回答してきました。
書き換えてなんちゃら違反になったりすると怖いので、断念して全て元に戻しました。
"ca-pub-xxxxxxxxxxxxxxxx"の箇所はご自身のコードへ書き換えてください。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  window.onload = function() {
    (window.adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-xxxxxxxxxxxxxxxx",
      enable_page_level_ads: true
    });
  };
</script>

コードスニペットプラグインを使う

functions.phpを直接編集するのは怖いです。
そこでお勧めしたいのが、Code Snippetsプラグインです。
インストールして有効化しましたら、新規追加で下記のようにコードをコピペします。
ここでサイトのセキュリティにてWAFがOnになっていると下記のようなエラーメッセージが表示されて保存ができません。
この場合は、レンタルサーバーにログインして更新する時にWAFの設定を一時的にOffにします。

: CodeSnipets画面

: WAF設定