Add Link preload header for CSS to speed up stylesheet loading

Emit a Link rel=preload header for each CSS file before rendering
HTML responses. This lets the browser start fetching the stylesheet
as soon as it receives the response headers, before parsing the HTML.

Author: pierres

internal/ui/layout/render.go

@@ -17,6 +17,10 @@ func Render(w http.ResponseWriter, r *http.Request, page Page, content templ.Com
 		page.CanonicalURL = GetBaseURL(r) + canonicalPath
 	}
 
+	for _, file := range page.Manifest.CSS {
+		w.Header().Add("Link", "<"+file+">; rel=preload; as=style")
+	}
+
 	if err := Base(page, content).Render(r.Context(), w); err != nil {
 		slog.Error("failed to render page", "error", err)
 	}

internal/ui/layout/render_test.go

@@ -0,0 +1,41 @@
+package layout
+
+import (
+	"net/http"
+	"net/http/httptest"
+	"testing"
+
+	"github.com/a-h/templ"
+)
+
+func TestRender_LinkPreloadHeader(t *testing.T) {
+	manifest := &Manifest{CSS: []string{"/assets/main-abc123.css"}}
+
+	req := httptest.NewRequest(http.MethodGet, "/", nil)
+	rr := httptest.NewRecorder()
+
+	Render(rr, req, Page{Manifest: manifest, NoIndex: true}, templ.NopComponent)
+
+	links := rr.Header().Values("Link")
+	if len(links) != 1 {
+		t.Fatalf("expected 1 Link header, got %d: %v", len(links), links)
+	}
+
+	expected := "</assets/main-abc123.css>; rel=preload; as=style"
+	if links[0] != expected {
+		t.Errorf("Link header = %q, want %q", links[0], expected)
+	}
+}
+
+func TestRender_NoLinkHeaderWithoutCSS(t *testing.T) {
+	manifest, _ := NewManifest([]byte(`{}`))
+
+	req := httptest.NewRequest(http.MethodGet, "/", nil)
+	rr := httptest.NewRecorder()
+
+	Render(rr, req, Page{Manifest: manifest, NoIndex: true}, templ.NopComponent)
+
+	if links := rr.Header().Values("Link"); len(links) != 0 {
+		t.Errorf("expected no Link headers, got %v", links)
+	}
+}