Performance: Animationen pausieren, Footer-Raster entschärft, WebGL nachladen

- Footer-Schriftzug (FlickeringGrid): Textmaske einmal pro Größe statt
  ~14.500 getImageData-Aufrufe pro Frame, nur flackernde Quadrate neu
  zeichnen (69–86 ms -> 0,1–0,2 ms pro Frame, Darstellung pixelgleich)
- PixelBlast: WebGL erst in Viewport-Nähe anlegen, unsichtbar pausieren
  (autoPauseOffscreen war nie angeschlossen), Shader asynchron kompilieren,
  beim Unmount aufräumen (Render-Schleifen liefen nach Seitenwechsel
  weiter); kein MSAA, keine erzwungene High-Performance-GPU
- Silk (Hero): nur rendern, solange sichtbar; DPR max. 1,5
- LightRays: keine verwaiste Render-Schleife mehr bei schnellem Vorbeiscrollen
- BorderGlow (Kontaktkarte): Sweep nur, solange die Karte sichtbar ist
- Silk, PixelBlast, LightRays als eigene Chunks (React.lazy):
  Haupt-Bundle 1,6 MB -> 646 KB (gzip 470 -> 207 KB)
- backgroud_effect und Emailsorter-Vorschaubild als WebP
  (974 KB -> 15 KB, 1,2 MB -> 11 KB), Projekt-Vorschaubilder lazy

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/Hero.tsx

@@ -1,13 +1,15 @@
 import { useNavigate } from "react-router-dom";
 import { ArrowRight } from "lucide-react";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, lazy, Suspense } from "react";
 import { useTheme } from "next-themes";
 import { useQuery } from "@tanstack/react-query";
-import Silk from "@/components/Silk";
 import CountUp from "@/components/CountUp";
 import { trackCtaClick } from "@/lib/analytics";
 import { fetchProjects } from "@/lib/projects";
 
+// WebGL-Effekte als eigene Chunks laden, damit der Text nicht auf three.js/ogl warten muss
+const Silk = lazy(() => import("@/components/Silk"));
+
 const SPARKLE_SVG = (
   <svg className="btn-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden>
     <path
@@ -88,14 +90,19 @@ const Hero = () => {
     <section className="relative min-h-screen flex flex-col justify-center overflow-hidden pt-20">
       {/* Silk animated background */}
       <div className="absolute inset-0 z-0 w-full h-full">
-        <Silk
-          speed={3}
-          scale={0.5}
-          color={silkColor}
-          color2={silkColor2}
-          noiseIntensity={silkNoise}
-          rotation={0}
-        />
+        <Suspense fallback={null}>
+          {/* sanft einblenden, weil der Hintergrund jetzt kurz nach dem Text kommt */}
+          <div className="w-full h-full animate-fade-in">
+            <Silk
+              speed={3}
+              scale={0.5}
+              color={silkColor}
+              color2={silkColor2}
+              noiseIntensity={silkNoise}
+              rotation={0}
+            />
+          </div>
+        </Suspense>
       </div>
 
       <div className="container mx-auto px-6 relative z-10">