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 }}