From 9e56495871aa7ecb6a2878028da63869628bd513 Mon Sep 17 00:00:00 2001
From: Alexander Alemayhu <alexander@alemayhu.com>
Date: Tue, 19 May 2026 19:45:12 +0200
Subject: [PATCH] perf: faster mobile LCP on the landing page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four narrow fixes targeting the PageSpeed mobile-field LCP failure (3.2 s):

- Drop the orphaned /bulma-switch.css <link>. The file does not exist in
  web/public/ and is unreferenced in source — but the browser still blocked
  paint waiting for the 404. Single biggest render-blocking win.
- Make the Google Fonts stylesheet non-blocking via the standard
  preload + onload swap, with a <noscript> fallback. font-display: swap is
  already set so the fallback font shows immediately.
- Defer Hotjar and Google Analytics inline IIFEs until the load event.
  Both attached an async <script> during head parse — that contributed to
  the long main-thread tasks Lighthouse flagged.
- Add explicit width/height + fetchpriority="high" to the navbar logo
  (the LCP candidate on /). Width differs per theme because the two
  source PNGs have very different aspect ratios — a follow-up should
  give the dark theme a properly sized navbar logo.

Server side: serve /assets/* (hashed Vite output, content-addressed) with
Cache-Control: max-age=1y, immutable. Repeat visits stop re-validating
every chunk.

Changelog entry added (user-visible — first paint is faster on mobile).

Verified: server tsc, web tsc, web build (5.7s), Biome lint, 774 tests.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/server.ts                                 |  8 +++
 web/index.html                                | 59 ++++++++++---------
 .../NavigationBar/NavigationBar.tsx           | 12 +++-
 web/src/pages/WhatsNewPage/changelog.ts       |  1 +
 4 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/src/server.ts b/src/server.ts
index 15528c3cc..0db53d4db 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -112,6 +112,14 @@ const serve = async () => {
   attachAnkifySessionProxy(app, server, ankifySessionValidate);
 
   app.use('/templates', express.static(templateDir));
+  // Hashed Vite output under /assets/* is content-addressed and immutable.
+  app.use(
+    '/assets',
+    express.static(`${BUILD_DIR}/assets`, {
+      immutable: true,
+      maxAge: '1y',
+    })
+  );
   app.use(express.static(BUILD_DIR));
 
   // API Documentation
diff --git a/web/index.html b/web/index.html
index e2dfd02e3..297f1b8c9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -103,20 +103,22 @@
     }
   }
   </script>
-  <!-- Hotjar Tracking Code for https://2anki.net -->
+  <!-- Hotjar Tracking Code for https://2anki.net (deferred until after load) -->
   <script>
-    (function(h,o,t,j,a,r) {
-      h.hj=h.hj||function() {
-        const hjQueue=h.hj.q=h.hj.q||[];
-        hjQueue.push(arguments);
-      };
-      h._hjSettings={hjid: 2603407,hjsv: 6};
-      var headElement=o.getElementsByTagName('head')[0];
-      var scriptElement=o.createElement('script');
-      scriptElement.async=1;
-      scriptElement.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
-      headElement.appendChild(scriptElement);
-    })(globalThis,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+    globalThis.addEventListener('load', function () {
+      (function (h, o, t, j) {
+        h.hj = h.hj || function () {
+          const hjQueue = h.hj.q = h.hj.q || [];
+          hjQueue.push(arguments);
+        };
+        h._hjSettings = { hjid: 2603407, hjsv: 6 };
+        var headElement = o.getElementsByTagName('head')[0];
+        var scriptElement = o.createElement('script');
+        scriptElement.async = 1;
+        scriptElement.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+        headElement.appendChild(scriptElement);
+      })(globalThis, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+    });
   </script>
 
   <!-- Legacy redirect (early + preserve URL) -->
@@ -135,30 +137,33 @@
   </script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/bulma-switch.css">
+  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+    onload="this.onload=null;this.rel='stylesheet'">
+  <noscript>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
+  </noscript>
 
-  <!-- Global site tag (gtag.js) - Google Analytics -->
-  <!-- Note: SRI not used for gtag.js as Google frequently updates this script, 
+  <!-- Global site tag (gtag.js) - Google Analytics (deferred until after load) -->
+  <!-- Note: SRI not used for gtag.js as Google frequently updates this script,
        which would break the integrity hash. Using secure loading with error handling instead. -->
   <script>
-    (function() {
-      globalThis.dataLayer=globalThis.dataLayer||[];
+    globalThis.addEventListener('load', function () {
+      globalThis.dataLayer = globalThis.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
       }
-      const script=document.createElement('script');
-      script.async=true;
-      script.src='https://www.googletagmanager.com/gtag/js?id=G-X6K69TY3EX';
-      script.onerror=function() {
+      const script = document.createElement('script');
+      script.async = true;
+      script.src = 'https://www.googletagmanager.com/gtag/js?id=G-X6K69TY3EX';
+      script.onerror = function () {
         console.warn('Failed to load Google Analytics');
       };
-      script.onload=function() {
-        gtag('js',new Date());
-        gtag('config','G-X6K69TY3EX',{anonymize_ip: true});
+      script.onload = function () {
+        gtag('js', new Date());
+        gtag('config', 'G-X6K69TY3EX', { anonymize_ip: true });
       };
       document.head.appendChild(script);
-    })();
+    });
   </script>
 </head>
 
diff --git a/web/src/components/NavigationBar/NavigationBar.tsx b/web/src/components/NavigationBar/NavigationBar.tsx
index 30d592e67..1eb72f7b5 100644
--- a/web/src/components/NavigationBar/NavigationBar.tsx
+++ b/web/src/components/NavigationBar/NavigationBar.tsx
@@ -12,7 +12,9 @@ function NavigationBar({ isLoggedIn }: Readonly<NavigationBarProps>) {
   const [active, setActive] = useState(false);
   const path = globalThis.location.pathname;
   const theme = useTheme();
-  const logoSrc = theme === 'light' ? '/mascot/navbar-logo.png' : '/mascot/Notion 1.png';
+  const isLight = theme === 'light';
+  const logoSrc = isLight ? '/mascot/navbar-logo.png' : '/mascot/Notion 1.png';
+  const logoWidth = isLight ? 103 : 33;
 
   const isResolved = isLoggedIn !== undefined;
 
@@ -20,7 +22,13 @@ function NavigationBar({ isLoggedIn }: Readonly<NavigationBarProps>) {
     <nav className={styles.navbar} aria-label="main navigation">
       <div className={styles.brand}>
         <a className={styles.logoLink} href="/">
-          <img src={logoSrc} alt="2anki Logo" />
+          <img
+            src={logoSrc}
+            alt="2anki Logo"
+            width={logoWidth}
+            height={28}
+            fetchPriority="high"
+          />
         </a>
         <button
           type="button"
diff --git a/web/src/pages/WhatsNewPage/changelog.ts b/web/src/pages/WhatsNewPage/changelog.ts
index e5f27c3d0..fe1cb06b4 100644
--- a/web/src/pages/WhatsNewPage/changelog.ts
+++ b/web/src/pages/WhatsNewPage/changelog.ts
@@ -5,6 +5,7 @@ export interface ChangelogEntry {
 }
 
 export const changelog: ChangelogEntry[] = [
+  { type: 'fix', title: 'The landing page paints faster on phones over slow connections', date: '2026-05-19' },
   { type: 'style', title: 'What\'s new page redesigned as a board — backlog, in progress, and shipped', date: '2026-05-19' },
   { type: 'feature', title: 'First upload — clearer no-cards message, one button to create an account and start a trial, and a quick first-visit tour', date: '2026-05-19' },
   { type: 'feature', title: 'Notion tables convert to flashcards — one row per card, column 1 on the front, column 2 on the back', date: '2026-05-19' },