From 962dd43756438779b6cc1821f3ee6b8147113646 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 25 Feb 2026 08:19:26 +0300
Subject: [PATCH] =?UTF-8?q?perf:=20improve=20LCP=20=E2=80=94=20move=20font?=
 =?UTF-8?q?=20loading=20to=20HTML,=20defer=20logo=20preload?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move Google Fonts from CSS @import (render-blocking) to <link> in
  index.html with preconnect for earlier discovery
- Remove @import from globals.css — browser no longer waits for CSS
  parse -> @import fetch -> font CSS parse before first paint
- Defer initLogoPreload() to requestIdleCallback so logo fetch
  doesn't compete with critical resources during page load
---
 index.html             | 6 ++++++
 src/main.tsx           | 8 ++++++--
 src/styles/globals.css | 2 --
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 50ae845..a81ba8b 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,12 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="format-detection" content="telephone=no" />
     <title>Loading...</title>
+    <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=Manrope:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
     <style>
       body {
diff --git a/src/main.tsx b/src/main.tsx
index 1bc3632..4a8af2e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -92,8 +92,12 @@ if (!alreadyInitialized) {
   }
 }
 
-// Preload logo from cache immediately on page load
-initLogoPreload();
+// Preload logo from cache — defer to idle time so it doesn't compete with LCP
+if ('requestIdleCallback' in window) {
+  requestIdleCallback(() => initLogoPreload());
+} else {
+  setTimeout(initLogoPreload, 100);
+}
 
 const queryClient = new QueryClient({
   defaultOptions: {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 9130d39..099e2e8 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;