Explore WordPress 6.3

スクリプトの読み込みに `async` と `defer` が設定可能に

概要

  • 2010年に作成されたチケットがクローズされた
  • スクリプトタグに defer や async を追加することで、ページロードの残りの部分をブロックすることなくロードできるようになる
  • その結果、LCP(Largest Contentful Paint)のパフォーマンスが向上し、UXが向上することが期待できる

defer の処理

  1. HTML 描画中に script タグを発見
  2. script は非同期でダウンロードされ、HTML 描画は継続
  3. script のダウンロードが完了
  4. HTML 描画を中断
  5. script を実行
  6. HTML 描画を再開

script タグが書かれた順に実行されない可能性がある

async の処理

  1. HTML 描画中に script タグを発見
  2. script は非同期でダウンロードされ、HTML 描画は継続
  3. script のダウンロード完了。HTML 描画は継続
  4. HTML 描画完了
  5. script を実行

script タグが書かれた順に実行される。HTML描画が完了しているので、確実にDOM操作を行える。

記述例

defer を設定

wp_register_script( 
    'foo', 
    '/path/to/foo.js', 
    array(), 
    '1.0.0', 
    array(
        'strategy' => 'defer'
    ) 
);

フッターに出力させ async を設定

wp_register_script( 
    'bar', 
    '/path/to/bar.js', 
    array(), 
    '1.0.0', 
    array(
        'in_footer' => true,
        'strategy'  => 'async',
    )
)

資料