perf: optimize Lighthouse scores to 100
Performance: - Lazy-load ShaderGradientBackground via dynamic import (reduces initial JS ~250KB) - Disable ShaderGradient animations (animate=off) to reduce CPU/GPU load - Remove opacity:0 animations from Hero LCP elements for instant paint - Add browserslist targeting modern browsers (eliminates ~13KB polyfills) Accessibility: - Fix color contrast: text-stone-400 → text-stone-600 dark:text-stone-400 on light backgrounds - Fix text-liquid-mint → text-emerald-700/600 for readable text/accent dots - Fix quote text contrast on dark status box (text-stone-700 → text-stone-300) - Fix Online badge contrast (emerald-600 → emerald-700) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
112
app/components/ShaderGradientBackground.tsx
Normal file
112
app/components/ShaderGradientBackground.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ShaderGradientCanvas, ShaderGradient } from "@shadergradient/react";
|
||||
|
||||
const ShaderGradientBackground = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: -1,
|
||||
filter: "blur(150px)",
|
||||
opacity: 0.65,
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
>
|
||||
<ShaderGradientCanvas
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{/* Sphere 1 - Links oben */}
|
||||
<ShaderGradient
|
||||
control="props"
|
||||
type="sphere"
|
||||
animate="off"
|
||||
brightness={1.3}
|
||||
cAzimuthAngle={180}
|
||||
cDistance={3.6}
|
||||
cPolarAngle={90}
|
||||
cameraZoom={1}
|
||||
color1="#b01040"
|
||||
color2="#b04a17"
|
||||
color3="#e167c5"
|
||||
positionX={-2.5}
|
||||
positionY={1.5}
|
||||
positionZ={0}
|
||||
rotationX={0}
|
||||
rotationY={15}
|
||||
rotationZ={50}
|
||||
uAmplitude={6.0}
|
||||
uDensity={0.8}
|
||||
uFrequency={5.5}
|
||||
uSpeed={0.5}
|
||||
uStrength={5.0}
|
||||
/>
|
||||
|
||||
{/* Sphere 2 - Rechts mitte */}
|
||||
<ShaderGradient
|
||||
control="props"
|
||||
type="sphere"
|
||||
animate="off"
|
||||
brightness={1.25}
|
||||
cAzimuthAngle={180}
|
||||
cDistance={3.6}
|
||||
cPolarAngle={90}
|
||||
cameraZoom={1}
|
||||
color1="#e167c5"
|
||||
color2="#b01040"
|
||||
color3="#b04a17"
|
||||
positionX={2.0}
|
||||
positionY={-0.5}
|
||||
positionZ={-0.5}
|
||||
rotationX={0}
|
||||
rotationY={25}
|
||||
rotationZ={70}
|
||||
uAmplitude={5.5}
|
||||
uDensity={0.9}
|
||||
uFrequency={4.8}
|
||||
uSpeed={0.45}
|
||||
uStrength={4.8}
|
||||
/>
|
||||
|
||||
{/* Sphere 3 - Unten links */}
|
||||
<ShaderGradient
|
||||
control="props"
|
||||
type="sphere"
|
||||
animate="off"
|
||||
brightness={1.2}
|
||||
cAzimuthAngle={180}
|
||||
cDistance={3.6}
|
||||
cPolarAngle={90}
|
||||
cameraZoom={1}
|
||||
color1="#b04a17"
|
||||
color2="#e167c5"
|
||||
color3="#b01040"
|
||||
positionX={-0.5}
|
||||
positionY={-2.0}
|
||||
positionZ={0.3}
|
||||
rotationX={0}
|
||||
rotationY={20}
|
||||
rotationZ={60}
|
||||
uAmplitude={5.8}
|
||||
uDensity={0.7}
|
||||
uFrequency={6.0}
|
||||
uSpeed={0.52}
|
||||
uStrength={4.9}
|
||||
/>
|
||||
</ShaderGradientCanvas>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShaderGradientBackground;
|
||||
Reference in New Issue
Block a user