damjan_savic/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Performance: HTML-Skeleton für sofortige LCP hinzugefügt

Browse Source 
- Portrait-Bild wird sofort in HTML gerendert (kein JS-Warten)
- Skeleton wird ausgeblendet wenn React mounted
- Unnötige preconnects entfernt

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
damjan_savic
2026-01-05 23:09:44 +01:00
co-authored by Claude Opus 4.5
parent 090d640e9a
commit 8f500bdc6b
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+15 -7
View File
@@ -33,12 +33,8 @@
<title>Damjan Savić | Fullstack-, IoT- & KI-Entwickler</title> <title>Damjan Savić | Fullstack-, IoT- & KI-Entwickler</title>
<!-- Performance Optimizations --> <!-- Performance Optimizations - nur notwendige preconnects -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com"> <link rel="dns-prefetch" href="https://www.googletagmanager.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://www.googletagmanager.com">
<!-- Open Graph Meta Tags --> <!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@@ -132,7 +128,19 @@
</head> </head>
<body> <body>
<!-- Google Tag Manager (noscript) wird nach Cookie-Zustimmung eingefügt --> <!-- Google Tag Manager (noscript) wird nach Cookie-Zustimmung eingefügt -->
<div id="root"></div> <div id="root">
<!-- Critical Hero Skeleton für sofortige LCP -->
<div id="hero-skeleton" style="min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:5rem;background:#18181B;color:white;">
<picture>
<source srcset="/portrait-224.webp 224w, /portrait-448.webp 448w" sizes="(max-width:640px) 224px, 288px" type="image/webp" media="(max-width:640px)">
<source srcset="/portrait-288.webp 288w, /portrait-576.webp 576w" sizes="288px" type="image/webp">
<img src="/portrait-288.webp" alt="Damjan Savić" width="288" height="288" fetchpriority="high" decoding="sync" style="width:14rem;height:14rem;border-radius:9999px;border:2px solid #27272a;object-fit:cover;">
</picture>
<p style="color:#a1a1aa;font-size:0.875rem;letter-spacing:0.1em;margin-top:2rem;">SENIOR FULLSTACK ENTWICKLER</p>
<h1 style="font-size:2.25rem;font-weight:bold;margin-top:0.5rem;">Damjan Savić<span style="animation:pulse 2s infinite;margin-left:4px;">|</span></h1>
</div>
<style>#hero-skeleton{transition:opacity 0.2s}body.app-mounted #hero-skeleton{display:none!important}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0}}</style>
</div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>