Early Hints

Early Hints は、ブラウザーがウェブページをより速く読み込むのに役立ちます。Early Hints は、すべての pages.dev ドメインとカスタムドメインで自動的に有効です。

Early Hints は、preload ↗ と preconnect ↗ タイプの Link ヘッダー ↗ を自動でキャッシュし、Early Hints としてブラウザーへ送ります。ヒントは完全なレスポンスの準備より先にブラウザーへ送られ、ブラウザーはエンドユーザー向けにウェブページをより速く読み込む方法を判断できます。Pages でこれらの Link ヘッダーを作る方法は 2 つあります。

Early Hints を設定する

Early Hints は、次のいずれかの方法で作成できます。

1. `_headers` ファイルを設定する

_headers ファイルでカスタムヘッダーを作成します。サイトの /blog/ セクションで特定のスタイルシートを読み込む場合は、次のルールを作成します。

/blog/*
  Link: </styles.css>; rel=preload; as=style

Pages はこの Link: </styles.css>; rel=preload; as=style ヘッダーを付けます。Early Hints は、キャッシュ後にこのヘッダーを Early Hint として送ります。

2. `Link` ヘッダーの自動生成

作成作業を簡単にするため、Pages は次の属性を持つ <link> HTML 要素からも、Link ヘッダーを自動生成します。

href
as（任意）
rel（preconnect、preload、または modulepreload のいずれか）

ほかの追加属性（たとえば fetchpriority、crossorigin、data-do-not-generate-a-link-header）を含む <link> 要素は、Link ヘッダーの生成には使いません。Early Hint として落とされると失われるカスタムの優先度ロジックを、誤って失わないようにするためです。

これにより、HTML と _headers ファイルを行き来せず、ドキュメントを書きながら直接 Early Hints を作成できます。

<html>
	<head>
		<link rel="preload" href="/style.css" as="style" />
		<link rel="stylesheet" href="/style.css" />
	</head>
</html>

自動 `Link` ヘッダー生成を無効にする

自動生成された Link ヘッダーは、_headers ファイルに次を追加すると削除できます。

/*
  ! Link