From 930dc658742c3a5b76a48f380e159ee095fd222d Mon Sep 17 00:00:00 2001
From: kinou-p <alexpomms@gmail.com>
Date: Thu, 2 Oct 2025 18:36:32 +0200
Subject: [PATCH] more opti

---
 index.html     | 38 ++++++++++++++++++++++++++++++++++++--
 nginx.conf     |  9 ++++++---
 vite.config.ts | 25 ++++++++++++++++++++++++-
 3 files changed, 66 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 932ebc2..f88eedc 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,11 @@
     <meta name="twitter:site" content="@lovable_dev" />
     <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
 
-    <!-- Google Fonts - Optimisé avec display=swap -->
+    <!-- Preload des ressources critiques pour optimiser le chemin critique -->
+    <!-- Preload du CSS principal (inline dans le HTML généré par Vite) -->
+    <link rel="modulepreload" href="/src/main.tsx">
+    
+    <!-- Google Fonts - Optimisé avec display=swap et chargement asynchrone -->
     <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
     <noscript>
@@ -35,6 +39,33 @@
 
     <!-- Google Tag Manager sera chargé dynamiquement après consentement pour optimiser LCP/FCP -->
     <!-- Voir src/utils/gtm.ts et src/main.tsx pour l'implémentation -->
+    
+    <!-- Optimisation du rendu initial -->
+    <style>
+      /* Critical CSS pour éviter le FOUC (Flash of Unstyled Content) */
+      #root {
+        min-height: 100vh;
+        background: hsl(222.2 84% 4.9%); /* Couleur de fond dark par défaut */
+      }
+      
+      /* Spinner de chargement inline pour un feedback immédiat */
+      .initial-loader {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 48px;
+        height: 48px;
+        border: 3px solid rgba(139, 92, 246, 0.2);
+        border-top-color: rgb(139, 92, 246);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+      
+      @keyframes spin {
+        to { transform: translate(-50%, -50%) rotate(360deg); }
+      }
+    </style>
   </head>
 
   <body>
@@ -42,7 +73,10 @@
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5V6TCG4C"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     
-    <div id="root"></div>
+    <div id="root">
+      <!-- Loader initial visible immédiatement -->
+      <div class="initial-loader"></div>
+    </div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/nginx.conf b/nginx.conf
index 89e8ccd..d429619 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -89,9 +89,12 @@ server {
         add_header Pragma "no-cache" always;
         add_header Expires "0" always;
         
-        # Ajout de Link headers pour preconnect
-        add_header Link "<https://fonts.googleapis.com>; rel=preconnect" always;
-        add_header Link "<https://fonts.gstatic.com>; rel=preconnect; crossorigin" always;
+        # Ajout de Link headers pour preconnect et dns-prefetch
+        add_header Link "<https://fonts.googleapis.com>; rel=dns-prefetch, <https://fonts.googleapis.com>; rel=preconnect" always;
+        add_header Link "<https://fonts.gstatic.com>; rel=dns-prefetch, <https://fonts.gstatic.com>; rel=preconnect; crossorigin" always;
+        
+        # Early hints (HTTP 103) si supporté par le serveur
+        # Cela permet d'envoyer les hints avant même le HTML
     }
 
     # Disable cache for service worker if you add one later
diff --git a/vite.config.ts b/vite.config.ts
index cbc950c..668fece 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,21 @@ import react from "@vitejs/plugin-react-swc";
 import path from "path";
 import { componentTagger } from "lovable-tagger";
 
+// Plugin personnalisé pour optimiser le HTML
+const htmlOptimizationPlugin = () => ({
+  name: 'html-optimization',
+  transformIndexHtml(html: string) {
+    // Ajouter des hints de ressources critiques
+    return html.replace(
+      '</head>',
+      `  <!-- Resource Hints pour optimiser le chargement -->
+  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+</head>`
+    );
+  },
+});
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
   server: {
@@ -16,7 +31,11 @@ export default defineConfig(({ mode }) => ({
       "0.0.0.0"
     ]
   },
-  plugins: [react(), mode === "development" && componentTagger()].filter(Boolean),
+  plugins: [
+    react(), 
+    mode === "development" && componentTagger(),
+    mode === "production" && htmlOptimizationPlugin(),
+  ].filter(Boolean),
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
@@ -93,5 +112,9 @@ export default defineConfig(({ mode }) => ({
     cssCodeSplit: true,
     // Minification supplémentaire
     reportCompressedSize: true,
+    // Optimiser le HTML généré
+    modulePreload: {
+      polyfill: false, // Pas de polyfill pour modulepreload (navigateurs modernes)
+    },
   },
 }));
