リソースへのリクエスト前にドメイン名を解決するdns-prefetch
公開: 2025年9月21日(日)
更新: 2025年9月21日(日)
外部のリソースを読み込む際、ブラウザはまずそのリソースのドメイン名をIPアドレスに変換するためにDNSルックアップを行います。 このプロセスは時間がかかることがあり、リソースの読み込みパフォーマンスに影響を与えることがありました。
linkタグのrel属性にdns-prefetchを付与すると、リソースへのリクエストの前に対象のドメイン名のDNSルックアップを行うよう指示できます。
これにより、実際にそのドメインからリソースを取得する際の待機時間が短縮され、ページのパフォーマンスが向上します。
そんな、<link rel="dns-prefetch">はBaseline 2025で追加された機能です。
<!-- head内に置く必要があります -->
<head>
<!-- example.comに対してDNSルックアップを行う -->
<link rel="dns-prefetch" href="https://example.com">
</head>preconnectと似ていますが、preconnectはdns-prefetchで行うDNSルックアップに加えて、TCP接続やTLSハンドシェイクを行うところに違いがあります。
preconnectは多くのリソースを消費するので、複数のサイトでリソースの解決を早めたい場合に全てpreconnectを使うのは避けるべきです。
重要なリソースに対してのみ、preconnectを使用し、その他のリソースに対してはdns-prefetchを使用することが推奨されます。