リソースのプリロード、プリフェッチ、および前提条件

プリロードは、現在必要な重要なリソース用であり、Prefettは将来のナビゲーションのニーズを予測し、Preconnectはサードパーティサーバーへの接続を高速化します。 AS属性を備えたフォントやヒーローイメージなどの高優先度アセットにプリロードを使用し、アイドル時間中に次のページのリソースの可能性が高く、CDNやAPIなどのドメインに早期接続セットアップを前提として、それぞれを控えめかつ戦略的に適用して、リソースの競合を回避し、最適なパフォーマンスを確保します。

Webパフォーマンスを最適化するとき、プリロード、プリフェッチ、および前提条件は、リソースをより速く提供し、認知された負荷時間を改善するのに役立つ強力なブラウザのヒントです。それらは似たように聞こえますが、それぞれが明確な目的を果たし、戦略的に使用する必要があります。

それぞれが行うこと、それらを使用する時期の内訳、および実装のための実用的なヒントは次のとおりです。

1。プリロード（ rel="preload" ）

重要なリソースを今すぐロードしてください

ユースケース：現在のページのロードでリソースがすぐに必要になることを知っています。たとえば、ブラウザによって遅すぎる可能性のあるWebフォント、ヒーローイメージ、または重要なCSS/JSファイルなどです。

preloadブラウザに次のように伝えます。 「まだ使用されている場所で解析していなくても、すぐにダウンロードしてください。」

例：

 <！ - ウェブフォントをプリロード - >
<link rel = "preload" href = "/fonts/myfont.woff2" as = "font" type = "font/woff2" crossorigin>

<！ - 重要なスクリプトをプリロード - >
<link rel = "preload" href = "/js/main.js" as = "script">

<！ - ヒーローイメージをプリロード - >
<link rel = "preload" href = "/images/hero.jpg" as = "image">

キーノート：

• 属性が必要であるas 、ブラウザが優先順位を付けて正しい読み込みロジックを適用するのに役立ちます。
• 控えめに使用する： preloadを過剰に使用すると、より重要なリソースと競合し、パフォーマンスを損なう可能性があります。
• 優先順位、レンダリングブロッキング、または遅れて発見された資産のみ。

2。プリフェッチ（ rel="prefetch" ）

将来のナビゲーションのためにリソースをダウンロードしてください

ユースケース：次のページでユーザーが必要とするものを予測します。たとえば、分析が次に特定のページにアクセスする可能性が高いことを示唆している場合。

prefetch 、アイドル時にバックグラウンドでリソースをダウンロードする低優先度のリクエストです。

例：

 <！ - 次のページの可能性が高い - >
<link rel = "pretch" href = "/next-page.html">

<！ - 次のページで使用されるスクリプトをプリフェッチします - >
<link rel = "prefetch" href = "/js/detail-page.js">

キーノート：

• 一般的なナビゲーションパスに最適です（例：ログイン後、製品の詳細ページなど）。
• ブラウザはprefetch優先度が低いため扱うので、現在のページのパフォーマンスを妨げません。
• ユーザーがリンクの上にhoveringしたり、その近くのスクロールを巻き上げたりすると、交差点オブザーバーと組み合わせてプリフェッチできます。

ヒント： importance=lowフェッチで同様の動作を求めます。

 fetch（ '/data.json'、{重要： 'low'}）;

3。序点（ rel="preconnect"またはdns-prefetch ）

接続セットアップをスピードアップします

ユースケース：サードパーティドメイン（CDN、Googleフォント、分析など）からリソースをロードしています。接続の確立（DNSルックアップ、TCPハンドシェイク、TLS交渉）には、数百ミリ秒かかる場合があります。

preconnectブラウザに「接続のセットアップを早めに開始します。」

例：

 <！ -  cdnを前提とします - >
<link rel = "preconnect" href = "https://cdn.example.com">

<！ -  Google Fontsを前提としています - >
<link rel = "preconnect" href = "https://fonts.googleapis.com">
<link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>

代替： dns-prefetch （ライター）

DNS解像度のみが必要な場合は、以下を使用してください。

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

キーノート：

• preconnectより攻撃的です - 完全なTCP/TLSハンドシェイクをセットアップします。
• 必要なドメインにのみ使用します。各接続はシステムリソースを消費します。
• dns-prefetchリソース集約的ではありませんが、DNSのみを解決します。

いつ使用するの？

ベストプラクティス

• umplate影響の測定：灯台またはWebバイタルを使用して、これらのヒントが実際にパフォーマンスを改善するかどうかを確認します。
• use乱用を避ける：多すぎるpreloadタグがより重要なリソースをブロックする可能性があります。
• dynamicインポートでの使用：ReactやVueなどのフレームワークでコードスプリッティを使用したprefetchをペアにします。
• conditional条件付きプリフェッチ：帯域幅を保存するためにホバーまたはスクロールでプリフェッチします。

   link.addeventlistener（ 'mouseenter'、（）=> {
    const pref = document.createelement（ 'link'）;
    pref.rel = 'prefetch';
    pref.href = '/next-page.html';
    document.head.appendChild（pref）;
  }）;

  ---

  基本的に、このように考えてください：

  • preload =「今すぐこれが必要です。」
  • prefetch =「おそらくこれが後で必要です。」
  • preconnect =「このサーバーとより速く話す準備をしましょう。」

  賢明に使用して、これらのヒントは、コード構造を変更せずに、ロード時間から数百ミリ秒を削ることができます。

  以上がリソースのプリロード、プリフェッチ、および前提条件の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。