スクリプトの遅延・非同期読み込み（defer / async）

wp_register_script()を使って、スクリプトを遅延または非同期で読み込むことで、ページの表示速度を向上させます。deferとasyncを使い分けることで、HTMLの読み込みとスクリプト実行のタイミングを柔軟に管理します。

解説

• 遅延読み込み（defer）は、HTMLのパースが完了した後にスクリプトを実行するため、ページの表示がブロックされません。
• 非同期読み込み（async）は、HTMLのパースと並行してスクリプトが実行されるため、スクリプトが重い場合にパフォーマンスを向上させます。

function register_script_with_defer($tag, $handle) {
    // 特定のスクリプトに対して defer 属性を付与
    if ('custom-script' === $handle) {
        return str_replace(' src', ' defer="defer" src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'register_script_with_defer', 10, 2);

function enqueue_deferred_script() {
    wp_register_script('custom-script', get_template_directory_uri() . '/js/custom.js', [], '1.0.0', true);
    wp_enqueue_script('custom-script');
}
add_action('wp_enqueue_scripts', 'enqueue_deferred_script');

ソースの解説

1. wp_register_script()でcustom.jsを登録し、依存関係なしでフッターに読み込みます。
2. script_loader_tagフィルタを使用し、<script>タグにdefer属性を追加します。
3. asyncを使いたい場合は、defer="defer"をasync="async"に変更するだけです。

難易度

     （4/5）
フィルターフックを使った処理のため、初学者には少し難しいかもしれません。

ポイント

• 遅延読み込み（defer）は、複数のスクリプトを実行順に処理したいときに便利です。
• 非同期読み込み（async）は、スクリプトの依存関係がない場合に効果的です。

Q&A

まとめ

wp_register_script()とscript_loader_tagフィルタを使うことで、スクリプトの読み込みを柔軟に制御できます。deferやasyncの適切な使用は、ページの表示速度向上に大きく貢献します。