ウェブのパフォーマンスを改善する方法はたくさんあります 。 それらの1つは、後で必要になるコンテンツのプリロードです。 CSSプリフェッチ、全ページプレビューレンダリング、またはドメイン名解決。 事前にすべてを行い、結果を即座に表示します！ かっこいいですね。



さらにクールなのは、実装が非常に簡単なことです。 5つの<link rel>タグは、ブラウザに予備アクションのコマンドを提供します。

<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/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-prefetch・プリレンダリング

予圧

<link rel= "preload">



は、ブラウザにリソース（スクリプトやスタイルシートなど）をできるだけ早くロードしてキャッシュするように指示します。 これは、ページがロードされてから数秒後にリソースが必要になり、プロセスを高速化する場合に役立ちます。



読み込み後、ブラウザはリソースに対して何もしません。 スクリプトは実行されず、スタイルシートは適用されません。 リソースは単純にキャッシュされ、要求に応じてすぐに使用可能になります。

構文

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

href



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



ブラウザでダウンロードできるものなら何でも：

• style
  
  
  
  シートのスタイル、
  
  
• script
  
  
  
  用のスクリプト、
  
  
• font
  
  
  
  のフォント、
  
  
• fetch



fetch()
  
  
  
  またはXMLHttpRequest
  
  
  
  を使用してロードされたリソースのfetch()
  
  
  
  、
  
  
• 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アプローチに従ってスタイルをクリティカル（即時レンダリング用）と非クリティカルの2つの部分に分割する場合：
  
  
  
  

   <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="/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>タグとは異なり、ブラウザで実行するために必要なタグです（サポートしている場合）。 ブラウザは、 <link rel="preload">



指定されたリソースをダウンロードする必要があります。 他の場合では、たとえば、低速接続で実行している場合、プリロードを無視する場合があります。



優先順位 さまざまなリソース（スタイル、スクリプト、フォントなど）に、ブラウザーは通常、最も重要なリソースを最初に読み込むためにさまざまな優先順位を割り当てます。 この場合、ブラウザはas属性を優先します。 Chromeブラウザの場合、優先順位の全表を見ることができます。

先読み

<link rel= "prefetch">



は、バックグラウンドでリソース（たとえば、スクリプトやスタイルシート）をダウンロードしてキャッシュするようにブラウザーに要求します。 ダウンロードは低い優先度で実行されるため、より重要なリソースに干渉しません。 これは、次のページのリソースが必要で、事前にキャッシュしたい場合に便利です。



ここでも、ブラウザは読み込み後にリソースを処理しません。 スクリプトは実行されず、スタイルシートは適用されません。 リソースは単純にキャッシュされ、要求に応じてすぐに使用可能になります。

構文

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

href



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



ブラウザでダウンロードできるものなら何でも：

• style
  
  
  
  シートのスタイル、
  
  
• script
  
  
  
  用のスクリプト、
  
  
• font
  
  
  
  のフォント、
  
  
• fetch



fetch()
  
  
  
  またはXMLHttpRequest
  
  
  
  を使用してロードされたリソースのfetch()
  
  
  
  、
  
  
• MDNの完全なリストを参照してください。

as



属性を指定することが重要です-これは、ブラウザーがダウンロードを正しく優先順位付けし、計画するのに役立ちます。

使用する場合

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

• オンラインストアがあり、ユーザーの40％がメインページから製品ページに移動します。 CSSおよびJSファイルを読み込んで製品ページをレンダリングする場合は、 <link rel= "prefetch">
  
  
  
  を使用します。
  
  
• 1ページのアプリケーションがあり、異なるページが異なるパッケージをロードします。 ユーザーがページにアクセスすると、そのページが参照するすべてのページのパッケージをプリロードできます。

おそらく、このタグはどのボリュームでも安全に使用できます 。 通常、ブラウザは最も低い優先度でプリフェッチを計画するため、誰も気にしません。 ユーザートラフィックを消費し、費用がかかる可能性があることに注意してください。



緊急のリクエストではありません 。 数秒でリソースが必要な場合は、 <link rel= "prefetch">



使用しないでください。 この場合、 <link rel= "preload">



ます。

詳細

オプションのタグ 。 ブラウザはこの指示に従う必要はありません。たとえば、遅い接続の場合は無視できます。



Chromeの優先度 。 Chromeでは、通常、 <link rel= "prefetch">



最小の優先度（ 完全な優先度の表を参照）で、つまり他のすべてをダウンロードした後に実行されます。

事前接続

<link rel= "preconnect">



は、将来接続を高速化する場合、ブラウザにドメインへの事前接続を要求します。



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



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

構文

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

href



は、IPアドレスを決定するドメイン名を示します。 プレフィックス付き（ https://domain.com



）またはプレフィックスなし（ //domain.com



）で指定できます。

使用する場合

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

• アプリケーションはmy-app.com
  
  
  
  でホストされ、 my-app.com
  
  
  
  AJAXリクエストをapi.my-app.com
  
  
  
  ます。特定のリクエストはJSから動的に作成されるため、事前にはわかりません。 ドメインへの予備接続にタグを使用することは非常に適切です。
  
  
• アプリケーションはmy-app.com
  
  
  
  でホストされ、Googleフォントを使用します。 これらは2段階でダウンロードされます。最初に、CSSファイルがドメインfonts.googleapis.com
  
  
  
  からダウンロードされ、次にこのファイルがfonts.gstatic.com
  
  
  
  からフォントを要求します。 CSSファイルをロードするまで、 fonts.gstatic.com
  
  
  
  からどの特定のフォントファイルが必要かを知ることはできないため、事前の接続のみを事前に確立できます。

このタグを使用して 、接続を事前設定することにより、一部のサードパーティのスクリプトを高速化するか、少しスタイルを設定します。



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

詳細

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



接続プロセスが含まれます 。 各サイトに接続するには、ブラウザで次の手順を実行する必要があります。

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

注：HTTP / 3は、ハンドシェイクメカニズムを改善および高速化しますが、それでもまだまだ先です。

dns-prefetch

<link rel= "dns-prefetch">



は、すぐに接続して最初の接続を高速化する場合、事前にドメインのDNSを解決するようにブラウザーに要求します。



ブラウザは、新しいサードパーティドメインからリソースを取得する場合、ドメインのIPアドレスを決定する必要があります。 たとえば、Googleフォント、ReactフォントをCDNからダウンロードしたり、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
  
  
  
  でホストされ、 my-app.com
  
  
  
  AJAXリクエストをapi.my-app.com
  
  
  
  ます。特定のリクエストはJSから動的に作成されるため、事前にはわかりません。 ドメインへの予備接続にタグを使用することは非常に適切です。
  
  
• アプリケーションはmy-app.com
  
  
  
  でホストされ、Googleフォントを使用します。 これらは2段階でダウンロードされます。最初に、CSSファイルがドメインfonts.googleapis.com
  
  
  
  からダウンロードされ、次にこのファイルがfonts.gstatic.com
  
  
  
  からフォントを要求します。 CSSファイルをダウンロードするまで、 fonts.gstatic.com
  
  
  
  から必要な特定のフォントファイルを知ることはできません。したがって、事前の接続のみを確立することができます。

このタグを使用して 、接続を事前設定することにより、一部のサードパーティのスクリプトを高速化するか、少しスタイルを設定します。

<link rel= "dns-prefetch"/>



および<link rel= "preconnect">



の同様の仕様に注意してください。 同じドメインでこれらを一緒に使用することは通常意味がありません。 <link rel= "preconnect">



すでに<link rel= "dns-prefetch"/>



などが含まれています。 これは、次の2つの場合に正当化できます。

• 古いブラウザをサポートしたい 。 IE10およびSafari 5以降、 <link rel= "dns-prefetch" />
  
  
  
  がサポートされています。 <link rel= "preconnect">
  
  
  
  はChromeとFirefoxでしばらくサポートされていましたが、11.1でのみSafariに追加され、IE / Edgeではまだサポートされていません 。 これらのブラウザーをサポートする必要がある場合は、 <link rel= "preconnect">
  
  
  
  として<link rel= "dns-prefetch" />
  
  
  
  を使用します。
• 4〜6個以上のドメインへの接続を高速化したい場合 。 <link rel= "preconnect">
  
  
  
  、4〜6個を超えるドメインで使用することはお勧めしません。接続の確立と維持は高価な操作であるためです。 <link rel= "dns-prefetch" />
  
  
  
  は消費するリソースが少ないため、必要に応じて使用します。

詳細

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



DNSとは何ですか 。 インターネット上の各サーバーには、 216.58.215.78



ような一意のIPアドレスがあります。 ブラウザーのアドレスバーには、通常、サイト名（例： google.com



）が入力され、DNS（ドメインネームシステム）サーバーはそれをサーバーIPアドレス（ 216.58.215.78



）にマップします。



IPアドレスを判別するには、ブラウザーはDNSサーバーに照会する必要があります。 新しいサードパーティドメインに接続する場合、20〜120ミリ秒かかります。



DNSはキャッシュされますが、あまり信頼できません 。 一部のオペレーティングシステムとブラウザはDNSクエリをキャッシュします。これにより、繰り返しクエリの時間を節約できますが、キャッシュに頼ることはできません。 Linuxでは、通常はまったく機能しません。 ChromeにはDNSキャッシュがありますが、1分間しか続きません。 Windowsは、DNS応答を5日間キャッシュします。

プレレンダー

<link rel= "prerender">



は、ブラウザにURLをダウンロードし、非表示のタブに表示するように要求します。 ユーザーがリンクをクリックすると、ページがすぐに表示されます。 これは、ユーザーが特定のページにアクセスし、その表示を高速化することが確実な場合に役立ちます。



このタグの非常に優れた効果（またはそのため）にもかかわらず、2019年に<link rel= "prerender">



主要なブラウザで十分にサポートされていません。 詳細については、 以下を参照してください。

構文

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

href



は、バックグラウンドでレンダリングを実行するURLを指します。

使用する場合

ユーザーが特定のページに移動することを本当に確信している場合 。 ページAへの訪問者の70％がページBに移動する「トンネル」がある場合、ページAの<link rel= "prerender">



はページBを非常にすばやく表示するのに役立ちます。



虐待しないでください 。 事前レンダリングは、トラフィックとメモリの点で非常に高価です。 複数のページに<link rel= "prerender">



使用しないでください。

詳細

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



メモリを節約するため、 Chromeは完全なレンダリングを実行せず 、 NoStateをプリロードします 。 つまり、Chromeはページとそのすべてのリソースをロードしますが、レンダリングせず、JavaScriptを実行しません。



FirefoxおよびSafariは、このタグをまったくサポートしていません。 ブラウザはこの指示に従う必要がないため、これは仕様に違反しません。 とにかく悲しい。 Firefox の実装バグは7年間公開されています。 Safari もこのタグをサポートしていないという報告があります。

まとめ

使用：

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