Phili/philippurbschat.de
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf: gzip compression, browser caching, font preloading, and eliminate css import waterfall

Browse source
This commit is contained in:
Philipp Urbschat 2026-09-12 22:19:15 +02:00
parent cde87db064
commit 1aaf656612
Signed by: Phili
SSH key fingerprint: SHA256:ZSQWnldzrYiABzOV6vTICPe0h19pTpus7sCbm2S0po0
4 changed files with 82 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
.htaccess
View file

@ -9,6 +9,72 @@ RewriteEngine On
Header always set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>
# MIME-Types für moderne Web-Assets
<IfModule mod_mime.c>
AddType font/woff2 .woff2
AddType font/woff .woff
AddType image/webp .webp
AddType image/svg+xml .svg .svgz
</IfModule>
# Performance: Gzip-Kompression (mod_deflate)
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
</IfModule>
# Performance: Browser-Caching (mod_expires & mod_headers)
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
# Webfonts (1 Jahr)
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType application/font-woff2 "access plus 1 year"
# Bilder & Icons (1 Monat bis 1 Jahr)
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
# CSS & JavaScript (1 Woche)
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
# HTML & dynamische Daten nicht aggressiv cachen
ExpiresByType text/html "access plus 0 seconds"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|webp|svg|woff2?|ttf|otf)$">
Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
<FilesMatch "\.(css|js)$">
Header set Cache-Control "public, max-age=604800, stale-while-revalidate=86400"
</FilesMatch>
</IfModule>
# Interne PHP-, Vendor- und Template-Verzeichnisse vor direktem Webzugriff sperren
RewriteRule ^(home|philcore)/(app|core|views|src)/ - [F,L]
RewriteRule ^(.*/)?vendor/ - [F,L]

21
home/public/css/style.css
View file

@ -1,4 +1,3 @@
@import "app.css";
:root {
--bg-base: #020617;
}
@ -43,27 +42,30 @@ body {
background: #f43f5e;
color: white;
}
/* Animations */
/* Animations (GPU Accelerated) */
@keyframes blob-bounce {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(30px, -50px, 0) scale(1.1); }
66% { transform: translate3d(-20px, 20px, 0) scale(0.9); }
}
@keyframes particle-drift {
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
50% { opacity: 0.5; }
100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
100% { transform: translate3d(0, -100vh, 0) rotate(360deg); opacity: 0; }
}
@keyframes invader-patrol {
0%, 100% { transform: translateX(-12px); }
50% { transform: translateX(12px); }
0%, 100% { transform: translate3d(-12px, 0, 0); }
50% { transform: translate3d(12px, 0, 0); }
}
.animate-blob {
animation: blob-bounce 25s infinite alternate ease-in-out;
filter: blur(80px);
will-change: transform;
backface-visibility: hidden;
}
.animate-invader {
animation: invader-patrol 4s infinite ease-in-out;
will-change: transform;
}
.particle {
position: fixed;
@ -73,6 +75,7 @@ body {
z-index: 1;
animation: particle-drift var(--p-duration) infinite linear;
animation-delay: var(--p-delay);
will-change: transform, opacity;
}
/* UI Components */
.bullshit-terminal {

2
home/views/home.php
View file

@ -96,5 +96,5 @@
</div>
</div>
</div>
<script src="/js/main.js"></script>
<script src="/js/main.js" defer></script>
<?php require_once __DIR__ . '/inc/footer.php'; ?>

3
home/views/inc/header.php
View file

@ -22,6 +22,9 @@ $_SESSION['particles_initialized'] = true;
<meta property="og:title" content="<?= htmlspecialchars($pageTitle) ?>">
<meta property="og:description" content="Developer, Designer, Punkrocker, Problem Solver.">
<link rel="canonical" href="<?= htmlspecialchars($canonicalUrl) ?>">
<link rel="preload" href="/fonts/outfit-v15-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/jetbrains-mono-v24-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/css/app.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">