From 10435277cddc27df92f5761122484e745768f506 Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Mon, 23 Dec 2024 12:25:26 +0800
Subject: [PATCH] Replace deferred styles with standard linking

This alone improves CLS from 0.9 down to 0.005, and overall score in lighthouse to green values

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 templates/_base.html            | 26 ++++++--------------------
 templates/index.html            |  3 +++
 templates/page-place-order.html |  2 +-
 3 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/templates/_base.html b/templates/_base.html
index adcc5a9..9fb7140 100644
--- a/templates/_base.html
+++ b/templates/_base.html
@@ -42,6 +42,11 @@
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
     <link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
 
+    <link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}" as="style">
+    <link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}" as="style">
+
+
+    {% block links %}{% endblock %}
     {% block styles %}{% endblock %}
 
   </head>
@@ -126,25 +131,6 @@
     {% endblock %}
     <!-- ./MAIN CONTENT -->
 
-    <noscript id="deferred-main-styles">
-      <link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.min.css', cachebust=true) }}">
-      <link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
-      {% block deferred_styles %}{% endblock %}
-    </noscript>
-    <script>
-      var loadDeferredMainStyles = function() {
-        var addStylesNode = document.getElementById("deferred-main-styles");
-        var replacement = document.createElement("div");
-        replacement.innerHTML = addStylesNode.textContent;
-        document.body.appendChild(replacement)
-        addStylesNode.parentElement.removeChild(addStylesNode);
-      };
-      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-      if (raf) raf(function() { window.setTimeout(loadDeferredMainStyles, 0); });
-      else window.addEventListener('load', loadDeferredMainStyles);
-    </script>
-
     <!-- FOOTER -->
 
     {% block footer %}
@@ -186,7 +172,7 @@
     <!-- <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script> -->
 
     <script src="{{ get_url(path='js/jquery-3.7.0.min.js', cachebust=true) }}"></script>
-    <script src="{{ get_url(path='js/bootstrap-5.3.0.bundle.min.js', cachebust=true) }}"></script>
+    <script src="{{ get_url(path='js/bootstrap-5.3.0.bundle.min.js', cachebust=true) }}" defer></script>
 
     <script>
 
diff --git a/templates/index.html b/templates/index.html
index 4afcd58..10a0179 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,8 @@
 {% extends '_base.html' %}
 
+{% block links %}
+<link rel="preload" href="images/hero@2x.png" as="image" >
+{% endblock %}
 
 {% block hero %}
 
diff --git a/templates/page-place-order.html b/templates/page-place-order.html
index a0ab110..63c0698 100644
--- a/templates/page-place-order.html
+++ b/templates/page-place-order.html
@@ -1,7 +1,7 @@
 {% extends 'section.html' %}
 
 
-{% block deferred_styles %}
+{% block styles %}
 {{ super() }}
 <link rel="stylesheet" href="{{ get_url(path='css/order-hardware.css', cachebust=true) }}">
 {% endblock %}