/
index.md
79 lines (55 loc) · 5.53 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
---
title: dns-prefetch の使用
slug: Web/Performance/dns-prefetch
l10n:
sourceCommit: 226ae7cf624bfebf611172acb1cd992348b4f165
---
{{QuickLinksWithSubPages("/ja/docs/Web/Performance")}}
**DNS-prefetch`** はリソースがリクエストされる前にドメイン名を解決しようとする試みです。これは後で読み込まれるファイルであったり、ユーザーが辿ろうとするリンク対象であったりします。
## なぜ dns-prefetch を使用するのか
ブラウザーが（サードパーティの）サーバーにリソースをリクエストする場合、ブラウザーがリクエストを発行する前に、その[別オリジン](/ja/docs/Web/HTTP/CORS)のドメイン名を IP アドレスに解決する必要があります。このプロセスは DNS 解決と呼ばれています。 DNS キャッシュはこの待ち時間を縮小するのに役立ちますが、 DNS 解決はリクエストに大きな待ち時間を追加する可能性があります。多くのサードパーティへの接続を開くためのウェブサイトでは、この待ち時間が読み込みパフォーマンスを大幅に縮小する可能性があります。
`dns-prefetch` は開発者が DNS 解決の遅延をマスクするのに役立ちます。 [HTML の `<link>` 要素](/ja/docs/Web/HTML/Element/link)は [`rel` 属性](/ja/docs/Web/HTML/Attributes/rel) の値 `dns-prefetch` によってこの機能を提供します。[別オリジン](/ja/docs/Web/HTTP/CORS)のドメインは、 [href 属性](/ja/docs/Web/HTML/Attributes)で指定します。
## 構文
```html
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
```
## 例
```html
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
<!-- その他のヘッダー要素 -->
</head>
<body>
<!-- ページの内容 -->
</body>
</html>
```
自分のウェブサイトが別オリジンのドメインのリソースを参照するときは、 `dns-prefetch` ヒントを [`<head>` 要素](/ja/docs/Web/HTML/Element/head)に配置する必要がありますが、いくつか注意すべきことがあります。
## ベストプラクティス
留意すべきことは主に 3 つあります。
**第一**に、`dns-prefetch`は[別オリジン](/ja/docs/Web/HTTP/CORS)のドメインの DNS 検索にのみ有効なので、自分のサイトや ドメインを指すのに使用するのは避けてください。ブラウザーがヒントを見る時点で、自分のサイトのドメインの背後にある IP はすでに解決されているからです。
**第二**に、 `dns-prefetch` （および他のリソースヒント）を [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers)の [HTTP の Link フィールド](/ja/docs/Web/HTTP/Headers/Link)を使用することで指定することも可能です。
```http
Link: <https://fonts.googleapis.com/>; rel=dns-prefetch
```
**第三**に、 `dns-prefetch` は DNS 検索を行うだけですが、 `preconnect` はサーバーへの接続を確立します。このプロセスには、 DNS 解決、 TCP 接続の確立、 [TLS](/ja/docs/Glossary/TLS) ハンドシェイク（サイトが HTTPS で提供されている場合）が含まれます。 `preconnect` を用いることで、[オリジン間リクエスト](/ja/docs/Web/HTTP/CORS)の遅延を縮小することができます。 [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers)で [HTTP の Link フィールド](/ja/docs/Web/HTTP/Headers/Link)を用いることで使用することができます。
```http
Link: <https://fonts.googleapis.com/>; rel=preconnect
```
または [HTML の `<link>` 要素](/ja/docs/Web/HTML/Element/link)でも使用できます。
```html
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />
```
> **メモ:** ページが多数の第三者ドメインに接続する必要がある場合、すべてに事前接続するのは逆効果です。 `preconnect` ヒントは最も重要な接続にのみ使用するのが最適です。他にも `<link rel="dns-prefetch">` を使用して、最初の段階である DNS 検索の時間を節約しましょう。
これらのヒントをペアにしている理由は、 dns-prefetch の対応が preconnect の対応よりも優れているからです。 preconnect に対応していないブラウザーでも、 dns-prefetch に代替されることで、ある程度の好ましいことを取得することができます。これは HTML の機能なので、とても耐障害性に優れています。非対応のブラウザーが dns-prefetch のヒントや他のリソースのヒントに遭遇しても、サイトが壊れることはありません。ただ、指定されたことが提供されないだけです。
フォントなど、一部のリソースは無名モードで読み込まれます。そのような場合は preconnect ヒントで [crossorigin](/ja/docs/Web/HTML/Attributes/crossorigin) 属性を設定する必要があります。これを除外すると、ブラウザーは DNS 検索のみを行います。
## 関連情報
- [\<link>](/ja/docs/Web/HTML/Element/link)
- [HTML 属性: rel](/ja/docs/Web/HTML/Attributes/rel)
- [crossorigin](/ja/docs/Web/HTML/Attributes/crossorigin)
- [オリジン間リソース共有 (CORS)](/ja/docs/Web/HTTP/CORS)
- [HTTP ヘッダー](/ja/docs/Web/HTTP/Headers)
- [HTTP の Link ヘッダー](/ja/docs/Web/HTTP/Headers/Link)