wp_head(),wp_footer()で出力されるCSSやJSを非同期読み込みに変更する

投稿日:
2023/12/17
更新日:
2023/12/17
読了時間:
5分程度

CSS,JS類の読み込みでHTMLの解析がブロックされる

<?php wp_head(); ?>と記述することで出力されるCSSやJS類、これらはWordpress（及びプラグイン）由来の共通要素が出力されるが、デフォルトのままの記述では<head>タグ内が肥大化し、HTMLソースの解析を長時間ブロックしてしまう要因になるケースがある。

今回はそんなwp_head()経由で出力されるCSS,JSの出力フォーマットを調整するTipsを掲載していきたい。

script_loader_tag フィルター

functions.php内にてCSSの出力に利用できるstyle_loader_tagフィルターを利用することでCSSの出力内容を変更することが可能です。

function load_css_async($html, $handle, $href) {
  $default_html = trim($html);
  $html = <<<EOT
<link rel="stylesheet" id="{$handle}-css" href="$href" media="print" onload="this.media='all'">
<noscript>{$default_html}</noscript>\n
EOT;
  return $html;
}
add_filter( 'style_loader_tag', 'load_css_async', 10, 3 );

上記のように
media=”print” onload=”this.media=’all'”
とすることで、ロード完了後にprintをallに差し替える非同期での読み込みを実現させ、万一Javascriptが動作しない場合にnoscriptを合わせて出力する形式に変更しています。

script_loader_tag フィルター

functions.php内にてJSの出力に利用できるscript_loader_tagフィルターを利用することでJSの出力内容を変更することが可能です。

function load_script_async($tag) {
  return str_replace('src', 'async src', $tag);
}
add_filter('script_loader_tag', 'load_script_async', 10, 1);

上記のようにasyncを差し込むことで非同期となります。

上記それぞれはすべてのCSS,JSを変更する記述となっていますがプラグインに含まれるものだけを対象にする場合は

function load_script_async($tag, $handle) {
  if('plugins' !== $handle) {
    return $tag;
  }
  return str_replace('src', 'async src', $tag);
}
add_filter('script_loader_tag', 'load_script_async', 10, 2);

などとして対象を絞って出力内容を変更することも可能ですので、すべてを非同期で呼び出してしまうことで表示が一瞬崩れてしまうような場合は適宜対象を絞り込んだ方がよいかもしれません。

参考：