0

WordPressで管理しているサイトで、ページスピードの改善の際に「レンダリングを妨げるリソースの除外をする」というのがあったので、それに対応するために、scriptタグにdefer属性を付与しようと考えました。
そこでfunctions.phpに以下のコードを書いたのですが、他のjsが効かなくなってしまったので、何が原因知りたいです。また、何か良い方法はありますか?

 if(!(is_admin())){
//JS非同期読み込み→defer属性を付加 
function replace_scripttag($tag){
    if(!preg_match('/\b(defer|async)\b/',$tag)){
        return str_replace("type='text/javascript'",'defer',$tag);
    }
    return $tag;
}
add_filter('script_loader_tag','replace_scripttag');

 }

また、この方法ではdefer属性が付与するのですが、以下のサイトを参照し、以下のコードを使用しても付与しませんでした。こちらも原因や改善方法などご教授いただけたら嬉しく思います。
https://kinsta.com/blog/defer-parsing-of-javascript/#functions

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

今回私は「レンダリングを妨げるリソースの除外をする」をするためにdefer属性を付与しようと考えたのですが、こっちの方が良いよ!などの他の意見ございましたら、お教えください。
よろしくお願いいたします。

1 件の回答 1

0

読み込みタイミングの変更が反映されてそれで不具合が発生したのならばおそらく読み込んでいるJSファイル間での依存関係がおかしくなったのでは無いのでしょうか。
つまり、ファイルAとファイルBで依存関係A → Bの場合、元々同期的に読み込んでいる場合はA → Bの順で読み込めていたので問題は出なかったが、今回Aをdeferにしたので先にBが実行されてしまいAで読み込む必要があったグローバル変数が初期化されずにBを実行する時コケてしまったなどがありそうです。

そういった場合、可能かどうかはJS実行環境によりますがdynamic importなどがこの場合有効な手段になるかと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。