【HTML Living Standard】dns-prefetch属性値の使い方
dns-prefetch属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
dns-prefetch定数は、ウェブページの読み込みパフォーマンスを向上させるための指示を表す定数です。この定数は、HTMLドキュメント内で<link>要素のrel属性の値として指定され、ブラウザに対して特定のドメインのDNS（Domain Name System）ルックアップを事前に実行するよう促します。
ウェブサイトが外部のドメインから画像、スクリプト、スタイルシートなどのリソースを読み込む際、ブラウザはまずそのドメインのIPアドレスをDNSサーバーに問い合わせて解決する必要があります。このDNS解決には時間がかかる場合があり、ウェブページの表示速度に影響を与える要因の一つとなります。dns-prefetch定数を指定することで、ユーザーが実際にそのドメインのリソースを必要とする前に、DNS解決をバックグラウンドで完了させておくことが可能になります。
例えば、<link rel="dns-prefetch" href="https://cdn.example.com/">のように記述すると、ブラウザはcdn.example.comのDNS解決を、ページの他の処理と並行して早期に開始します。これにより、後にcdn.example.comからのリソースを読み込む際に、DNS解決のための待ち時間がなくなり、リソースのダウンロードがより速やかに開始されます。
この機能は、特にユーザーが次にアクセスする可能性のあるページや、現在のページでは直接使われないが、後で必要となる可能性のあるサードパーティのリソースのドメインに対して有効です。ウェブページの初期表示速度を改善し、ユーザーエクスペリエンスを向上させるためのテクニックとして利用されますが、過度に多くのドメインに適用すると、DNSルックアップのオーバーヘッドが増加し、かえってパフォーマンスに悪影響を与える可能性もあるため、慎重に適用することが重要です。
構文(syntax)
1<link rel="dns-prefetch" href="https://www.example.com/">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLでDNS Prefetchを設定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>DNS Prefetchのサンプル</title> 7 8 <!-- 9 DNS Prefetchは、ブラウザが将来必要になる可能性のあるドメインのDNS名前解決を事前に開始するように指示します。 10 これにより、そのドメインからリソース（画像、スクリプト、スタイルシートなど）が読み込まれる際の接続時間が短縮され、ページの表示速度が向上する可能性があります。 11 特に、サードパーティのサービス（CDN、API、外部フォントなど）を多用する場合に有効です。 12 --> 13 <link rel="dns-prefetch" href="https://fonts.googleapis.com"> 14 <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com"> 15 <!-- 他のドメインに対しても同様に指定できます --> 16 <!-- <link rel="dns-prefetch" href="https://api.example.com"> --> 17 18 <style> 19 body { 20 font-family: sans-serif; 21 margin: 20px; 22 line-height: 1.6; 23 } 24 h1 { 25 color: #333; 26 } 27 p { 28 color: #555; 29 } 30 </style> 31</head> 32<body> 33 <h1>DNS Prefetchの基本的な使用例</h1> 34 <p> 35 このページでは、Google Fonts (<code style="background-color: #f0f0f0;">https://fonts.googleapis.com</code>) と 36 Cloudflare CDN (<code style="background-color: #f0f0f0;">https://cdnjs.cloudflare.com</code>) に対して、 37 DNS Prefetchを指示しています。 38 </p> 39 <p> 40 これにより、これらのドメインからリソースを読み込む際に、DNS解決のステップが事前に完了しているため、 41 実際の接続とダウンロードをより早く開始できるようになります。 42 </p> 43 44 <!-- 実際にGoogle Fontsからフォントを読み込む例 (dns-prefetchが効果を発揮する可能性のあるシナリオ) --> 45 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 46 <p style="font-family: 'Roboto', sans-serif; font-size: 20px;"> 47 このテキストはGoogle Fontsから読み込まれたRobotoフォントで表示されます。 48 </p> 49 50 <!-- 実際にCloudflare CDNからJavaScriptライブラリを読み込む例 (dns-prefetchが効果を発揮する可能性のあるシナリオ) --> 51 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 52 <script> 53 // jQueryが正常にロードされたことを確認する簡単なスクリプト 54 if (typeof jQuery !== 'undefined') { 55 console.log('jQueryはCloudflare CDNから正常にロードされました。'); 56 // 必要に応じて、ここでjQueryを使った処理を追加できます 57 // alert('jQueryがロードされました。開発者ツールでコンソールを確認してください。'); 58 } 59 </script> 60</body> 61</html>
HTMLのdns-prefetchは、ウェブページの表示速度を向上させるための機能です。これは、ブラウザに対して、将来的に必要となる可能性のあるドメインのDNS（Domain Name System）名前解決を事前に開始するよう指示します。DNS名前解決とは、ウェブサイトのアドレス（例：example.com）をコンピュータが理解できるIPアドレスに変換する処理のことです。
サンプルコードでは、<link rel="dns-prefetch" href="https://fonts.googleapis.com">のように使用します。linkタグのrel属性にdns-prefetchを指定し、href属性には事前解決したいドメインのURLを記述します。このdns-prefetch自体には、直接の引数や戻り値はありません。href属性で指定されたドメインの情報がブラウザに渡され、そのDNS解決がバックグラウンドで開始されます。
この事前解決によって、実際にそのドメインからフォント、スクリプト、スタイルシートなどの外部リソースが読み込まれる際、DNS解決にかかる時間が短縮され、ページの表示がよりスムーズになります。特に、外部のCDN（Content Delivery Network）やAPI、ウェブフォントなど、サードパーティのリソースを多く利用するウェブページで効果を発揮します。
dns-prefetchは、ブラウザが将来必要になる可能性のある外部ドメインのDNS名前解決を事前に開始するよう指示するものです。この設定は<head>タグ内の<link>要素で、rel属性にdns-prefetchを指定し、href属性にはhttps://から始まる完全なドメイン名を記述してください。過剰な指定はネットワークリソースを消費し、かえってページのパフォーマンスを低下させる可能性があるため、本当に必要なドメインに絞って使用することが重要です。また、その効果はブラウザやネットワーク環境に依存し、常に期待通りに働くとは限りません。指定する外部ドメインの信頼性も確認してから利用するようにしてください。
HTML dns-prefetchで外部ドメインのDNS解決を促す
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>DNS Prefetchingのサンプル</title> 7 <!-- 8 dns-prefetchは、ブラウザが指定された外部ドメインのDNS解決（名前解決）を事前に開始するよう指示します。 9 これにより、後でそのドメインからリソース（スクリプト、スタイルシート、画像など）を 10 読み込む際のネットワーク遅延を短縮し、ウェブページの表示速度を向上させる効果が期待できます。 11 主に、外部CDNやGoogle Fontsなどのサービスを利用する際に役立ちます。 12 --> 13 <link rel="dns-prefetch" href="https://fonts.googleapis.com"> 14 <link rel="dns-prefetch" href="https://cdn.jsdelivr.net"> 15</head> 16<body> 17 <h1>DNS Prefetchingのサンプルページ</h1> 18 <p> 19 このページでは、ブラウザに対してGoogle Fonts (<code>fonts.googleapis.com</code>) と 20 jsDelivr CDN (<code>cdn.jsdelivr.net</code>) のDNS情報を事前に解決しておくように指示しています。 21 </p> 22 <p> 23 これにより、実際にこれらのドメインからフォントやライブラリなどのリソースを読み込む際の 24 初期接続時間が短縮され、ページの表示が速くなる可能性があります。 25 </p> 26 27 <!-- 例: Google Fontsからフォントを読み込む（dns-prefetchの対象） --> 28 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> 29 <p style="font-family: 'Noto Sans JP', sans-serif;"> 30 このテキストは「Noto Sans JP」フォントで表示されるかもしれません。 31 </p> 32 33 <!-- 例: jsDelivr CDNからJavaScriptライブラリを読み込むことを想定（dns-prefetchの対象） --> 34 <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> --> 35 <p> 36 上記のjQueryスクリプトはコメントアウトされていますが、もし実際に読み込まれる場合、 37 事前にDNS解決されていることでロードが速くなります。 38 </p> 39</body> 40</html>
HTMLのdns-prefetchは、ウェブページの読み込み速度を向上させるための機能です。これは<link>タグのrel属性に指定して使用します。具体的には、ブラウザが指定された外部ドメインのDNS解決（名前解決）を、実際にそのドメインからリソースを読み込むよりも前に開始するよう指示します。
この事前解決により、後からそのドメインにある画像、スクリプト、スタイルシートなどのリソースを読み込む際に発生する初期接続の遅延が短縮されます。結果として、ウェブページ全体の表示が速くなる効果が期待できます。
サンプルコードでは、Google Fonts (fonts.googleapis.com) やjsDelivr CDN (cdn.jsdelivr.net) のドメインに対してdns-prefetchを設定しています。これにより、これらのドメインからフォントやJavaScriptライブラリなどを読み込む際の待ち時間を短縮し、ユーザー体験の向上が図られています。この機能は、引数や戻り値は持ちません。主に、外部CDNやサードパーティのサービスを頻繁に利用するウェブサイトで有効な最適化手法です。
dns-prefetchは、ウェブページの表示速度を向上させるため、外部ドメインのDNS解決を事前にブラウザに指示するものです。これにより、実際にリソースを読み込む際の初期接続時間が短縮される効果が期待できます。
注意点として、全ての外部ドメインに設定すると、DNS解決の処理が増え、かえってページのパフォーマンスが低下する可能性があります。そのため、後で確実に利用する重要な外部サービス（CDNやGoogle Fontsなど）に絞り、数個程度（2～4個が目安）に限定して利用することが推奨されます。
この指示はブラウザへの「ヒント」であり、必ず実行されるわけではありません。最適な効果を得るため、実際に利用する直前、かつ<head>タグ内に記述することが望ましいです。