コンテンツにスキップ

アーリーヒント

アーリーヒントは、ブラウザがウェブページをより速く読み込むのを助けます。アーリーヒントは、すべての pages.dev ドメインおよびカスタムドメインで自動的に有効になります。

アーリーヒントは、自動的に preload ↗ および preconnect ↗ タイプの Link ヘッダー ↗ をキャッシュし、ブラウザにアーリーヒントとして送信します。ヒントは、完全なレスポンスが準備される前にブラウザに送信され、ブラウザはエンドユーザーのためにウェブページをより速く読み込む方法を見つけることができます。これらの Link ヘッダーを Pages で作成する方法は2つあります。

アーリーヒントの設定

アーリーヒントは、以下に詳述する2つの方法のいずれかで作成できます。

1. _headers ファイルの設定

_headers ファイルを使用してカスタムヘッダーを作成します。ウェブサイトの /blog/ セクションに特定のスタイルシートを含める場合、次のルールを作成します。

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

Pages はこの Link: </styles.css>; rel=preload; as=style ヘッダーを添付します。アーリーヒントは、キャッシュされた後にこのヘッダーをアーリーヒントとして発信します。

著作体験を容易にするために、Pages は次の属性を持つ <link> HTML 要素から自動的に Link ヘッダーを生成します。

  • href
  • as (オプション)
  • rel ( preconnect、preload、または modulepreload のいずれか)

他の追加属性（例えば、fetchpriority、crossorigin、または data-do-not-generate-a-link-header）を含む <link> 要素は、アーリーヒントとして失われる可能性のあるカスタム優先順位ロジックを誤って失わないように、Link ヘッダーの生成には使用されません。

これにより、HTML と _headers ファイルの間を行き来することなく、ドキュメントを作成している間に直接アーリーヒントを作成できます。

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

自動的に生成された Link ヘッダーを削除するには、次の内容を _headers ファイルに追加します。

/*
  ! Link
Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings