Merge pull request #14974 from artsy/joeyAghion/lcpHint

chore(perf): include a high-priority image in Link response headers, if available

Author: joeyAghion

src/Server/__tests__/getWebpackEarlyHints.jest.ts renamed to src/Server/__tests__/getEarlyHints.jest.ts

@@ -1,13 +1,13 @@
 import fs from "fs"
 import path from "path"
-import { getWebpackEarlyHints } from "Server/getWebpackEarlyHints"
+import { getEarlyHints } from "Server/getEarlyHints"
 
 jest.mock("fs")
 jest.mock("Server/config", () => ({ CDN_URL: "https://cdn.example.com" }))
 
 const HINTS_PATH = path.join(process.cwd(), "dist", "early-hints.json")
 
-describe("getWebpackEarlyHints", () => {
+describe("getEarlyHints", () => {
   const mockReadFileSync = fs.readFileSync as jest.Mock
 
   afterEach(() => {
@@ -20,10 +20,20 @@ describe("getWebpackEarlyHints", () => {
 
     mockReadFileSync.mockReturnValueOnce(JSON.stringify(mockChunkFiles))
 
-    const result = getWebpackEarlyHints()
+    const result = getEarlyHints([
+      {
+        type: "link",
+        props: {
+          rel: "preload",
+          as: "image",
+          href: "https://example.com/image.jpg",
+        },
+      },
+    ])
 
     expect(fs.readFileSync).toHaveBeenCalledWith(HINTS_PATH, "utf-8")
     expect(result.linkHeaders).toEqual([
+      `<https://example.com/image.jpg>; rel=preload; as=image`,
       `<https://cdn.example.com/chunk1.js>; rel=preload; as=script`,
       `<https://cdn.example.com/chunk2.js>; rel=preload; as=script`,
     ])
@@ -32,23 +42,4 @@ describe("getWebpackEarlyHints", () => {
       `<link rel="preload" as="script" href="https://cdn.example.com/chunk2.js">`,
     ])
   })
-
-  it("should return link headers and preload tags without CDN URL in development", () => {
-    process.env.NODE_ENV = "development"
-    const mockChunkFiles = ["/chunk1.js", "/chunk2.js"]
-
-    mockReadFileSync.mockReturnValueOnce(JSON.stringify(mockChunkFiles))
-
-    const result = getWebpackEarlyHints()
-
-    expect(fs.readFileSync).toHaveBeenCalledWith(HINTS_PATH, "utf-8")
-    expect(result.linkHeaders).toEqual([
-      `</chunk1.js>; rel=preload; as=script`,
-      `</chunk2.js>; rel=preload; as=script`,
-    ])
-    expect(result.linkPreloadTags).toEqual([
-      `<link rel="preload" as="script" href="/chunk1.js">`,
-      `<link rel="preload" as="script" href="/chunk2.js">`,
-    ])
-  })
 })

src/Server/getEarlyHints.ts

@@ -0,0 +1,54 @@
+import { CDN_URL } from "Server/config"
+import path from "path"
+import fs from "fs"
+
+const HINTS_PATH = path.join(process.cwd(), "dist", "early-hints.json")
+
+const cdnUrl = (() => {
+  if (process.env.NODE_ENV === "development") {
+    return ""
+  }
+
+  return CDN_URL
+})()
+
+export const getEarlyHints = (
+  headTags: any[]
+): {
+  linkHeaders: string[]
+  linkPreloadTags: string[]
+} => {
+  const results = {
+    linkHeaders: [] as string[],
+    linkPreloadTags: [] as string[],
+  }
+
+  // Set link headers based on <link...> tags rendered into the head
+  const linkTags = headTags.filter(
+    tag =>
+      tag.type === "link" &&
+      tag.props?.rel === "preload" &&
+      tag.props?.as === "image" &&
+      !!tag.props?.href
+  )
+  for (const linkTag of linkTags) {
+    results.linkHeaders.push(
+      `<${linkTag.props?.href}>; rel=preload; as=${linkTag.props?.as}`
+    )
+  }
+
+  // Also add initial js chunks to link headers and inject preload tags
+  try {
+    const chunkFiles = JSON.parse(fs.readFileSync(HINTS_PATH, "utf-8"))
+    for (const file of chunkFiles) {
+      results.linkHeaders.push(`<${cdnUrl}${file}>; rel=preload; as=script`)
+      results.linkPreloadTags.push(
+        `<link rel="preload" as="script" href="${cdnUrl}${file}">`
+      )
+    }
+  } catch (error) {
+    console.error("[getEarlyHints] Could not load early-hints.json:", error)
+  }
+
+  return results
+}

src/Server/getWebpackEarlyHints.ts

@@ -5,13 +5,13 @@ import { loadAssetManifest } from "Server/manifest"
 import { ENABLE_SSR_STREAMING } from "Server/config"
 import { getENV } from "Utils/getENV"
 import { ServerAppResults } from "System/Router/serverRouter"
-import { getWebpackEarlyHints } from "Server/getWebpackEarlyHints"
+import { getEarlyHints } from "Server/getEarlyHints"
 import { RenderToStreamResult } from "System/Router/Utils/renderToStream"
 import { buildHtmlTemplate, HTMLProps } from "html"
 
 // TODO: Use the same variables as the asset middleware. Both config and sharify
 // have a default CDN_URL while this does not.
-const { CDN_URL, NODE_ENV, GEMINI_CLOUDFRONT_URL } = process.env
+const { CDN_URL, NODE_ENV, GEMINI_CLOUDFRONT_URL, WEBFONT_URL } = process.env
 
 const MANIFEST = loadAssetManifest("dist/manifest.json")
 
@@ -48,7 +48,7 @@ export const renderServerApp = ({
 
   const scripts = extractScriptTags?.()
 
-  const { linkPreloadTags } = getWebpackEarlyHints()
+  const { linkHeaders, linkPreloadTags } = getEarlyHints(headTags ?? [])
 
   const options: HTMLProps = {
     cdnUrl: NODE_ENV === "production" ? (CDN_URL as string) : "",
@@ -84,6 +84,8 @@ export const renderServerApp = ({
     },
   }
 
+  setLinkHeaders(linkHeaders, res)
+
   const statusCode = getENV("statusCode") ?? code
 
   const htmlShell = buildHtmlTemplate(options)
@@ -107,3 +109,18 @@ export const renderServerApp = ({
     res.status(statusCode).send(htmlShell)
   }
 }
+
+const setLinkHeaders = (linkHeaders: string[], res: ArtsyResponse) => {
+  if (!res.headersSent) {
+    res.header("Link", [
+      `<${CDN_URL}>; rel=preconnect; crossorigin`,
+      `<${GEMINI_CLOUDFRONT_URL}>; rel=preconnect;`,
+      `<${WEBFONT_URL}>; rel=preconnect; crossorigin`,
+      `<${WEBFONT_URL}/all-webfonts.css>; rel=preload; as=style`,
+      `<${WEBFONT_URL}/ll-unica77_regular.woff2>; rel=preload; as=font; crossorigin`,
+      `<${WEBFONT_URL}/ll-unica77_medium.woff2>; rel=preload; as=font; crossorigin`,
+      `<${WEBFONT_URL}/ll-unica77_italic.woff2>; rel=preload; as=font; crossorigin`,
+      ...linkHeaders,
+    ])
+  }
+}

src/Server/middleware/linkHeadersMiddleware.ts

@@ -33,7 +33,6 @@ import {
 import { morganMiddleware } from "./Server/middleware/morgan"
 import { ensureSslMiddleware } from "./Server/middleware/ensureSsl"
 import { hstsMiddleware } from "./Server/middleware/hsts"
-import { linkHeadersMiddleware } from "./Server/middleware/linkHeadersMiddleware"
 import { ipFilter } from "./Server/middleware/ipFilter"
 import { sessionMiddleware } from "./Server/middleware/session"
 import { assetMiddleware } from "./Server/middleware/assetMiddleware"
@@ -175,9 +174,6 @@ export function initializeMiddleware(app) {
   registerFeatureFlagService(UnleashService, UnleashFeatureFlagService)
   app.use(featureFlagMiddleware(UnleashService))
 
-  // Preconnect or preload associated links
-  app.use(linkHeadersMiddleware)
-
   /**
    * Routes for pinging system time and up
    */