1. このページの目的
rel="prefetch" の動作を検証する。
2. rel="prefetch" とは？
- そのページにとってクリティカルなリソースを取得するためのものではない。
- 「ユーザー操作で必要になると予想されるリソース」をブラウザに通知する。
- prefetch で指定されたリソースは、現在のページの読み込みが完了した後で、最低優先度で取得される。
- 既存のリソースの優先度を下げる方法には使用できない。
3. 検証
本ページでの記述
<link rel="prefetch" href="prefetched.php">この記述により、本ページにアクセスすると prefetched.php も取得される。
この際、Priority は Lowest になる。
( 🔰 このとき、DevTools の [Disable cache] のチェックは外しておくこと )
次に以下のリンクをクリックして、prefetch されたページにアクセスする。
すると、すでに取得済みである prefetched.php の Size 列には、(prefetch cache) と表示される(Chrome 77 の場合)。
ちなみに、prefetched.php から読み込まれている prefetched.css は、このとき初めて取得される。