refactor: head.html, style.html: Implement CSS preloading

neural-loop · neural-loop · commit 3fdd2be65971 · 2025-07-21T19:04:22.000-05:00
The main CSS is now preloaded in `&lt;head&gt;` for faster rendering.
The style.html partial now uses the preloaded CSS from `.Scratch`.
diff --git a/layouts/partials/essentials/head.html b/layouts/partials/essentials/head.html
@@ -71,6 +71,34 @@
   {{ end }}
 {{ end }}
 
+{{- /* --- Asset Preloading to optimize Critical Rendering Path --- */ -}}
+{{- /* 1. Generate main CSS resource and store it in Scratch */ -}}
+{{- $styles := slice -}}
+{{- range site.Params.plugins.css -}}
+  {{- if not (findRE `^http` .link) -}}
+    {{- $styles = $styles | append (resources.Get .link) -}}
+  {{- end -}}
+{{- end -}}
+{{- $styles = $styles | append (resources.Get "scss/main.scss" | toCSS) -}}
+{{- $styles = $styles | resources.Concat "css/style.css" -}}
+{{- $styles = $styles | css.PostCSS -}}
+{{- if hugo.IsProduction -}}
+  {{- $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . | minify | fingerprint | resources.PostProcess -}}
+{{- else -}}
+  {{- $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . -}}
+{{- end -}}
+{{- .Scratch.Set "main_css" $styles -}}
+
+{{- /* 2. Preload the main CSS file */ -}}
+<link rel="preload" href="{{ $styles.RelPermalink }}" as="style" />
+
+{{/* 3. Preload critical fonts to break the request chain */}}
+{{ range site.Data.fonts.files }}
+  {{ with resources.Get . }}
+    <link rel="preload" href="{{ .RelPermalink }}" as="font" type="font/woff2" crossorigin>
+  {{ end }}
+{{ end }}
+
 <!-- opengraph and twitter card -->
 {{ partial "components/base-seo.html" . }}
 
diff --git a/layouts/partials/essentials/style.html b/layouts/partials/essentials/style.html
@@ -1,27 +1,27 @@
 {{- /* layouts/partials/essentials/style.html */ -}}
-<!-- plugins + stylesheet -->
-{{ $styles := slice }}
-{{ range site.Params.plugins.css }}
-{{ if findRE "^http" .link }}
-<link
-  crossorigin="anonymous"
-  media="all"
-  rel="stylesheet"
-  href="{{ .link | relURL }}"
-  {{ .attributes | safeHTMLAttr }} />
-{{ else }}
-{{ $styles = $styles | append (resources.Get .link) }}
-{{ end }}
-{{ end }}
-{{ $styles := $styles | append (resources.Get "scss/main.scss" | toCSS) }}
-{{ $styles := $styles | resources.Concat "css/style.css" }}
-{{ $styles = $styles | css.PostCSS }}
-{{ if hugo.IsProduction }}
-{{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . | minify | fingerprint | resources.PostProcess }}
-{{ else }}
-{{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . }}
-{{ end }}
-<link
-  href="{{ $styles.RelPermalink }}"
-  integrity="{{ $styles.Data.Integrity }}"
-  rel="stylesheet" />
+{{- /*
+  This partial now links to the CSS that was pre-processed and preloaded in head.html.
+  It also handles any external CSS files.
+*/ -}}
+
+{{- /* Link to external stylesheets first */ -}}
+{{- range site.Params.plugins.css -}}
+  {{- if findRE `^http` .link -}}
+    <link
+      crossorigin="anonymous"
+      media="all"
+      rel="stylesheet"
+      href="{{ .link | relURL }}"
+      {{ .attributes | safeHTMLAttr }} />
+  {{- end -}}
+{{- end -}}
+
+{{- /* Link to the main stylesheet generated in head.html */ -}}
+{{- with .Scratch.Get "main_css" -}}
+  <link
+    href="{{ .RelPermalink }}"
+    integrity="{{ .Data.Integrity }}"
+    rel="stylesheet" />
+{{- else -}}
+  {{- warnf "The 'main_css' resource was not found in .Scratch. The stylesheet might be missing. This can happen if head.html is not called before style.html in baseof.html." -}}
+{{- end -}}
