diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 19823cf..4d87b57 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -2,17 +2,33 @@
 <html lang="{{ metadata.language }}">
   <head>
     <meta charset="utf-8">
+    <title>{{ title or metadata.title }}</title>
+
+    <link rel="preload" href="{{ '/assets/css/base.css' | url }}" as="style">
+    {# We only bother with preloading the variable font here because chances are
+      that if a browser doesn't support variable fonts it won't support
+      preloading either:
+      https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#browser_compatibility
+    #}
+    <link rel="preload" href="{{ '/assets/fonts/Comfortaa-VariableFont_wght.ttf' | url }}" as="font">
+    {% for name in (extraStylesheets or []) %}
+      <link rel="preload" href="{{ '/assets/css/' + name + '.css' | url }}" as="style">
+    {% endfor %}
+    {% block headStart %}{% endblock %}
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-    <title>{{ title or metadata.title }}</title>
     <meta name="description" content="{{ description or metadata.description }}">
-
-    <link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
     <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
     <link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
 
-    {% block extraHead %}{% endblock %}
+    <link rel="stylesheet" href="{{ '/assets/css/base.css' | url }}">
+    {% for name in (extraStylesheets or []) %}
+      <link rel="stylesheet" href="{{ '/assets/css/' + name + '.css' | url }}">
+    {% endfor %}
+
+    {% block headEnd %}{% endblock %}
   </head>
   <body>
     <header class="site-header">
@@ -47,7 +63,9 @@
     </header>
 
     <main id="content" {% if contentClass %} class="{{ contentClass }}"{% endif %}>
-      {{ content | safe }}
+      {% block content %}
+        {{ content | safe }}
+      {% endblock %}
     </main>
 
     <footer class="page-section footer">
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
index 70c5a72..8dff2e8 100644
--- a/_includes/layouts/home.njk
+++ b/_includes/layouts/home.njk
@@ -1,7 +1,3 @@
+{% set extraStylesheets = [ "home" ].concat(extraStylesheets or []) %}
+
 {% extends "layouts/base.njk" %}
-
-{% block extraHead %}
-    <link rel="stylesheet" href="{{ '/assets/css/home.css' | url }}">
-{% endblock %}
-
-{{ content | safe }}
diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
index 5ebf648..27ce1d3 100644
--- a/_includes/layouts/page.njk
+++ b/_includes/layouts/page.njk
@@ -1,9 +1,5 @@
+{% if useForms %}
+  {% set extraStylesheets = [ "forms" ].concat(extraStylesheets or []) %}
+{% endif %}
+
 {% extends "layouts/base.njk" %}
-
-{% block extraHead %}
-  {% if useForms %}
-    <link rel="stylesheet" href="{{ '/assets/css/forms.css' | url }}">
-  {% endif %}
-{% endblock %}
-
-{{ content | safe }}
diff --git a/styles/base.scss b/styles/base.scss
index b4cf733..c5f94dd 100644
--- a/styles/base.scss
+++ b/styles/base.scss
@@ -2,5 +2,6 @@
 @use 'components/markup';
 @use 'components/site';
 @use 'components/page';
+@use 'components/banner';
 
 @include typography.root-config;
diff --git a/styles/home.scss b/styles/home.scss
index 64950e3..6e3a8e9 100644
--- a/styles/home.scss
+++ b/styles/home.scss
@@ -1,3 +1,2 @@
 @use 'components/actions';
-@use 'components/banner';
 @use 'components/tabs';
