外部リソースを使う方法 (link) [HTML]

link タグ

参考：

link – 外部リソースへのリンク要素 | MDN

先読み

ページ内

• preload
• preconnect
• dns-prefetch

ページ外

• next
• prefetch

参考：

リンク先読みの FAQ | MDN

preload

ページのレンダリングを開始する前に、予めリソースの読み込みを実行する。

参考：

rel=”preload” を極めるために必要な2種類のプリロード機能 | Raccoon Tech Blog

preload | MDN

prefetch

次のアクションに備えて予めリソースを読み込んでおく。

参考：

prefetch | MDN

preconnect / dns-prefetch

※実験的機能

Google Fonts サーバーに対してプリコネクトを実行する。

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

Google Fonts の読み込みに対して DNS プリフェッチ及びプリコネクトを適用する。

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="//fonts.gstatic.com">

参考：

link 要素による Resource Hints を使用してリソースの先読みを行う | Subterranean Flower Blog

少ない手間でその Web ページに適した手法で表示高速化ができる Resource Hints がすごい | メンバーズ

簡単にできる高速化／リソースの先読み／Resource Hints のやり方 | JAJAAAN

サイトの表示速度を link タグの rel=”preconnect” で上げる／WebPageTest で事前接続を調べる | 些細な日常

サイト表示の高速化に dns-prefetch, preconnect, prefetch, prerender, preload を試す | QWERTY.WORK

dns-prefetch と preconnect は同じ link タグで使用しない | sugamaan

リソースの読み込みを助けるウェブブラウザ API の世界 | nhiroki’s weblog

rel=preconnect | 珈琲とウェブデザイン

preconnect | MDN

dns-prefetch | MDN

Using dns-prefetch | MDN

X-DNS-Prefetch-Control | MDN

Preconnect to Required Origins | web.dev

Link Frefetching – Wikipedia

preconnect | Can I Use Support Tables

dns-prefetch | Can I Use Support Tables

When should I use the “crossorigin” attribute on a “preconnect” <link>? – Webmasters Stack Exchange

Why is preconnect resource hint not working? – Stack Overflow

prerender

※実験的機能

参考：

prerender | MDN

Introducing NoState Prefetch | Google Developers [Official]

Resource Hints

参考：

Web ページ高速化／リソースへの事前接続 | ハシウェブ

Resource Hints 日本語訳 | Web 関連仕様 日本語訳 (triple-underscore.github.io)

Resource Hints | W3C