From 973be263dcd3a7732346047125ff42f924a95751 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sat, 30 Dec 2023 16:00:57 -0800
Subject: [PATCH] Defer some heavier CSS until later to help page loading
 times.

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
---
 layouts/partials/defercss.html |  2 ++
 layouts/partials/head.html     | 10 +++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)
 create mode 100644 layouts/partials/defercss.html

diff --git a/layouts/partials/defercss.html b/layouts/partials/defercss.html
new file mode 100644
index 0000000..291e2a7
--- /dev/null
+++ b/layouts/partials/defercss.html
@@ -0,0 +1,2 @@
+<link rel="preload" href="{{ .url }}" as="style" onload="this.onload=null;this.rel='stylesheet'" {{ .extra | safeHTMLAttr }}>
+<noscript><link rel="stylesheet" href="{{ .url }}"></noscript>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index e820ff5..f2f17e4 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -14,8 +14,8 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Raleway&family=Lora&display=block" media="screen">
 
     <!-- External CSS (normalize and KaTeX -->
-    <link rel="stylesheet" href="{{ .Site.Params.normalizeCssUrl }}" media="screen">
-    <link rel="stylesheet" href="{{ .Site.Params.katexCssUrl }}" crossorigin="anonymous">
+    {{ partial "defercss.html" (dict "url" .Site.Params.normalizeCssUrl "extra" "") }}
+    {{ partial "defercss.html" (dict "url" .Site.Params.katexCssUrl "extra" "crossorigin=\"anonymous\"") }}
 
     <!-- Links to other formats (RSS, TOML) -->
     {{ range .AlternativeOutputFormats -}}
@@ -29,9 +29,9 @@
     {{ $icon := resources.Get "img/favicon.png" }}
     <style>.sidenote-checkbox { display: none; }</style>
     <style>.feather { width: 1rem; height: 1rem; }</style>
-    <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">
-    <link rel="stylesheet" href="{{ $sidenotes.Permalink }}" media="screen">
-    <link rel="stylesheet" href="{{ $code.Permalink }}" media="screen">
+    <link rel="stylesheet" href="{{ $style.Permalink }}">
+    {{ partial "defercss.html" (dict "url" $sidenotes.Permalink "extra" "") }}
+    {{ partial "defercss.html" (dict "url" $code.Permalink "extra" "") }}
     <link rel="icon" type="image/png" href="{{ $icon.Permalink }}">
 
     {{ if .Site.IsServer }}