103 Early Hints

クライアントがHTMLレスポンスを待っている間に静的アセットをリクエストできるようにします。

103 Early Hintsは、コンテンツ配信を迅速化するために設計されたHTTPステータスコードです。これが有効になると、CloudflareはHTMLページからプリロードおよび/またはプリコネクトとしてマークされたLinkヘッダーをキャッシュし、オリジンサーバーに到達する前に103 Early Hintsレスポンスで提供できます。ブラウザはこれらのヒントを使用して、オリジンの最終レスポンスを待っている間にリンクされたアセットを取得し、ページの読み込み速度を大幅に向上させることができます。

Early Hintsがゾーンで有効になっていることを確認するには：

Cloudflare Dashboard ↗にログインし、アカウントとウェブサイトを選択します。
Speed > Optimization > Content Optimizationに移動します。
Early Hintsトグルをオンにします。

ゾーンで実行されているWorkerからLinkヘッダーを返すことで、ページの読み込み時間を短縮できます。

const CSS = "body { color: red; }";
const HTML = `
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Early Hints test</title>
    <link rel="stylesheet" href="/test.css">
</head>
<body>
    <h1>Early Hints test page</h1>
</body>
</html>
`;

export default {
  async fetch(req) {
    // リクエストがtest.cssの場合、生のCSSを提供します
    if (/test\.css$/.test(req.url)) {
      return new Response(CSS, {
        headers: {
          "content-type": "text/css",
        },
      });
    } else {
      // CSSファイルのためにEarly Hintsを使用して生のHTMLを提供します
      return new Response(HTML, {
        headers: {
          "content-type": "text/html",
          link: "</test.css>; rel=preload; as=style",
        },
      });
    }
  },
};

const CSS = "body { color: red; }";
const HTML = `
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Early Hints test</title>
    <link rel="stylesheet" href="/test.css">
</head>
<body>
    <h1>Early Hints test page</h1>
</body>
</html>
`;

export default {
  async fetch(req): Promise<Response> {
    // リクエストがtest.cssの場合、生のCSSを提供します
    if (/test\.css$/.test(req.url)) {
      return new Response(CSS, {
        headers: {
          "content-type": "text/css",
        },
      });
    } else {
      // CSSファイルのためにEarly Hintsを使用して生のHTMLを提供します
      return new Response(HTML, {
        headers: {
          "content-type": "text/html",
          link: "</test.css>; rel=preload; as=style",
        },
      });
    }
  },
} satisfies ExportedHandler;

import re
from js import Response, Headers

CSS = "body { color: red; }"
HTML = """
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Early Hints test</title>
    <link rel="stylesheet" href="/test.css">
</head>
<body>
    <h1>Early Hints test page</h1>
</body>
</html>
"""
def on_fetch(request):
    if re.search("test.css", request.url):
        headers = Headers.new({"content-type": "text/css"}.items())
        return Response.new(CSS, headers=headers)
    else:
        headers = Headers.new({"content-type": "text/html","link": "</test.css>; rel=preload; as=style"}.items())
        return Response.new(HTML, headers=headers)

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings