WordPress の CSS JS を 非同期 で 読み込む
この記事は 2021年 4月 8日 に書かれた記事です。
この記事は WordPress Version 5.7 の時の記事です。
PageSpeed Insights や Lighthouse で ページスピード の 検証をすると CSS や JS を 非同期 で 読み込んで と 言われるので その方法を 調べてみました
CSS
CSS では media="print" onload="this.media='all'" を 使って 非同期 で 読み込むのが 最近の手法のようです
ただ WordPress では onload="〜" を 付ける事が出来ないので フィルターで 付けられるようにします
//------------------------------------------------
// スタイル : onload 出力
//------------------------------------------------
add_filter( 'style_loader_tag', function( $html, $handle ) {
foreach( [ 'onload' ] as $attr ) {
if( ! wp_styles()->get_data( $handle, $attr ) ) {
continue;
}
if( ! preg_match( ":\s$attr(=|>|\s):", $html ) ) {
$html = preg_replace( ':(?=/>):', " $attr='" . esc_attr( wp_styles()->get_data( $handle, $attr ) ) . "'", $html, 1 );
}
}
return $html;
}, 10, 2 );
これで onload="〜" が 付けられるようになったので スタイル を 読み込みます
wp_enqueue_style(
'bootstrap',
get_parent_theme_file_uri( '/css/bootstrap.min.css' ),
[],
'4.6.0',
'print'
);
最後に メタデータを 追加します
wp_style_add_data( 'bootstrap', 'onload', 'this.media="all"' );
これで 思い通りの 出力が出来ました
JS
今度は JS です
JS には async や defer が 用意されているので それらを付けるだけで OK です
こちらも同様に WordPress では 付ける事が出来ないので フィルターで 付けられるようにします
//------------------------------------------------
// スクリプト : async defer 出力
//------------------------------------------------
add_filter( 'script_loader_tag', function( $tag, $handle ) {
foreach( [ 'async', 'defer' ] as $attr ) {
if( ! wp_scripts()->get_data( $handle, $attr ) ) {
continue;
}
if( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
}
}
return $tag;
}, 10, 2 );
これで async や defer が 付けられるようになったので スクリプト の 読み込みをします
wp_enqueue_script(
'bootstrap',
get_parent_theme_file_uri( '/js/bootstrap.bundle.min.js' ),
[ 'jquery' ],
'4.6.0',
true
);
こちらも同様に 最後に メタデータを 追加します
wp_script_add_data( 'bootstrap', 'defer', true );
こちらは async や defer のみが 付く形になります
最後に
こちら サイト全体 を 非同期にして 試してみたら 少しだけ 点数が良くなりました
ただ サードパーティ製 の CSS や JS が 原因になっている部分もあるので 結局元に戻しました
他にも ページが崩れたりするので 細かい調整をしないと 使うのは難しそうです
ただ このコードを知っていると 今後 独自のメタデータを付けたい時に 役に立ちそうなので 記事にしました
