From 09ba17a07a4efc8809ea1cf32c9c2a33ee1b94fc Mon Sep 17 00:00:00 2001
From: Mohamed Shams El-Deen <mohamedshamseldeen95@gmail.com>
Date: Tue, 21 Jul 2026 20:40:25 +0300
Subject: [PATCH] perf: fix render-blocking CSS and font display

---
 src/generators/legacy-html/template.html | 28 +++++++++++++++++++++---
 src/generators/web/template.html         | 11 +++++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/generators/legacy-html/template.html b/src/generators/legacy-html/template.html
index 0142fde1..cf17f107 100644
--- a/src/generators/legacy-html/template.html
+++ b/src/generators/legacy-html/template.html
@@ -7,10 +7,32 @@
     <meta name="nodejs.org:node-version" content="__VERSION__" />
     <title>__SECTION__ | Node.js __VERSION__ Documentation</title>
     <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=fallback"
+      rel="preload"
+      href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=swap"
+      as="style"
+      onload="
+        this.onload = null;
+        this.rel = 'stylesheet';
+      "
     />
-    <link rel="stylesheet" href="assets/style.css" />
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=swap"
+      />
+    </noscript>
+    <link
+      rel="preload"
+      href="assets/style.css"
+      as="style"
+      onload="
+        this.onload = null;
+        this.rel = 'stylesheet';
+      "
+    />
+    <noscript>
+      <link rel="stylesheet" href="assets/style.css" />
+    </noscript>
     <link rel="canonical" href="https://nodejs.org/api/__FILENAME__.html" />
     <script async defer src="assets/api.js" type="text/javascript"></script>
     <script>
diff --git a/src/generators/web/template.html b/src/generators/web/template.html
index 458543b2..4508e440 100644
--- a/src/generators/web/template.html
+++ b/src/generators/web/template.html
@@ -5,7 +5,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>${title}</title>
-  <link rel="stylesheet" href="${root}styles.css" />
+  <link rel="preload" href="${root}styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript>
+    <link rel="stylesheet" href="${root}styles.css">
+  </noscript>
   <meta property="og:title" content="${title}">
   <meta property="og:type" content="website">
 
@@ -13,8 +16,10 @@
 
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800" />
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" />
+  </noscript>
 
   <!-- Apply theme before paint to avoid Flash of Unstyled Content -->
   <script>${themeScript}</script>