1. ohakutsu

    Posted

    ohakutsu
Changes in title
+Resource Hints を知る
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,108 @@
+
+## Resource Hintsとは?
+
+まずResource Hintsってなんですか。
+[Resource Hints | W3C](https://www.w3.org/TR/resource-hints/) を見ると、
+
+> This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element (<link>). 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ルックアップ**まで事前に行います。
+
+```html:dns-prefetch
+<link rel="dns-prefetch" href="https://example.com">
+```
+
+### Preconnect
+
+`Preconnect`は、「ブラウザのリソース取得までのフロー」の**TCP接続**まで事前に行います。
+
+```html:preconnect
+<link rel="preconnect" href="https://example.com">
+```
+
+### Prefetch
+
+`Prefetch`は、「ブラウザのリソース取得までのフロー」の**リソースの取得**まで事前に行います。
+
+```html:prefetch
+<link rel="prefetch" href="main.js" as="script">
+<link rel="prefetch" href="image.png" as="image">
+```
+
+`as`属性は必須ではないですが、指定しておくことで、ブラウザがリソースの解析をするのを手助けすることができます。
+他に、`media`, `style`, `font`, `document`などあります。
+
+### Prerender
+
+`Prerender`は、「ブラウザのリソース取得までのフロー」の**リソースの評価**まで事前に行います。
+
+```html:Prerender
+<link rel="prerender" href="https://example.com/next_page.html">
+```
+
+バックグラウンドで、指定したページのレンダリングを行うため、ページ遷移後のレンダリングがとても速くなります。
+ただし、指定できるページは1つのみであるため、遷移確率の低いページを指定してしまうと、ユーザーに無駄なレンダリングをさせてしまう恐れがあります。
+
+# 実際に使うならこんなふうに使うのかな?
+
+実際に使う場合、多くのユーザーが遷移するだろうというリソースがある場合以外は、**動的に事前読み込みをする対象を決める**ことになると思います。
+
+Resource Hintsの`link`タグは、動的に追加や削除を行っても良いため、
+
+```js:動的に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では一部使うことでできないため、https://caniuse.com/?search=resource%20hints を確認しておくべきです。
+
+もし、記事に間違いなどありましたら、教えていただけると勉強になります。
+
+## リンク
+- [Resource Hints | W3C](https://www.w3.org/TR/resource-hints/)
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
+- https://caniuse.com/?search=resource%20hints
+- [ウェブブラウザがページを取得して表示するまでの流れ | ラボラジアン](https://laboradian.com/browser-process-rendering-page/)