ワードプレスで、レンダリングをブロックする JavaScript を除去する方法

Question

前提・実現したいこと

質問させて頂きます。ページスピードインサイトで表題のような警告が出て、改善したいです。とにかく、ワードプレスで画像が多いサイト運営なのでスピードが遅く、また最近速度が遅いとgoogleからの評価が悪くなると聞いて、すごく不安です。どなたかアドバイス願います。

発生している問題・エラーメッセージ

function.php　に該当のソースコードをいれると、解決すると聞き、入れたのですが、ワードプレスの管理画面の上のところにこのコードがバグったように表示され、まずいと思いそのコードを消して、元に戻してから保存すると、今度は更新がうまくできませんでしたとエラーが出て（ソースコード以外のところを消したりはしてません）、その後管理画面に入れないなどの不具合が発生。直前にバックアップとってたので再度バックアップの状態に戻し、今現在に至ります。とにかくスピードアップをしたいのです・・・

エラーメッセージ
```上記の通りです。またfunction.phpのどこに張り付けかわからないので、一番下に張り付けました。


### 該当のソースコード
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;       //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url;       //'jquery.min.js'は、asyc対象外
return "$url' async charset='UTF-8";                      // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

### 試したこと

上に記載してしまいました。

### 補足情報（FW/ツールのバージョンなど）

初心者で恐る恐るコードをいじって、失敗しての繰り返しです・・・アドバイスをお願いします、

Comments

[yoshinavi]

「SEO」にも関わる部分ですが、読込部分で、async属性やdefer属性の設定は試されましたか？

[otasuk2]

早速のご回答ありがとうございます。
読み込み部分での設定が、わかりません。
今調べましたが、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" defer></script>
<script src="jQuery/myScript.min.js" defer></script>
こういうのですか？
こういうのだとしても、どのシートのどの部分にこれをいれるのかがわからないのです。。。。

Answer 1

質問にあるコード自体は
・管理画面では除外
・.js以外は対象外
・jquery.min.jsは、async対象外
という条件に該当しないスクリプトにはすべてasync属性を追加しなさいというものになっています。結構ものぐささん用のコードとなっています（笑）。

質問からレンダリングをブロック・・・という言葉がどうも理解されていないようですがどうでしょうか？

ざっくり説明すると質問に出てくる「async」はスクリプトは後から読み込んでねという意味で、「defer」は後から読み込むことにして一旦無視しましょ！という属性になります（本当にざっくりした説明です）

スクリプトの中にはこうした属性を指定しなくてもフッターに入れて読み込ませて動作するものもありますし、ヘッダーに入れてこれらの属性を付加いないと動作しないものもあり、属性を付加すると動作しないものもあります。

要するにそのスクリプトによる・・というところが大きいのです。特にブログパーツやブログランキング、広告コードなど外部へ接続して外部にあるスクリプトを動作するものについては１つ１つ確認しないといけません。

functions.phpへ追記した質問のコードを一旦やめて、ヘッダーに入れているものやブログパーツのようにこれを張り付ければ・・・となっているコードの

<script src="...">

へ直接async属性を追加して

<script async src="...">

のようにしてきちんと動作するのか？警告は出るかのテストをしてはどうでしょうか？？

ちなみにレンダリングをブロックしている・・・を改善するのもサイト表示高速化の１つですが、外部のスクリプトを使う＝外部の処理速度によるということになるので、それらの処理速度にもよってきますからなるべく使わないようにすること、とか、本当にそれが表示速度低下の原因になっているのか？など総合的に判断して妥協する部分は妥協するというのが必要かと思います。

画像を未圧縮や実際に表示する大きさよりも大きいままで表示するようにしているため転送量が多くなり、それが原因・・・なんてことが結構多いです（スマホで見たときなどはパケット量ばかり増えて大迷惑です）。

できるだけ分かりやすく回答したつもりですが分かりにくかったらすみません。お役に立てれば幸いです。

Comments

[otasuk2]

ご回答ありがとうございます！レンダリングをブロックする・・・のところは、サーチコンソールに出てきた文言なのです。訳が分からずそのまま転記したり、検索したりしてました。

アドバイスの件ですが、「functions php」の中に以下の記述がございました。

<script async type="text/javascript">
var cfmf_text = { title:'<?php _e('Please Select Image', 'tcd-w'); ?>', button:'<?php _e('Use this Image', 'tcd-w'); ?>' };
</script>

ここにasyncを上記のように入れたのですが、これでよいのでしょうか？

[momosiri]

上のコードはテーマが内部処理しているものですからあまり関係なさそうですけど、そのコードに該当するものがサーチコンソール上でレンダリングをブロックする・・・という項目の詳細にあるものなら効果はあるかも知れませんね。回答にかかせていただいたようにsrc=""で自身のサイト上でないものから疑った方が効果はあるかも知れません。

[otasuk2]

ご回答ありがとうございます。また、返信が遅れてしまい、すみません。すみませんが以下に詳細を記しますので、お教え願いますか？
ページスピードインサイトの表示は
レンダリングを妨げるリソースの除外
3.03 s
ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。詳細
https://mariko-jp.com/wp-content/themes/lotus_tcd039/style.css?ver=2.0.2
https://mariko-jp.com/wp-includes/css/desk/block-library/style.min.css?ver=5.0.3

などが挙げられるのですが、これらはfunctions phpの中にはないのです・・・
<script src=・・・・・>のような場所が、どこ探してみないのです。
大変お手数ではございますが、詳細を教えてください。
ちなみにワードプレスのサイトでTCDというテンプレートを使っております。

[momosiri]

スクリプトではなくCSSの読み込みですね。
https://firstlayout.net/load-css-asynchronously-with-loadcss/
が一番参考になると思いますがテーマ内の編集が必要ですので知識がなければあきらめてください

Answer 2

WordPress をお使いで、PHPがあまりわかないとお見受けしましたので、プラグインを使われるのはどうでしょうか？

WordPress Plugins で、
「async css」や「async JavaScript」等のキーワードで検索すると

• Async JavaScript
• WP Rocket ASYNC CSS
• HTTP/2 Push, Async JavaScript, Defer Render Blocking CSS
• Autoptimize

等のプラグインが見つかりますので、これらのプラグインを1点ずつ試してみて、一番効果のありそうなものを使われるのはどうでしょうか？

Comments

[otasuk2]

Autoptimize なども試したのですが、速度が改善しなかったので、それ以外あまり試すと、キャンセルしたとしてもそのカス？のようなものが残り、結果重くなっていくかもとか聞いてまして、できれば自力で少しずつでも前に進めればと思い、質問させて頂きました。おっしゃるとおり、ほとんどわからないのですが、プログラムは勇気をもっていじってます・・・

Answer 3

参考になるでしょうか？

WordPressでJSを非同期読み込みするasync属性の追加方法

Comments

[otasuk2]

ありがとうございます。この中のどれをいれたらよいですか？

[yoshinavi]

まずは「参考サイト2」の下の提示コードで様子を見てみると良いかと思います。

[otasuk2]

ありがとうございます。本当に基本的な質問ですみません。この、参考サイト２のコードを張り付けるだけでよいのですか？また、それはどこに張り付けるのでしょうか？
すみませんが教えてください。

[yoshinavi]

「function.php」に記述してください。
<script type='text/javascript' async="async" src='***'></script>
上記のようにasync属性をjavascriptを実行するファイルに適用されるようになります。
「function.php」に記述しなくても、各ファイルに1つずつ記述しても良いですが、「function.php」に記述する事で、まとめて処理されるようになります。

[otasuk2]

ありがとうございます！
てことは、参考サイト２の
function replace_script_tag ( $tag ) {
return str_replace( "type='text/javascript'", 'async', $tag );
}
add_filter( 'script_loader_tag', 'replace_script_tag' );
これをこのまま、function.phpに記述すればよいのですね！！

記述する場所とかはどこでも良いのですか？

[yoshinavi]

どこでも良いです。バックアップを取ってから試してみてください。

[otasuk2]

ありがとうございます。試してみましたが、デスクトップの際の表示が、TOPページのブログ「一覧の画像が表示されなくなったのと、速度が少し落ちてしまい、TCDのテンプレサイトだとよくないのかもしれません・・・親身にご説明くださり、ありがとうございます。もしも私にわかるものでかんたんなものがございましたらまたご指導ください。