← Cloudflare Workers / workers / examples

103 Early Hints

Pokud chcete rychle začít, klikněte na tlačítko níže.

Tím se vytvoří repozitář ve vašem účtu GitHub a aplikace se nasadí na Cloudflare Workers.

103 Early Hints je stavový kód HTTP navržený pro urychlení doručování obsahu. Když je tato funkce povolena, může Cloudflare uložit do cache Link hlaviček označených preload nebo preconnect z HTML stránek a doručuje je v 103 odpověď Early Hints ještě před dosažením origin serveru. Prohlížeče mohou tyto informace využít k načtení odkazovaných zdrojů, zatímco čekají na finální odpověď z origin serveru, což výrazně zrychluje načítání stránek.

Chcete-li se ujistit, že je Early Hints ve vaší zóně zapnuto:

V dashboardu Cloudflare přejděte na Nastavení rychlosti stránce.
Přejděte na Nastavení ↗
Přejděte na Optimalizace obsahu.
Povolte Early Hints přepínač do polohy zapnuto.

Můžete vrátit Link hlavičky z Workeru běžícího ve vaší zóně, abyste zrychlili načítání stránek.

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;