てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

WordPress の CSS JS を 非同期 で 読み込む

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 が 原因になっている部分もあるので 結局元に戻しました

他にも ページが崩れたりするので 細かい調整をしないと 使うのは難しそうです

ただ このコードを知っていると 今後 独自のメタデータを付けたい時に 役に立ちそうなので 記事にしました

Related Article

cakePHP 3 を 直接 触って 覚えてみることにした No.5

詳細へ »

Bootstrap 4 alpha 2 で テーマ を 作成してみました!!

詳細へ »

検索 の 対象 を いろいろ 変えてみる

詳細へ »