目的

本稿は、プロジェクトで dns-prefetch を使用しているメンバがいた為、
今後の知見のために、上記についてまとめることで今後自身で対応する際に
調べる時間を減らすことを目的とする。

＃どうせならば dns-prefetch 以外rel属性もまとめることで、
＃関連付けて覚えてしまおうという魂胆からプロジェクトで頻出度
＃が高いrel属性も記載する。

rel属性とは

自分のページと外部ページやファイルを関連づけるlinkタグの属性
であり、href属性で記載したURLとの関係性を表す属性である。

＃ linkタグは <HEAD>～</HEAD> 間で使用

rel属性は複数あり、その一覧を以下に記載する。

＃随時追加予定

▼ 使用例

<link rel="canonical" href="https://sample.co.jp">

検索エンジンに対してhrefで記載したURLが正規のURLであることを示す。

内容が同じなのにURLに差異があると、検索エンジンに別のページだと見なされる
可能性がある。その場合、評価が分散し、結果的にページの評価が下がってしまう。

＃同ページにhttps://sample.co.jp と https://sample.co.jp/
＃をhrefに記載している場合など。

そのため canonical を設定することでページの評価分散を避ける。

hrefで記載したリソースを事前に読み込んでおくことで、
ページ遷移時のパフォーマンスを向上させる（Resouce Hints）。

また Resouce Hints は以下で構成されており、各説明は以降で記載する。

▼ 使用例

<link rel=”dns-prefetch” href=”//sample.co.jp”>

外部サイトから通信を確立する際に、事前に名前解決
を行うことで遷移時の処理を省略することが出来る。

▼ 使用例

<link rel=”preconnect” href=”//sample.co.jp”>

TCP three-way handshaking¹や SSL/TLS session negotiation²を事前に処理する。

▼ 使用例

<link rel=”prefetch” href=”/sample.js” as="script">

リソースを予めキャッシュに格納する。

dns-prefetch や preconnect と違い、通信の確立ではなく画像のような
リソースを取得する際に使用する。また、as属性 で取得するリソースの種類
を指定することで、ブラウザ側が最適なプロセスでリソースを取得可能となる。

＃リソースのサイズが大きいまたはネットワーク速度が遅い場合は行わない。

▼ 使用例

<link rel=”prerender” href=”//sample.co.jp”>

prefetch のようなリソースのダウンロードだけでなく、リンク先のDOM構築や
JavaScriptの実行まで行う。CSSやJavaScriptが実行されることで、遷移した際はレン
ダリングが完了している状態となる。

＃アクセス前なのにCSSのアニメーションが動作するといった事象が発生する。
＃その場合、Page Visibility API などで対策する必要がある。
＃複数指定は不可。