perf(theme): send font preloads as a Link header for Early Hints

src/fonts.ts

@@ -19,3 +19,13 @@ export const PAIRING_PRELOADS: Readonly<Record<string, readonly string[]>> = {
   ],
   classic: ["/fonts/v1/source-serif-4-latin-wght-normal.woff2"],
 };
+
+/**
+ * The same preloads as a `Link` response header. On a Cloudflare zone with Early Hints on, the
+ * edge sends it as a 103 before the page, so the fonts load while the Worker is still rendering.
+ */
+export function fontLinkHeader(hrefs: readonly string[]): string {
+  return hrefs
+    .map((h) => `<${h}>; rel=preload; as=font; type="font/woff2"; crossorigin`)
+    .join(", ");
+}

src/pages/[...path].astro

@@ -51,6 +51,7 @@ import {
   relatedEntries,
   termAncestors,
 } from "@cloudhal/astro-renderer/taxonomy";
+import { themeVariables } from "@cloudhal/astro-renderer/theme-settings";
 import type { ContentEntry } from "@cloudhal/core-contracts";
 /**
  * One route for the whole graph (RFC-0002 §7 order): a Page answers at its `path`; an article at
@@ -73,8 +74,10 @@ import NotFound from "../components/NotFound.astro";
 import PostTerms from "../components/PostTerms.astro";
 import RelatedPosts from "../components/RelatedPosts.astro";
 import Search from "../components/Search.astro";
+import { fontLinkHeader, PAIRING_PRELOADS } from "../fonts.ts";
 import { iconSet } from "../icons.ts";
 import Base from "../layouts/Base.astro";
+import { themeSettings } from "../settings.ts";
 import {
   ARCHIVE_PAGE_SIZE,
   blocks,
@@ -354,6 +357,10 @@ const localized = localizeHead(head, site, {
 });
 const meta = fallback || notFound ? { ...localized, robots: "noindex,follow" } : localized;
 Astro.response.headers.set("content-language", shownIn);
+// The pairing's fonts as a Link header too (Early Hints), not only as <link rel=preload> in <head>.
+const pairing = themeVariables(site, themeSettings).attributes["data-ch-type-pairing"];
+const preloads = PAIRING_PRELOADS[pairing ?? ""] ?? [];
+if (preloads.length) Astro.response.headers.set("link", fontLinkHeader(preloads));
 // The reader's notice (RFC-0033 §4): machine output until a person reviews it (or always, when
 // the site asks), a page shown in its original language, each with a link to the original.
 const original = alternates.find((a) => a.original && !a.current);