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

Performance: Portrait-Bilder exakt für Anzeigegröße optimiert

Browse Source 
- Portrait-Bilder in exakten Größen: 224px, 288px, 448px, 576px
- Mobile lädt jetzt ~5KB statt 30KB
- Supabase-Check auf 5s verzögert (außerhalb kritischer Pfad)
- Preload für exakte Portrait-Größen

🤖 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 22:14:52 +01:00
co-authored by Claude Opus 4.5
parent 4b9e457f4a
commit df053fb7a0
9 changed files with 9 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -3
View File
@@ -125,10 +125,9 @@
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
<!-- Preload wichtiger Assets --> <!-- Preload wichtiger Assets -->
<link rel="preload" href="/portrait-300.webp" as="image" type="image/webp" fetchpriority="high" media="(max-width: 640px)" /> <link rel="preload" href="/portrait-224.webp" as="image" type="image/webp" fetchpriority="high" media="(max-width: 640px)" />
<link rel="preload" href="/portrait-600.webp" as="image" type="image/webp" fetchpriority="high" media="(min-width: 641px)" /> <link rel="preload" href="/portrait-288.webp" as="image" type="image/webp" fetchpriority="high" media="(min-width: 641px)" />
<link rel="preload" href="/header-logo.svg" as="image" /> <link rel="preload" href="/header-logo.svg" as="image" />
<link rel="preload" href="/favicon.svg" as="image" />
</head> </head>
<body> <body>
<!-- Google Tag Manager (noscript) wird nach Cookie-Zustimmung eingefügt --> <!-- Google Tag Manager (noscript) wird nach Cookie-Zustimmung eingefügt -->
public/portrait-224.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

public/portrait-224.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

public/portrait-288.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

public/portrait-288.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

public/portrait-448.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

public/portrait-576.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

src/components/Layout.tsx
+3 -6
View File
@@ -87,12 +87,9 @@ const Layout = ({ children }: LayoutProps) => {
} }
}; };
// Verzögere Admin-Check bis nach dem Initial Paint // Verzögere Admin-Check deutlich (5s) um kritischen Pfad nicht zu blockieren
if ('requestIdleCallback' in window) { const timeoutId = setTimeout(checkAdmin, 5000);
requestIdleCallback(() => checkAdmin()); return () => clearTimeout(timeoutId);
} else {
setTimeout(checkAdmin, 2000);
}
}, []); }, []);
const navigationLinks = [ const navigationLinks = [
src/pages/home/components/Hero.tsx
+4 -4
View File
@@ -63,24 +63,24 @@ const Hero = () => {
{/* Main Content */} {/* Main Content */}
<div className="flex flex-col items-center justify-start min-h-screen px-4 pt-20 relative" style={{ zIndex: 30 }}> <div className="flex flex-col items-center justify-start min-h-screen px-4 pt-20 relative" style={{ zIndex: 30 }}>
{/* Profile Image - keine Animation beim Initial Load für bessere LCP */} {/* Profile Image - optimiert für exakte Anzeigegröße */}
<div <div
className="w-56 h-56 sm:w-72 sm:h-72 mb-8 rounded-full overflow-hidden border-2 border-zinc-800" className="w-56 h-56 sm:w-72 sm:h-72 mb-8 rounded-full overflow-hidden border-2 border-zinc-800"
style={{ transform: 'translateZ(0)' }} style={{ transform: 'translateZ(0)' }}
> >
<picture> <picture>
<source <source
srcSet="/portrait-300.webp 300w, /portrait-600.webp 600w" srcSet="/portrait-224.webp 224w, /portrait-448.webp 448w, /portrait-288.webp 288w, /portrait-576.webp 576w"
sizes="(max-width: 640px) 224px, 288px" sizes="(max-width: 640px) 224px, 288px"
type="image/webp" type="image/webp"
/> />
<source <source
srcSet="/portrait-300.jpg 300w, /portrait-600.jpg 600w" srcSet="/portrait-224.jpg 224w, /portrait-288.jpg 288w"
sizes="(max-width: 640px) 224px, 288px" sizes="(max-width: 640px) 224px, 288px"
type="image/jpeg" type="image/jpeg"
/> />
<img <img
src="/portrait-600.jpg" src="/portrait-288.jpg"
alt={t('pages.home.hero.image.alt')} alt={t('pages.home.hero.image.alt')}
className="w-full h-full object-cover" className="w-full h-full object-cover"
loading="eager" loading="eager"