From f06a8adad888d0864cd7cd927ccf4bbef5bc33b0 Mon Sep 17 00:00:00 2001
From: Sarthak Agrawal <sarthakagrawal927@gmail.com>
Date: Sun, 6 Sep 2026 16:46:03 +0530
Subject: [PATCH] perf(web): inline CSS and lazy-load third-party scripts for
 mobile LCP
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mobile LCP p75 was 3.02s after the TTFB fixes in #19/#22/#23 — over the
2.5s CWV gate. TTFB is no longer the bottleneck (186ms); the remaining
cost is on the render path:

1. Render-blocking external CSS: a 37KB stylesheet served as an external
   file (Astro's `auto` threshold is 4KB). On slow 4G that is a full
   round trip before first paint, and the LCP element is text that cannot
   render until CSS arrives. Inlining it into a `<style>` tag via
   `build.inlineStylesheets: 'always'` eliminates the round trip — the
   HTML grows by 37KB but ships in the same response as the content it
   styles.

2. Third-party scripts competing for bandwidth: Clarity (~1KB loader),
   `sassmaker.com/project-strip.js` (23KB), and
   `sassmaker.com/ai-chat-footer.js` (48KB) were all `defer`/`async`,
   so they did not block rendering, but they initiated downloads that
   stole bandwidth from the CSS on slow 4G. Wrapping all three in a
   `requestIdleCallback` lazy loader (1.5s `setTimeout` fallback) keeps
   them off the critical path entirely. They still load and function —
   just after the page is interactive.

System fonts (Iowan Old Style, Inter) are used throughout, so there is
no web-font loading delay to address.

Refs #11

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 apps/web/astro.config.mjs       |  1 +
 apps/web/src/layouts/Base.astro | 45 ++++++++++++++++++++-------------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/apps/web/astro.config.mjs b/apps/web/astro.config.mjs
index 7a78414..202b773 100644
--- a/apps/web/astro.config.mjs
+++ b/apps/web/astro.config.mjs
@@ -7,4 +7,5 @@ export default defineConfig({
   site: 'https://podcasts.highsignal.app',
   server: { host: '127.0.0.1', port: 4321 },
   session: { driver: 'memory' },
+  build: { inlineStylesheets: 'always' },
 });
diff --git a/apps/web/src/layouts/Base.astro b/apps/web/src/layouts/Base.astro
index 0377758..9af38e3 100644
--- a/apps/web/src/layouts/Base.astro
+++ b/apps/web/src/layouts/Base.astro
@@ -218,24 +218,33 @@ const structuredData = JSON.stringify({
       </footer>
     </div>
     <script is:inline>
-      (function(c,l,a,r,i,t,y){
-        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-      })(window,document,"clarity","script","ybch0p6cta");
-      window.clarity("set", "project_id", "on-record");
+      // Lazy-load non-critical third-party scripts (Clarity, SaaS Maker widgets)
+      // after the page is interactive so they never compete for bandwidth on the
+      // critical render path. Issue #11: these total ~72KB and were pushing mobile
+      // LCP past 2.5s on slow 4G by stealing bandwidth from the render-blocking CSS.
+      (function () {
+        var idle = window.requestIdleCallback || function (cb) { return setTimeout(cb, 1500); };
+        idle(function () {
+          // Clarity
+          (function (c, l, a, r, i, t, y) {
+            c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments); };
+            t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
+            y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
+          })(window, document, "clarity", "script", "ybch0p6cta");
+          window.clarity("set", "project_id", "on-record");
+          // SaaS Maker widgets
+          var s1 = document.createElement("script");
+          s1.src = "https://sassmaker.com/project-strip.js";
+          s1.dataset.project = "on-record";
+          s1.defer = true;
+          document.body.appendChild(s1);
+          var s2 = document.createElement("script");
+          s2.src = "https://sassmaker.com/ai-chat-footer.js";
+          s2.dataset.name = "High Signal Podcasts";
+          s2.defer = true;
+          document.body.appendChild(s2);
+        });
+      })();
     </script>
-    <script
-      is:inline
-      src="https://sassmaker.com/project-strip.js"
-      data-project="on-record"
-      defer
-    ></script>
-    <script
-      is:inline
-      src="https://sassmaker.com/ai-chat-footer.js"
-      data-name="High Signal Podcasts"
-      defer
-    ></script>
   </body>
 </html>