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属性を付与しようと考えたのですが、こっちの方が良いよ!などの他の意見ございましたら、お教えください。
よろしくお願いいたします。