schmidt1024/kashilo
1
0
Fork 0
Code Issues Pull Requests Releases Activity

perf: lighthouse optimizations - inline critical CSS, lazy-load routes, WebP images, fix CLS and contrast

Browse Source
This commit is contained in:
Schmidt
2026-02-08 11:22:36 +01:00
parent 013d591e75
commit c66c80adcc
23 changed files with 448 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
index.html
View File

@@ -33,19 +33,152 @@
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<!-- Preload Logo Font -->
<!-- Preload critical fonts -->
<link rel="preload" href="assets/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/SpaceGrotesk-Bold.woff2" as="font" type="font/woff2" crossorigin>
<!-- Modulepreload critical chain -->
<link rel="modulepreload" href="js/app.js">
<link rel="modulepreload" href="js/i18n.js">
<link rel="modulepreload" href="js/router.js">
<link rel="modulepreload" href="js/services/auth.js">
<link rel="modulepreload" href="js/services/directus.js">
<link rel="modulepreload" href="js/components/app-shell.js">
<link rel="modulepreload" href="js/components/app-header.js">
<link rel="modulepreload" href="js/components/app-footer.js">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/animate.min.css">
<!-- Critical CSS inlined (fonts + variables + base) -->
<style>
/* fonts.css */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional; src: url('assets/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: optional; src: url('assets/fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional; src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional; src: url('assets/fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2'); }
/* variables.css */
:root {
--color-primary: #555555; --color-primary-hover: #404040; --color-primary-light: #E8E8E8;
--color-secondary: #777777; --color-secondary-hover: #5A5A5A;
--color-accent: #047857; --color-accent-hover: #065f46; --color-accent-text: #fff;
--color-success: #666666; --color-warning: #888888; --color-error: #444444;
--color-bg: #FAFAFA; --color-bg-secondary: #F0F0F0; --color-bg-tertiary: #E5E5E5;
--color-text: #1A1A1A; --color-text-secondary: #4A4A4A; --color-text-muted: #737373;
--color-border: #D0D0D0; --color-border-focus: #555555;
--color-shadow: rgba(0, 0, 0, 0.1); --color-overlay: rgba(0, 0, 0, 0.5);
--space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem;
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-family-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem;
--font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
--line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75;
--radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px;
--shadow-sm: 0 1px 2px var(--color-shadow); --shadow-md: 0 4px 6px var(--color-shadow); --shadow-lg: 0 10px 15px var(--color-shadow); --shadow-xl: 0 20px 25px var(--color-shadow);
--transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease;
--header-height: 4rem; --footer-height: 3rem; --container-max: 1200px; --sidebar-width: 280px;
--z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-primary: #AAAAAA; --color-primary-hover: #C0C0C0; --color-primary-light: #2A2A2A;
--color-secondary: #909090; --color-secondary-hover: #A5A5A5;
--color-accent: #10B981; --color-accent-hover: #34D399; --color-accent-text: #052e16;
--color-success: #999999; --color-warning: #AAAAAA; --color-error: #888888;
--color-bg: #141414; --color-bg-secondary: #1E1E1E; --color-bg-tertiary: #2A2A2A;
--color-text: #F0F0F0; --color-text-secondary: #C0C0C0; --color-text-muted: #949494;
--color-border: #3A3A3A; --color-border-focus: #AAAAAA;
--color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
}
}
[data-theme="dark"] {
--color-primary: #AAAAAA; --color-primary-hover: #C0C0C0; --color-primary-light: #2A2A2A;
--color-secondary: #909090; --color-secondary-hover: #A5A5A5;
--color-accent: #10B981; --color-accent-hover: #34D399; --color-accent-text: #052e16;
--color-success: #999999; --color-warning: #AAAAAA; --color-error: #888888;
--color-bg: #141414; --color-bg-secondary: #1E1E1E; --color-bg-tertiary: #2A2A2A;
--color-text: #F0F0F0; --color-text-secondary: #C0C0C0; --color-text-muted: #949494;
--color-border: #3A3A3A; --color-border-focus: #AAAAAA;
--color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7);
}
[data-theme="light"] {
--color-primary: #555555; --color-primary-hover: #404040; --color-primary-light: #E8E8E8;
--color-secondary: #777777; --color-secondary-hover: #5A5A5A;
--color-accent: #059669; --color-accent-hover: #047857;
--color-success: #666666; --color-warning: #888888; --color-error: #444444;
--color-bg: #FAFAFA; --color-bg-secondary: #F0F0F0; --color-bg-tertiary: #E5E5E5;
--color-text: #1A1A1A; --color-text-secondary: #4A4A4A; --color-text-muted: #737373;
--color-border: #D0D0D0; --color-border-focus: #555555;
--color-shadow: rgba(0, 0, 0, 0.1); --color-overlay: rgba(0, 0, 0, 0.5);
}
/* base.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-bg); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-hover); }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset !important; -webkit-text-fill-color: var(--color-text) !important; box-shadow: 0 0 0 1000px var(--color-bg) inset !important; transition: background-color 5000s ease-in-out 0s; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: -0.02em; }
h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); }
p + p { margin-top: var(--space-md); }
:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
::selection { background-color: var(--color-primary); color: white; }
.emoji-icon, .upload-icon, .empty-state-icon, [class*="encrypted"], .listing-location { filter: grayscale(1); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); }
@media (min-width: 768px) { .container { padding: 0 var(--space-lg); } }
app-shell { display: flex; flex-direction: column; min-height: 100vh; }
app-shell main { flex: 1; padding: var(--space-lg) 0; }
app-header { display: block; min-height: var(--header-height); }
app-header .logo-img { height: 28px; width: 100px; display: block; }
app-header .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) app-header .logo-light { display: none; } html:not([data-theme="light"]) app-header .logo-dark { display: block; } }
[data-theme="dark"] app-header .logo-light { display: none; }
[data-theme="dark"] app-header .logo-dark { display: block; }
app-footer { display: block; padding: var(--space-lg) 0; margin-top: auto; contain: layout style; }
app-footer .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); }
app-footer .footer-links { display: flex; gap: var(--space-md); }
</style>
<!-- Non-critical CSS deferred -->
<link rel="stylesheet" href="css/components.css" media="print" onload="this.media='all'">
<link rel="stylesheet" href="css/animate.custom.css" media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/animate.custom.css">
</noscript>
<script type="module" src="js/app.js"></script>
</head>
<body>
<div id="app"></div>
<div id="app">
<app-shell>
<app-header></app-header>
<main class="container" id="router-outlet"></main>
<app-footer>
<div class="footer-inner container">
<p class="footer-copyright">
&copy; 2026 dgray.io - <span data-i18n="footer.rights">Alle Rechte vorbehalten.</span>
<span class="footer-swiss">🇨🇭 Made in Switzerland</span>
</p>
<span class="xmr-rate" title="CoinGecko">1 XMR ≈ ...</span>
<nav class="footer-links">
<a href="#/about" data-i18n="footer.about">Über uns</a>
<a href="#/privacy" data-i18n="footer.privacy">Datenschutz</a>
<a href="#/terms" data-i18n="footer.terms">AGB</a>
<a href="#/contact" data-i18n="footer.contact">Kontakt</a>
</nav>
</div>
</app-footer>
<div id="auth-modal-slot"></div>
</app-shell>
</div>
<noscript>
<p>Diese App benötigt JavaScript.</p>