Kinou/portfolio-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more opti

Browse Source
This commit is contained in:
kinou-p 2025-10-02 18:36:32 +02:00
parent 473d242b0d
commit 930dc65874
3 changed files with 66 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -26,7 +26,11 @@
<meta name="twitter:site" content="@lovable_dev" /> <meta name="twitter:site" content="@lovable_dev" />
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" /> <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 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'"> <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> <noscript>
@ -35,6 +39,33 @@
<!-- Google Tag Manager sera chargé dynamiquement après consentement pour optimiser LCP/FCP --> <!-- 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 --> <!-- 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> </head>
<body> <body>
@ -42,7 +73,10 @@
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5V6TCG4C" <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5V6TCG4C"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 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> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

9
nginx.conf
View File

@ -89,9 +89,12 @@ server {
add_header Pragma "no-cache" always; add_header Pragma "no-cache" always;
add_header Expires "0" always; add_header Expires "0" always;
# Ajout de Link headers pour preconnect # Ajout de Link headers pour preconnect et dns-prefetch
add_header Link "<https://fonts.googleapis.com>; rel=preconnect" always; 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=preconnect; crossorigin" 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 # Disable cache for service worker if you add one later

25
vite.config.ts
View File

@ -3,6 +3,21 @@ import react from "@vitejs/plugin-react-swc";
import path from "path"; import path from "path";
import { componentTagger } from "lovable-tagger"; 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/ // https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({ export default defineConfig(({ mode }) => ({
server: { server: {
@ -16,7 +31,11 @@ export default defineConfig(({ mode }) => ({
"0.0.0.0" "0.0.0.0"
] ]
}, },
plugins: [react(), mode === "development" && componentTagger()].filter(Boolean), plugins: [
react(),
mode === "development" && componentTagger(),
mode === "production" && htmlOptimizationPlugin(),
].filter(Boolean),
resolve: { resolve: {
alias: { alias: {
"@": path.resolve(__dirname, "./src"), "@": path.resolve(__dirname, "./src"),
@ -93,5 +112,9 @@ export default defineConfig(({ mode }) => ({
cssCodeSplit: true, cssCodeSplit: true,
// Minification supplémentaire // Minification supplémentaire
reportCompressedSize: true, reportCompressedSize: true,
// Optimiser le HTML généré
modulePreload: {
polyfill: false, // Pas de polyfill pour modulepreload (navigateurs modernes)
},
}, },
})); }));