この演習では、/slow-a と /slow-b のルートの両方の load 関数に意図的な遅延があり、ナビゲーションに時間がかかるようになっています。
データのロードを常に高速化できるとは限りません。制御できない場合もありますが、SvelteKit はナビゲーションを予測することで高速化できます。<a> 要素に data-sveltekit-preload-data 属性がある場合、SvelteKit はユーザーがリンクにカーソルを合わせた（デスクトップの場合）またはタップした（モバイルの場合）直後にナビゲーションを開始します。最初のリンクに追加してみてください。
<nav>
<a href="/">home</a>
<a href="/slow-a" data-sveltekit-preload-data>slow-a</a>
<a href="/slow-b">slow-b</a>
</nav>/slow-aへのナビゲーションは、明らかに速くなります。clickイベントが登録されるのを待つのではなく、ホバーまたはタップ時にナビゲーションを開始することは、それほど違いがないように聞こえるかもしれませんが、実際には通常200ミリ秒以上節約できます。それは、動作がもたつくかキビキビしているかの違いを生むのに十分な時間です。
属性は個々のリンクに付けることも、リンクを含む要素に付けることもできます。デフォルトのプロジェクトテンプレートには、<body>要素に属性が含まれています。
<body data-sveltekit-preload-data>
%sveltekit.body%
</body>属性に次のいずれかの値を指定することで、動作をさらにカスタマイズできます。
"hover"(デフォルト、モバイルでは"tap"にフォールバック)"tap"- タップ時にのみプリローディングを開始"off"- プリローディングを無効にする
data-sveltekit-preload-dataを使用すると、誤検出（つまり、発生しないナビゲーションを予測してデータをロードする）になる場合があり、望ましくない可能性があります。代替として、data-sveltekit-preload-codeを使用すると、データを積極的にロードすることなく、特定のルートに必要なJavaScriptをプリロードできます。この属性には、次の値を設定できます。
"eager"- ナビゲーション後、ページ上のすべてをプリロードする"viewport"- ビューポートに表示されるすべてをプリロードする- 上記の
"hover"（デフォルト） - 上記の
"tap" - 上記の
"off"
また、$app/navigationからインポートされたpreloadCodeとpreloadDataを使用して、プログラムでプリローディングを開始することもできます。
import { preloadCode, preloadData } from '$app/navigation';
// preload the code and data needed to navigate to /foo
preloadData('/foo');
// preload the code needed to navigate to /bar, but not the data
preloadCode('/bar');<h1>home</h1>