跨出界

HTML Standard からは、Link Types には、パフォーマンスの最適化に関心がある日常的な使用者が dns-prefetch / preconnect / prefetch / preload などのリソースプリロード技術を使用していることがわかります。

それでは、これらの間にはどのような違いがあり、ページのパフォーマンスを向上させるために正しく使用する必要があるのでしょうか？

まず、リソースのリクエストには、次のような段階があります：

<link src="https://example.com" ...>

dns-prefetch#

<link src="https://example.com" rel="dns-prefetch" ...>

preconnect#

<link src="https://example.com" rel="preconnect" ...>

prefetch#

<link rel="prefetch" src="./image.jpg" as="image" />

名前からわかるように、リソースを事前にキャッシュし、そのリソースが必要になったときにブラウザのキャッシュから直接取得することで、ユーザーエクスペリエンスを向上させます。

prefetch のロード戦略には 2 つのタイプがあります：

1. 予測的なプリロード（Predictive Prefetching）：ブラウザはユーザーの行動と履歴データに基づいて将来のアクセスが予測される可能性のあるページを予測し、関連するリソースをバックグラウンドでプリロードします。この戦略は、実際にユーザーがリンクをクリックする前にリソースを事前に読み込むことで、ページの読み込み時間を短縮することができます。

2. 事前プリロード（Eager Prefetching）：HTML で明示的にプリロードする必要があるリソースを指定します。これらのリソースは、現在のページに必要なリソースである場合もありますし、他のページのリソースである場合もあります。これらのリソースを事前に読み込むことで、後続のページの読み込み時間を短縮することができます。

今回は第 2 の場合について話し合います。

注意すべきは、ブラウザが必ずしも prefetch を実行するわけではないということです。prefetch は提案的なロード戦略ですが、具体的にプリロードを実行するかどうかは、ブラウザの実装と戦略に依存します。

ブラウザは HTML ページを解析する際に prefetch タグを検出し、自身の戦略に基づいてプリロードを実行するかどうかを決定します。ブラウザは、現在のネットワーク接続の状況、システムリソースの使用状況、ユーザーの行動など、複数の要素を考慮する場合があります。ブラウザがプリロードを実行することでユーザーエクスペリエンスに積極的な影響を与えると判断した場合には、プリロードを実行するかもしれませんが、そうでない場合は prefetch タグを無視するかもしれません。

したがって、私たちはブラウザが prefetch を実行することに完全に依存することはできず、prefetch をユーザーエクスペリエンスを向上させるための最適化手段として考えるべきです。同時に、prefetch を適切に使用し、不必要なネットワークトラフィックとリソースの浪費を避けるために注意する必要があります。

preload#

<link rel="preload" src="./image.jpg" as="image" />

preload は、prefetch とは異なり、ブラウザが即座にプリロード操作を実行する強制的なロード戦略です。

preload のロード戦略には 2 つのケースがあります：

1. 事前プリロード（Eager Preloading）：HTML で <link rel="preload"> タグを使用して、事前にプリロードする必要があるリソースを指定します。これらのリソースは、現在のページに必要なリソースである場合もありますし、他のページのリソースである場合もあります。これらのリソースを事前に読み込むことで、後続のページの読み込み時間を短縮することができます。

2. 暗黙的なプリロード（Implicit Preloading）：ブラウザは、ページの HTML、CSS、JavaScript コードの参照関係に基づいて、自動的にプリロードする必要があるリソースを判断します。たとえば、ブラウザが HTML ページを解析する際に、JavaScript によって動的に作成され、ページに挿入される画像要素がある場合、ブラウザはその画像リソースを自動的にプリロードするかもしれません。

注意すべきは、preload は強制的なロード戦略であり、ブラウザはネットワーク接続の状況に関係なく、即座にプリロード操作を実行します。これにより、ページの読み込み時に、いくつかの重要なリソースが事前に読み込まれ、後続のレンダリングプロセスで即座に使用できるようになります。

prefetch と同様に、preload を使用する際には、プリロードするリソースとネットワーク帯域幅への影響、および実際のユーザーエクスペリエンスへの影響を慎重に評価する必要があります。

例えば、ユーザーのネットワーク帯域幅が低い場合や、デバイスのパフォーマンスが低い場合、大量の preload リソースはユーザーエクスペリエンスに大きな影響を与える可能性があります。

--EOF--

• Resource Hints (W3C)