← Cloudflare Workers / workers / examples

103 Early Hints

Если вы хотите быстро начать, нажмите на кнопку ниже.

Это создаёт репозиторий в вашем аккаунте GitHub и разворачивает приложение в Cloudflare Workers.

103 Early Hints представляет собой код состояния HTTP, ускоряющий доставку контента. Если эта функция включена, Cloudflare может кешировать Link заголовки, помеченные как preload и (или) preconnect, из HTML страниц и передаёт их в 103 ответ Early Hints ещё до обращения к серверу источника. Браузеры используют эти подсказки, чтобы начать загрузку связанных ресурсов, пока ожидают окончательный ответ источника, что значительно ускоряет загрузку страницы.

Чтобы убедиться, что Early Hints включены для вашей зоны:

На панели управления Cloudflare перейдите к разделу Настройки скорости страницу.
Перейдите в Настройки ↗
Перейдите в Оптимизация контента.
Включить Early Hints переключатель в положение «включено».

Можно вернуть Link заголовки из Worker, работающего в вашей зоне, чтобы ускорить загрузку страниц.

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;