webでpreloadしたが使わなかったリソースを確認できる Speculative load measurement API

w3c Web

W3CのWeb Performance WGで『Speculative load measurement API』という仕様が議論されています。

github.com

Preload

Preloadという仕組みでは、将来必要になるリソースを投機的に取得するようにブラウザに指示できます。

具体的には、HTTPレスポンスヘッダや HTMLファイル内で

HTTPレスポンスヘッダ

Link: <main.js>;rel="preload";as="script"

HTML

<link rel="preload" href="main.js" as="script" />

Speculative load measurement API

Preloadなどで投機的に取得したリソースが使用されず、不必要にロードされていた可能性もあります。しかし、それを知る方法がありません。そこで、その情報を知るために提案されているのがSpeculative load measurement API』です

取れる情報

pagehideイベントに下記の情報を取得できるようになります。

{
  preloads: [
    { url: '...', as: '...', crossorigin: '...', earlyhint: true, used: true },
    { url: '...', as: '...', crossorigin: '...', earlyhint: true, used: false },
    // ...
  ],
  navigations: [
    { type: 'prefetch', url: '...', tags: '...', eagerness: '...', used: false },
    { type: 'prerender', url: '...', tags: '...', eagerness: '...', used: true },
    // ...
  ]
}

ここで usedの項目 を確認することで、利用されたか確認できます。

利用例

提案仕様に利用例が書かれています。
pagehideイベントの中で取れる情報をPOSTでサーバ側に渡す例です

window.addEventListener('pagehide', (event) => {
  const { preloads, navigations } = event.speculations;

  // Send unused speculation data to analytics endpoint
  fetch('/analytics/unused-speculations', {
    method: 'POST',
    keepalive: true,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      preloads, navigations
    })
  });
});