

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

[code]

     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');
    
     }
    
[/code]

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

[code]

    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 );
    
[/code]

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


CC BY-SA 4.0
2020-06-30T09:57:40.133
68146
2020-08-10T15:16:36.227
37613
question
javascript php wordpress
WordPressでレンダリングを妨げるリソースの除外をする際にdefer属性をscriptタグに付けたのですが、jsが効かなくなってしまった。


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

そういった場合、可能かどうかはJS実行環境によりますが[dynamic
import](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)などがこの場合有効な手段になるかと思います。


CC BY-SA 4.0
2020-08-10T15:16:36.227
69430
2020-08-10T15:16:36.227
41455
68146
answer