103 Early Hints

すぐに始める場合は、次のボタンをクリックします。

GitHub アカウントにリポジトリが作成され、アプリケーションが Cloudflare Workers にデプロイされます。

103 Early Hints は、コンテンツ配信を速めるための HTTP ステータスコードです。有効にすると、Cloudflare は HTML ページの preload や preconnect が付いた Link ヘッダーをキャッシュし、オリジンサーバーへ到達する前に 103 Early Hints レスポンスとして返せます。ブラウザーはこのヒントを使い、オリジンの最終レスポンスを待つあいだにリンク先アセットを取得でき、ページ読み込みが大幅に速くなります。

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

Cloudflare ダッシュボードで、Speed の設定ページを開きます。
Settings を開く ↗
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) {
		// If request is for test.css, serve the raw CSS
		if (/test\.css$/.test(req.url)) {
			return new Response(CSS, {
				headers: {
					"content-type": "text/css",
				},
			});
		} else {
			// Serve raw HTML using Early Hints for the CSS file
			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> {
    // If request is for test.css, serve the raw CSS
    if (/test\.css$/.test(req.url)) {
      return new Response(CSS, {
        headers: {
          "content-type": "text/css",
        },
      });
    } else {
      // Serve raw HTML using Early Hints for the CSS file
      return new Response(HTML, {
        headers: {
          "content-type": "text/html",
          link: "</test.css>; rel=preload; as=style",
        },
      });
    }
  },
} satisfies ExportedHandler;

import re
from workers import Response, WorkerEntrypoint

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>
"""

class Default(WorkerEntrypoint):
    async def fetch(self, request):
        if re.search("test.css", request.url):
            headers = {"content-type": "text/css"}
            return Response(CSS, headers=headers)
        else:
            headers = {"content-type": "text/html","link": "</test.css>; rel=preload; as=style"}
        return Response(HTML, headers=headers)

import { Hono } from "hono";

const app = new Hono();

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>
`;

// Serve CSS file
app.get("/test.css", (c) => {
	return c.body(CSS, {
		headers: {
			"content-type": "text/css",
		},
	});
});

// Serve HTML with early hints
app.get("*", (c) => {
	return c.html(HTML, {
		headers: {
			link: "</test.css>; rel=preload; as=style",
		},
	});
});

export default app;