Resource Hints を知る

Resource Hintsとは？

まずResource Hintsってなんですか。
Resource Hints | W3C を見ると、

This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element (). These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.

（DeepLの日本語訳）
この仕様では、HTMLリンク要素(<link>)のdns-prefetch、preconnect、prefetch、prinerの関係を定義します。これらのプリミティブは、開発者と、リソースを生成または配信するサーバが、どのオリジンに接続すべきか、どのリソースをフェッチしてページのパフォーマンスを向上させるために前処理すべきかの決定プロセスにおいて、ユーザエージェントを支援することを可能にします。

つまりは、
Webページでこれから必要になるリソースを、ブラウザに事前に教えてあげる
ものです。
ブラウザはそのヒントから、次に発生するリクエストに対して準備をします。

もっと簡単に言うと、これから使うリソースを事前に読み込むものです。

ブラウザのリソース取得までのフロー

Resource Hintsを使う前に、リソースをリクエストしてから評価するまでの一連の流れを知っておく必要があります。

ブラウザがリソースを取得する際、以下のようなフローで取得しています。

1. DNSルックアップ
   • URLからホスト名を解決し、IPアドレスを取得する
2. TCP接続
   • 指定されたURLに対して、コネクションを張る
3. リソースの取得
   • リソースのダウンロードを行う
4. リソースの評価
   • HTMLやJavaScript, CSSのパースを行う

この4つのプロセスそれぞれに対して、Resource Hintsで事前に準備をすることができます。

Resource Hintsを使う

Resource Hintsは以下のようなlinkタグを仕込んでおくことで、使うことができます。

DNS Prefetch

DNS Prefetchは、「ブラウザのリソース取得までのフロー」のDNSルックアップまで事前に行います。

dns-prefetch

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

Preconnect

Preconnectは、「ブラウザのリソース取得までのフロー」のTCP接続まで事前に行います。

preconnect

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

Prefetch

Prefetchは、「ブラウザのリソース取得までのフロー」のリソースの取得まで事前に行います。

prefetch

<link rel="prefetch" href="main.js" as="script">
<link rel="prefetch" href="image.png" as="image">

as属性は必須ではないですが、指定しておくことで、ブラウザがリソースの解析をするのを手助けすることができます。
他に、media, style, font, documentなどあります。

Prerender

Prerenderは、「ブラウザのリソース取得までのフロー」のリソースの評価まで事前に行います。

Prerender

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

バックグラウンドで、指定したページのレンダリングを行うため、ページ遷移後のレンダリングがとても速くなります。
ただし、指定できるページは1つのみであるため、遷移確率の低いページを指定してしまうと、ユーザーに無駄なレンダリングをさせてしまう恐れがあります。

実際に使うならこんなふうに使うのかな？

実際に使う場合、多くのユーザーが遷移するだろうというリソースがある場合以外は、動的に事前読み込みをする対象を決めることになると思います。

Resource Hintsのlinkタグは、動的に追加や削除を行っても良いため、

動的にlinkを追加するサンプル.js

const hint = document.createElement("link");
hint.rel = "prefetch";
hint.as = "document";
hint.href = "/article/part3.html";
document.head.appendChild(hint);

のように書くことができます。
これをクリックやホバー、スクロールなどのイベントで実行することで、適切なリソースの事前読み込みができるのではないか？と思っています。

最後に

Resource Hintsはサイトの改善にとても強力なものだと思います。
ただ、「なんでもかんでも事前読み込みしちゃえ」のように使うと、ユーザーのネットワーク帯域やCPUなどを占領してしまう恐れがあるので、適切に使っていく必要があるものです。
また、SafariやFirefoxでは一部使うことでできないため、Can I useを確認しておくべきです。

もし、記事に間違いなどありましたら、教えていただけると勉強になります！

リンク