mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

perf: optimize PageSpeed Insights performance

Browse Source 
- Suppress browser source map references to fix 404/SyntaxErrors
- Reduce legacy JS polyfills via browserslist config
- Optimize LCP by refining Hero animations and image sizes
- Implement video lazy loading and reduce SVG animation complexity
- Add preconnect hints for critical origins
This commit is contained in:
Marc Mintel
2026-02-19 23:21:01 +01:00
parent 0dd47491f0
commit f0547fbf8a
7 changed files with 40 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/home/HeroIllustration.tsx
View File

@@ -154,15 +154,15 @@ export default function HeroIllustration() {
<stop offset="70%" stopColor="white" stopOpacity="0.4" />
<stop offset="100%" stopColor="white" stopOpacity="0" />
</linearGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="blur" />
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="1.5" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="2" result="blur" />
<filter id="soft-glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
@@ -215,10 +215,10 @@ export default function HeroIllustration() {
</g>
{/* ANIMATED ENERGY FLOW */}
<g filter="url(#glow)">
<g>
{POWER_LINES.map((line, i) => {
// Only animate a subset of lines to reduce main-thread work
if (i % 2 !== 0) return null;
// Only animate a small subset of lines to reduce main-thread work significantly
if (i % 5 !== 0) return null;
const from = gridToScreen(line.from.col, line.from.row);
const to = gridToScreen(line.to.col, line.to.row);
const length = Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2));