Webサイトの表示速度は、ユーザー体験やSEOにおいて非常に重要です。その改善策の一つとして、JavaScriptの読み込みを遅延させるdefer属性の活用があります。
WordPressでは、テーマのfunctions.phpを少し編集するだけで、特定のJavaScriptファイルにdefer属性を簡単に付与できます。この記事では、その具体的な方法を解説します。
なぜdeferが必要なのか？
通常、ブラウザはHTMLを読み込んでいる途中で<script>タグを見つけると、一度HTMLの解析を中断し、スクリプトをダウンロード・実行します。この処理がページの表示を遅くする原因となります。
defer属性を付与すると、ブラウザはスクリプトを非同期でダウンロードし、HTMLの解析が終わってから実行するようになります。
これにより、ページの初期表示がブロックされず、体感速度が向上します。
functions.phpにコードを追加する
実装はとてもシンプルです。wp_enqueue_scriptでスクリプトを登録し、script_loader_tagフィルターフックで出力タグを書き換えます。
以下のコードを、お使いのテーマのfunctions.phpに追記してください。
<?php
// 1. スクリプトを通常通り登録
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script(
'my-theme-script', // このハンドル名（識別名）を後で使います
get_stylesheet_directory_uri() . '/assets/js/main.js',
array(),
null,
true
);
});
// 2. 登録したスクリプトに defer 属性を付与
add_filter('script_loader_tag', function($tag, $handle) {
// 目的のハンドル名かをチェック
if ('my-theme-script' === $handle) {
// defer属性を追加して返す
return str_replace(' src=', ' defer src=', $tag);
}
return $tag;
}, 10, 2);
?>
コードの解説
1. スクリプトの登録 (wp_enqueue_script)
ここでは、my-theme-scriptというハンドル名（ニックネームのようなもの）でJavaScriptファイルを登録しています。このハンドル名が、後で特定のスクリプトを識別するための鍵となります。
2. defer属性の付与 (script_loader_tagフック)
ここがカスタマイズの核となる部分です。
- add_filter(‘script_loader_tag’, …) WordPressが<script>タグをHTMLに出力する直前に、このフィルターを使って中身を書き換えることができます。
- if (‘my-theme-script’ === $handle) 読み込まれる全てのスクリプトにdeferを付けるわけではなく、先ほど登録した
my-theme-scriptというハンドル名のスクリプトだけを対象にするための条件分岐です。このチェックが非常に重要です。 - return str_replace(‘ src=’, ‘ defer src=’, $tag); 対象のスクリプトが見つかったら、src=という部分をdefer src=に置き換えることで、defer属性を付与した<script>タグを生成します。
まとめ
この方法を使えば、プラグインに頼ることなく、WordPressサイトのパフォーマンスを安全に向上させることができます。
ページの表示速度改善に取り組む際は、ぜひこのdefer属性の活用を試してみてください。
