あり Web パフォーマンスを向上させるさまざまな方法。 その XNUMX つは、後で必要になるコンテンツを事前にロードすることです。 CSS 前処理、全ページの事前レンダリング、またはドメイン名解決。 すべてを事前に実行し、結果を即座に表示します。 かっこいいね。

さらにすごいのは、実装が非常に簡単だということです。 XNUMXつのタグブラウザに予備アクションを実行するコマンドを与えます。

<link rel="prefetch" href="/ja/style.css" as="style" />
<link rel="preload" href="/ja/style.css" as="style" />

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

<link rel="prerender" href="https://example.com/about.html" />

これらが何をするのか、いつ使用するのかを簡単に説明しましょう。

ジャンプ先: プリロード · プリフェッチ · 事前接続 · DNSプリフェッチ · プリレンダリング

プリロード

<link rel= "preload"> ブラウザにリソース (スクリプトやスタイルシートなど) をできるだけ早くロードしてキャッシュするように指示します。 これは、ページが読み込まれてから数秒後にリソースが必要になり、プロセスを高速化したい場合に便利です。

ブラウザは、読み込み後にリソースに対して何も行いません。 スクリプトは実行されず、スタイルシートも適用されません。 リソースは単純にキャッシュされ、リクエストに応じてすぐに利用できるようになります。

構文

<link rel="preload" href="/ja/style.css" as="style" />

href ダウンロードするリソースを指します。

as ブラウザでダウンロードできるものであれば何でも構いません。

• style スタイルシートの場合、
• script スクリプトの場合、
• font フォントの場合、
• fetch を使用してロードされたリソースの場合 fetch() または XMLHttpRequest,
• 完全なリストを見る MDN で.

属性を指定することが重要です as – これは、ブラウザがダウンロードの優先順位を適切に設定し、スケジュールするのに役立ちます。

いつ使用するか

リソースが近い将来に必要になる場合は、プリロードを使用します。 例えば：

• 外部ファイルからの非標準フォント:

  <!-- index.html -->
  <link rel="stylesheet" href="index.css" />
  /* index.css */
  @font-face {
    src: url('comic-sans.woff2') format('woff2');
  }

  Поумолчанию comic-sans.woff2 ダウンロードと解析後にのみロードが開始されます index.css。 長く待たされることを避けるために、次のコマンドを使用してフォントを早めにダウンロードできます。 <link rel= "preload">:

  <link rel="preload" href="comic-sans.woff2" as="font" />

• アプローチ別にスタイルを分けると 重要なCSS クリティカル (即時レンダリング用) と非クリティカルの XNUMX つの部分に分けられます。

  <style>
  /* Inlined critical styles */
  </style>
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

  このアプローチでは、重要ではないスタイルは JavaScript の実行時にのみ読み込みを開始します。これはレンダリングの数秒後に発生する可能性があります。 JS を使用するのを待つ代わりに <link rel= "preload">より早くダウンロードを開始するには:

  <style>
  /* Inlined critical styles */
  </style>
  
  <link rel="preload" href="/ja/app/non-critical.css" as="style" />
  
  <script>
  /* Custom JS that starts downloading non-critical styles */
  loadCSS('/app/non-critical.css');
  </script>

プリロードを過度に使用しないでください。 すべてを続けて読み込んでも、サイトは魔法のように高速化するわけではなく、逆にブラウザが正しく動作を計画できなくなります。

プリフェッチと混同しないでください。 使ってはいけません <link rel= "preload">ページの読み込み直後にリソースが必要ない場合。 次のページなど、後で必要な場合は、次を使用します。 <link rel= "prefetch">.

細部

これは必須のタグです 他のすべてのタグとは異なり、ブラウザーによって実行されます (ブラウザーがサポートしている場合)。 プリロード関連。 ブラウザは、で指定されたリソースをダウンロードする必要があります。 <link rel="preload">。 また、低速接続で実行されている場合など、プリロードが無視される場合もあります。

優先度。 ブラウザは通常、最も重要なリソースを最初にロードするために、さまざまなリソース (スタイル、スクリプト、フォントなど) に異なる優先順位を割り当てます。 この場合、ブラウザは属性によって優先度を決定します。 as。 Chromeブラウザの場合は、次のように見ることができます 完全な優先順位テーブル.

プリフェッチ

<link rel= "prefetch"> バックグラウンドでリソース (スクリプトやスタイル シートなど) をダウンロードしてキャッシュするようにブラウザーに要求します。 読み込みは低い優先度で行われるため、より重要なリソースに干渉しません。 これは、次のページでリソースが必要で、事前にキャッシュしておきたい場合に便利です。

ここでも、ブラウザはロード後にリソースに対して何も行いません。 スクリプトは実行されず、スタイルシートも適用されません。 リソースは単純にキャッシュされ、リクエストに応じてすぐに利用できるようになります。

構文

<link rel="prefetch" href="/ja/style.css" as="style" />

href ダウンロードするリソースを指します。

as ブラウザでダウンロードできるものであれば何でも構いません。

• style スタイルシートの場合、
• script スクリプトの場合、
• font フォントの場合、
• fetch を使用してロードされたリソースの場合 fetch() または XMLHttpRequest,
• 完全なリストを見る MDN で.

属性を指定することが重要です as - これにより、ブラウザがダウンロードの優先順位を正しく設定し、スケジュールを設定できるようになります。

いつ使用するか

他のページからリソースをロードするには、別のページのリソースが必要で、それをプリロードしてそのページのレンダリングを高速化したい場合。 例えば：

• あなたはオンライン ストアを運営しており、ユーザーの 40% がホーム ページから製品ページに移動します。 使用 <link rel= "prefetch">、CSS および JS ファイルをロードして製品ページをレンダリングします。
• 単一ページのアプリケーションがあり、異なるページには異なるパッケージがロードされます。 ユーザーがページにアクセスすると、リンク先のすべてのページのパッケージをプリロードできます。

このタグはある程度安全に使用できる可能性があります。。 通常、ブラウザはプリフェッチを最も低い優先順位でスケジュールするため、誰にも迷惑をかけません。 ユーザーのトラフィックを消費するため、費用がかかる可能性があることに注意してください。

急ぎのリクエストには対応しておりません。 使ってはいけません <link rel= "prefetch">、数秒以内にリソースが必要になる場合。 この場合、使用します <link rel= "preload">.

細部

オプションのタグ。 ブラウザはこの指示に従う必要はありませんが、接続が遅い場合などには無視する場合があります。

Chrome での優先順位。 Chromeの場合 <link rel= "prefetch"> 通常は最小の優先順位で実行されます (「 完全な優先順位テーブル)、つまり、他のすべてをロードした後です。

事前接続

<link rel= "preconnect"> 将来の接続セットアップを高速化したい場合に、ブラウザに事前にドメインに接続するように要求します。

ブラウザーは、新しいサードパーティ ドメインからリソースを取得する場合、接続を確立する必要があります。 たとえば、CDN から Google Fonts や React フォントをロードする場合、または API サーバーからの JSON 応答をリクエストする場合です。

新しい接続の確立には通常、数百ミリ秒かかります。 一度で終わりですが、やはり時間がかかります。 事前に接続を確立しておくと、時間が節約され、このドメインからリソースをより速くダウンロードできます。

構文

<link rel= "preconnect" href="https://api.my-app.com" />

href は、IP アドレスを決定するドメイン名を示します。 プレフィックス(https://domain.com) またはそれなし (//domain.com).

いつ使用するか

すぐに必要になるドメインに使用します そこから重要なスタイル、スクリプト、または画像をダウンロードしたいのですが、リソースの URL がまだわかりません。 例えば：

• アプリケーションがホストされている場所 my-app.com そして、AJAXリクエストを行います api.my-app.com: 具体的なクエリは JS から動的に作成されるため、事前にわかりません。 ここでは、タグを使用してドメインに事前接続することが非常に適切です。
• アプリケーションがホストされている場所 my-app.com そしてGoogle Fontsを使用しています。 これらは XNUMX つの手順でダウンロードされます。まず、CSS ファイルがドメインからダウンロードされます。 fonts.googleapis.comの場合、このファイルは次のフォントを要求します。 fonts.gstatic.com。 特定のフォント ファイルがどのファイルからのものであるかを知ることはできません fonts.gstatic.com CSS ファイルを読み込むまでに必要となるため、事前に仮接続のみを行うことができます。

このタグを使用して、サードパーティのスクリプトやスタイルを少し高速化します。 事前に確立された接続のため。

使いすぎないでください。 接続の確立と維持は、クライアントとサーバーの両方にとってコストのかかる操作です。 このタグは最大 4 ～ 6 個のドメインに使用します。

細部

オプションのタグ。 ブラウザはこの指示に従う必要はなく、たとえば、多くの接続がすでに確立されている場合やその他の場合には、この指示を無視してもよい。

接続プロセスには何が含まれますか?。 各サイトに接続するには、ブラウザは次のことを行う必要があります。

• DNS解決。 サーバーの IP アドレスを検索 (216.58.215.78) 指定されたドメイン名 (google.com).
• TCPハンドシェイク。 パケットを交換 (クライアント → サーバー → クライアント) して、サーバーとの TCP 接続を開始します。
• TLS ハンドシェイク (HTTPS サイトのみ)。 安全な TLS セッションを開始するための XNUMX ラウンドのパケット交換 (クライアント → サーバー → クライアント → サーバー → クライアント)。

注: HTTP/3 ではハンドシェイク メカニズムが改善され、高速化されますが、まだ道のりは遠いです。

DNSプリフェッチ

<link rel= "dns-prefetch"> すぐに接続する予定で、最初の接続を高速化したい場合は、ブラウザーに事前にドメインの DNS 解決を実行するように要求します。

ブラウザーは、新しいサードパーティ ドメインからリソースを取得する場合、ドメインの IP アドレスを決定する必要があります。 たとえば、CDN から Google Fonts や React フォントをロードしたり、API サーバーから JSON 応答をリクエストしたりします。

新しいドメインごとに、DNS レコードの解決には通常約 20 ～ 120 ミリ秒かかります。 これは、特定のドメインからの最初のリソースの読み込みにのみ影響しますが、それでも遅延が発生します。 事前に DNS 解決を実行すると、時間が節約され、リソースの読み込みが速くなります。

構文

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

href は、IPアドレスを設定するドメイン名を示します。 プレフィックス(https://domain.com) またはそれなし (//domain.com).

いつ使用するか

すぐに必要になるドメインに使用します ブラウザが事前に認識していないリソースをそこからダウンロードします。 例えば：

• アプリケーションがホストされている場所 my-app.com そして、AJAXリクエストを行います api.my-app.com: 具体的なクエリは JS から動的に作成されるため、事前にわかりません。 ここでは、タグを使用してドメインに事前接続することが非常に適切です。
• アプリケーションがホストされている場所 my-app.com、Google Fontsを使用しています。 これらは XNUMX つの手順でダウンロードされます。まず、CSS ファイルがドメインからダウンロードされます。 fonts.googleapis.comの場合、このファイルは次のフォントを要求します。 fonts.gstatic.com。 特定のフォント ファイルがどのファイルからのものであるかを知ることはできません fonts.gstatic.com CSS ファイルを読み込むまで必要となるため、事前に仮接続のみを行うことができます。

このタグを使用して、サードパーティのスクリプトやスタイルを少し高速化します。 事前に確立された接続のため。

同様の特徴に注意してください <link rel= "dns-prefetch"/> и <link rel= "preconnect">。 通常、同じドメインでこれらを一緒に使用することは意味がありません。 <link rel= "preconnect"> すでに含まれています <link rel= "dns-prefetch"/> などなど。 これは次の XNUMX つの場合に正当化できます。

• 古いブラウザをサポートしますか?. <link rel= "dns-prefetch" /> による支援 IE10とSafari5以降. <link rel= "preconnect"> しばらくの間、Chrome と Firefox でサポートされていましたが、Safari 11.1 でのみ追加されました。 IE/Edgeではまだサポートされていません。 これらのブラウザをサポートする必要がある場合は、次を使用してください <link rel= "dns-prefetch" /> のバックアップオプションとして <link rel= "preconnect">.
• 4 ～ 6 を超えるドメインへの接続を高速化したい。 鬼ごっこ <link rel= "preconnect"> 接続の確立と維持にはコストがかかるため、4 ～ 6 を超えるドメインでの使用はお勧めできません。 <link rel= "dns-prefetch" /> 消費するリソースが少ないため、必要に応じて使用してください。

細部

オプションのタグ。 ブラウザーはこの指示に従う必要はないため、たとえばページ上にそのようなタグが多数ある場合やその他の場合には、DNS 解決を実行できない可能性があります。

DNSとは。 インターネット上の各サーバーには、次のような固有の IP アドレスがあります。 216.58.215.78。 サイトの名前は通常、ブラウザのアドレス バーに入力されます (例: google.com)、DNS (ドメイン ネーム システム) サーバーは、それをサーバーの IP アドレスと照合します (216.58.215.78).

IP アドレスを決定するには、ブラウザは DNS サーバーにクエリを実行する必要があります。 新しいサードパーティ ドメインに接続する場合は 20 ～ 120 ミリ秒かかります。

DNS はキャッシュされますが、信頼性はあまり高くありません。 一部の OS およびブラウザーは DNS クエリをキャッシュします。これにより、クエリを繰り返す場合の時間を節約できますが、キャッシュに依存することはできません。 Linux では通常、まったく機能しません。 Chrome には DNS キャッシュがありますが、それは XNUMX 分間しか持続しません。 Windows は DNS 応答を XNUMX 日間キャッシュします。

プリレンダリング

<link rel= "prerender"> URL をダウンロードして非表示のタブに表示するようにブラウザに要求します。 ユーザーがリンクをクリックすると、ページがすぐに表示される必要があります。 これは、ユーザーが特定のページにアクセスすることが確実で、そのページの表示を高速化したい場合に便利です。

このタグの優れた効果にもかかわらず (またはそのため)、2019 年には <link rel= "prerender"> 主要なブラウザではサポートが不十分です。 詳細をご覧ください。 以下.

構文

<link rel="prerender" href="https://my-app.com/pricing" />

href バックグラウンドでレンダリングを開始する URL を指します。

いつ使用するか

ユーザーが特定のページにアクセスすると確信している場合。 ページ A への訪問者の 70% がページ B に移動する「トンネル」がある場合、 <link rel= "prerender"> ページ A でページ B をすばやく表示するのに役立ちます。

使いすぎないでください。 プリレンダリングは帯域幅とメモリの点で非常に高価です。 使ってはいけません <link rel= "prerender"> 複数のページにわたって。

細部

オプションのタグ。 ブラウザはこの指示に従う必要はなく、たとえば、接続が遅い場合や空きメモリが不十分な場合には、この指示を無視する場合があります。

メモリを節約するには Chrome は完全なレンダリングを行わないと NoStateのみをプリロードします。 これは、Chrome がページとそのすべてのリソースを読み込みますが、JavaScript のレンダリングや実行は行わないことを意味します。

Firefox と Safari はこのタグをまったくサポートしていません。 ブラウザはこの指示に従う必要がないため、これは仕様に違反しません。 でもまだ悲しい。 実装上のバグ Firefox がオープンして XNUMX 年になります。 Safari についての報告があります。 このタグもサポートされていません.

サマリー

使用：

• <link rel= "preload"> - 数秒以内にリソースが必要な場合
• <link rel= "prefetch"> - 次のページのリソースが必要な場合
• <link rel= "preconnect"> - すぐにリソースが必要になることがわかっているが、その完全な URL がまだわからない場合
• <link rel= "dns-prefetch"> - 同様に、すぐにリソースが必要になることがわかっているが、その完全な URL がまだわからない場合 (古いブラウザの場合)
• <link rel= "prerender"> — ユーザーが特定のページにアクセスすることが確実で、その表示を高速化したい場合

出所： habr.com