From 3026972deea580adf03f660ec108b3822fd0b3ae Mon Sep 17 00:00:00 2001
From: Henrik Jess Nielsen <henrik@i80.dk>
Date: Sat, 21 Dec 2024 22:13:04 +0100
Subject: [PATCH] Lets see what lighthouse says

---
 templates/base_template.html | 40 ++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/templates/base_template.html b/templates/base_template.html
index 0ac0b92..659342a 100644
--- a/templates/base_template.html
+++ b/templates/base_template.html
@@ -21,26 +21,50 @@
 
     <!-- Kritisk CSS for at forhindre FOUC -->
     <style>
-        /* Skjul kroppen indtil CSS er klar for at forhindre FOUC */
+        /* Kritisk CSS for hurtig rendering */
         body {
             visibility: hidden;
             font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
         }
 
-        /* Initial preload-klasse */
         .is-preload #wrapper {
             opacity: 0;
             transition: opacity 0.3s ease-in;
         }
 
-        /* Kritisk CSS for vigtig styling */
-        body.loaded {
-            visibility: visible;
+        header {
+            background-color: #f8f9fa;
+            padding: 10px;
+        }
+
+        footer {
+            text-align: center;
+            margin-top: 20px;
         }
     </style>
 
-    <!-- Skrifttyper og CSS -->
-    <link rel="stylesheet" href="/static/css/main.min.css?v={{ timestamp }}">
+    <!-- Lokalt hosted Fontawesome for at eliminere render-blocking -->
+    <style>
+        @font-face {
+            font-family: 'FontAwesome';
+            src: url('/static/webfonts/fa-solid-900.woff2') format('woff2');
+            font-weight: 900;
+            font-style: normal;
+        }
+        .fa {
+            font-family: 'FontAwesome';
+            font-style: normal;
+            font-weight: 900;
+        }
+    </style>
+
+    <!-- Kritisk skrifttype preload -->
+    <link rel="preload" href="/static/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+
+    <!-- Hoved CSS -->
+    <link rel="stylesheet" href="/static/css/main.min.css?v={{ timestamp }}" media="print" onload="this.media='all'">
 
     <!-- Fallback for brugere uden JavaScript -->
     <noscript>
@@ -52,7 +76,7 @@
     // Fjern preload-klasse og vis siden, når alt er indlæst
     window.addEventListener('load', () => {
         document.body.classList.remove('is-preload');
-        document.body.classList.add('loaded');
+        document.body.style.visibility = 'visible';
     });
 </script>