Resource Hintsってご存知ですか？
Google PSIや Lighthouse等眺めてていつも思うのが、
「スコア安定しない、、」です。
「90以上いったーやったー」と思ってたら、色々スコア判定基準が変わってて60とかになってます。
その度にいろいろ考えるのですが、今回考えるのは、Resource Hints です。
Resource Hintsってなに？
調べ段階の備忘録記事なので間違いあるかもしれませんが、Resource Hintsとはその名の通り、リソースを先読みしてページの高速化・パフォーマンスの向上を目指す、というものです。
リソースの優先度付けを行い、ブラウザに優しい読み込みをしようということです。
dns-prefetch、preconnect、prefetch、prerender、4つの要素から構成されている
Resource Hintsには4つの機能があります。
もちろんこれらそれぞれの機能は違いますが、リソースを先読みしてパフォーマンス向上を目指す機能には変わりません。
使い方は簡単です。
link要素を利用してリソースの先読みをします。
例
<link rel="dns-prefetch" href="https://jajaaan.co.jp">対応ブラウザは？
現状、種類によりますがあまり多くはなさそうです。
caniuseで確認しましょう。
Resource Hintsのブラウザ対応状況
dns-prefetch
こちらはDNSルックアップ、つまり外部からのリソース読み込みの時に、事前に名前解決して早くしよう！というものです。
<link rel="dns-prefetch" href="https://jajaaan.co.jp">preconnect
connect(TCPハンドシェイク、TLSネゴシエーションなど)を事前に処理しようというものです。
<link rel="preconnect" href="//cdn.jajaaan.co.jp" crossorigin>どうやら現在IE11以外ではサポートされていないようです。
prefetch
画像やCSSのリソースを予めダウンロードし、キャッシュに格納します。
as属性はオプションです。指定できるas属性の値は以下のようなものになります。
audio、video、track、script、style、font、image、fetch、worker、embed、object、document
<link rel="prefetch" href="//jajaaan.co.jp" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">prerender
prerenderはリンク先のページをダウンロードし、バックグラウンドでDOM構築、JavaScript実行を行います。（GA除く）
<link rel="prerender" href="//jajaaan.co.jp/next-page.html">
