perf: fix TBT/LCP/a11y — disable shader animation, cache APIs, fix images

Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com>
2026-03-01 22:18:32 +00:00
parent 3ac7c7a5b3
commit 9a55dc7f81
14 changed files with 92 additions and 64 deletions
--- a/app/api/book-reviews/route.ts
+++ b/app/api/book-reviews/route.ts
@@ -3,7 +3,9 @@ import { getBookReviews } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';

 export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+const CACHE_TTL = 300; // 5 minutes

 /**
 * GET /api/book-reviews
@@ -25,31 +27,29 @@ export async function GET(request: NextRequest) {
    const locale = searchParams.get('locale') || 'en';

    const reviews = await getBookReviews(locale);
-    
+
    if (process.env.NODE_ENV === 'development') {
      console.log(`[API] Book Reviews geladen für ${locale}:`, reviews?.length || 0);
    }

    if (reviews && reviews.length > 0) {
-      return NextResponse.json({
-        bookReviews: reviews,
-        source: 'directus'
-      });
+      return NextResponse.json(
+        { bookReviews: reviews, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
    }

-    return NextResponse.json({
-      bookReviews: null,
-      source: 'fallback'
-    });
+    return NextResponse.json(
+      { bookReviews: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );

  } catch (error) {
-    console.error('Error loading book reviews:', error);
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading book reviews:', error);
+    }
    return NextResponse.json(
-      {
-        bookReviews: null,
-        error: 'Failed to load book reviews',
-        source: 'error'
-      },
+      { bookReviews: null, error: 'Failed to load book reviews', source: 'error' },
      { status: 500 }
    );
  }
--- a/app/api/content/page/route.ts
+++ b/app/api/content/page/route.ts
@@ -2,6 +2,8 @@ import { NextRequest, NextResponse } from "next/server";
 import { getContentByKey } from "@/lib/content";
 import { getContentPage } from "@/lib/directus";

+const CACHE_TTL = 300; // 5 minutes
+
 export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const key = searchParams.get("key");
@@ -15,21 +17,32 @@ export async function GET(request: NextRequest) {
    // 1) Try Directus first
    const directusPage = await getContentPage(key, locale);
    if (directusPage) {
-      return NextResponse.json({
-        content: {
-          title: directusPage.title,
-          slug: directusPage.slug,
-          locale: directusPage.locale || locale,
-          content: directusPage.content,
+      return NextResponse.json(
+        {
+          content: {
+            title: directusPage.title,
+            slug: directusPage.slug,
+            locale: directusPage.locale || locale,
+            content: directusPage.content,
+          },
+          source: "directus",
        },
-        source: "directus",
-      });
+        { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
    }

    // 2) Fallback: PostgreSQL
    const translation = await getContentByKey({ key, locale });
-    if (!translation) return NextResponse.json({ content: null });
-    return NextResponse.json({ content: translation, source: "postgresql" });
+    if (!translation) {
+      return NextResponse.json(
+        { content: null },
+        { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
+    }
+    return NextResponse.json(
+      { content: translation, source: "postgresql" },
+      { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
  } catch (error) {
    // If DB isn't migrated/available, fail soft so the UI can fall back to next-intl strings.
    if (process.env.NODE_ENV === "development") {
--- a/app/api/hobbies/route.ts
+++ b/app/api/hobbies/route.ts
@@ -3,7 +3,9 @@ import { getHobbies } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';

 export const runtime = 'nodejs';
-export const dynamic = 'force-dynamic';
+export const revalidate = 300;
+
+const CACHE_TTL = 300; // 5 minutes

 /**
 * GET /api/hobbies
@@ -28,26 +30,24 @@ export async function GET(request: NextRequest) {
    const hobbies = await getHobbies(locale);

    if (hobbies && hobbies.length > 0) {
-      return NextResponse.json({
-        hobbies,
-        source: 'directus'
-      });
+      return NextResponse.json(
+        { hobbies, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
    }

    // Fallback: return empty (component will use hardcoded fallback)
-    return NextResponse.json({
-      hobbies: null,
-      source: 'fallback'
-    });
+    return NextResponse.json(
+      { hobbies: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );

  } catch (error) {
-    console.error('Error loading hobbies:', error);
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading hobbies:', error);
+    }
    return NextResponse.json(
-      { 
-        hobbies: null, 
-        error: 'Failed to load hobbies',
-        source: 'error' 
-      },
+      { hobbies: null, error: 'Failed to load hobbies', source: 'error' },
      { status: 500 }
    );
  }
--- a/app/api/messages/route.ts
+++ b/app/api/messages/route.ts
@@ -1,13 +1,18 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getMessages } from "@/lib/directus";

+const CACHE_TTL = 300; // 5 minutes
+
 export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const locale = searchParams.get("locale") || "en";

  try {
    const messages = await getMessages(locale);
-    return NextResponse.json({ messages });
+    return NextResponse.json(
+      { messages },
+      { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
  } catch {
    return NextResponse.json({ messages: {} }, { status: 500 });
  }
--- a/app/api/snippets/route.ts
+++ b/app/api/snippets/route.ts
@@ -1,6 +1,8 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { getSnippets } from '@/lib/directus';

+const CACHE_TTL = 300; // 5 minutes
+
 export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
@@ -9,9 +11,10 @@ export async function GET(request: NextRequest) {
    
    const snippets = await getSnippets(limit, featured);
    
-    return NextResponse.json({
-      snippets: snippets || []
-    });
+    return NextResponse.json(
+      { snippets: snippets || [] },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
  } catch (_error) {
    return NextResponse.json({ error: 'Failed to fetch snippets' }, { status: 500 });
  }
--- a/app/api/tech-stack/route.ts
+++ b/app/api/tech-stack/route.ts
@@ -3,14 +3,15 @@ import { getTechStack } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';

 export const runtime = 'nodejs';
+export const revalidate = 300;

 const CACHE_TTL = 300; // 5 minutes

 /**
 * GET /api/tech-stack
- * 
+ *
 * Loads Tech Stack from Directus with fallback to static data
- * 
+ *
 * Query params:
 *   - locale: en or de (default: en)
 */
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -34,12 +34,11 @@ const About = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
-        const [cmsRes, techRes, hobbiesRes, msgRes, booksRes, snippetsRes] = await Promise.all([
+        const [cmsRes, techRes, hobbiesRes, msgRes, snippetsRes] = await Promise.all([
          fetch(`/api/content/page?key=home-about&locale=${locale}`),
          fetch(`/api/tech-stack?locale=${locale}`),
          fetch(`/api/hobbies?locale=${locale}`),
          fetch(`/api/messages?locale=${locale}`),
-          fetch(`/api/book-reviews?locale=${locale}`),
          fetch(`/api/snippets?limit=3&featured=true`)
        ]);
        
@@ -57,9 +56,6 @@ const About = () => {

        const snippetsData = await snippetsRes.json();
        if (snippetsData?.snippets) setSnippets(snippetsData.snippets);
-
-        await booksRes.json();
-        // Books data is available but we don't need to track count anymore
      } catch (error) {
        console.error("About data fetch failed:", error);
      } finally {
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Disc3, Gamepad2, Zap, Quote as QuoteIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import Image from "next/image";

 interface CustomActivity {
  [key: string]: unknown;
@@ -172,7 +173,7 @@ export default function ActivityFeed({
          <div className="flex gap-4">
            {data.gaming.image && (
              <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-lg relative">
-                <img src={data.gaming.image} alt={data.gaming.name} className="w-full h-full object-cover" />
+                <Image src={data.gaming.image} alt={data.gaming.name} fill className="object-cover" sizes="48px" unoptimized />
              </div>
            )}
            <div className="min-w-0 flex flex-col justify-center">
@@ -215,10 +216,12 @@ export default function ActivityFeed({
          </div>
          <div className="flex gap-4 relative z-10">
            <div className="w-16 h-16 rounded-lg overflow-hidden shrink-0 shadow-md relative group-hover:shadow-xl transition-shadow duration-500">
-              <img 
-                src={data.music.albumArt} 
-                alt="Album Art" 
-                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" 
+              <Image
+                src={data.music.albumArt}
+                alt="Album Art"
+                fill
+                className="object-cover transition-transform duration-700 group-hover:scale-110"
+                sizes="64px"
              />
            </div>
            <div className="min-w-0 flex flex-col justify-center">
--- a/app/components/BentoChat.tsx
+++ b/app/components/BentoChat.tsx
@@ -105,7 +105,7 @@ export default function BentoChat() {
          placeholder="Ask me..."
          className="w-full bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-2xl py-3 pl-4 pr-12 text-sm focus:outline-none focus:ring-2 focus:ring-liquid-purple/30 transition-all shadow-inner dark:text-white"
        />
-        <button onClick={handleSend} className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-liquid-purple hover:scale-110 transition-transform">
+        <button onClick={handleSend} aria-label="Send message" className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-liquid-purple hover:scale-110 transition-transform">
          <Send size={18} />
        </button>
      </div>
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -192,7 +192,7 @@ const Contact = () => {
            <div className="bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex-1 flex flex-col justify-between relative overflow-hidden group">
               <div className="relative z-10">
                 <div className="flex justify-between items-center mb-6 sm:mb-8 md:mb-12">
-                   <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Connect</h4>
+                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Connect</p>
                   <div className="flex items-center gap-2 px-3 py-1 bg-emerald-500/10 rounded-full border border-emerald-500/20">
                     <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
                     <span className="text-[10px] font-black uppercase tracking-widest text-emerald-600 dark:text-emerald-400">Online</span>
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -115,7 +115,7 @@ const Hero = () => {
          >
            <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[3rem] sm:rounded-[4rem] lg:rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
            <div className="relative w-full h-full rounded-[2.5rem] sm:rounded-[3rem] lg:rounded-[4rem] overflow-hidden border-[12px] sm:border-[16px] lg:border-[24px] border-white dark:border-stone-900 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] sm:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]">
-              <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority />
+              <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, (max-width: 1024px) 320px, 500px" />
            </div>

            <div className="absolute -bottom-4 -left-4 sm:-bottom-6 sm:-left-6 bg-white dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-xl sm:rounded-[2rem] shadow-2xl border border-stone-100 dark:border-stone-700">
--- a/app/components/ShaderGradientBackground.tsx
+++ b/app/components/ShaderGradientBackground.tsx
@@ -31,7 +31,7 @@ const ShaderGradientBackground = () => {
        <ShaderGradient
          control="props"
          type="sphere"
-          animate="on"
+          animate="off"
          brightness={1.3}
          cAzimuthAngle={180}
          cDistance={3.6}
@@ -57,7 +57,7 @@ const ShaderGradientBackground = () => {
        <ShaderGradient
          control="props"
          type="sphere"
-          animate="on"
+          animate="off"
          brightness={1.25}
          cAzimuthAngle={180}
          cDistance={3.6}
@@ -83,7 +83,7 @@ const ShaderGradientBackground = () => {
        <ShaderGradient
          control="props"
          type="sphere"
-          animate="on"
+          animate="off"
          brightness={1.2}
          cAzimuthAngle={180}
          cDistance={3.6}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -37,6 +37,7 @@ export default async function RootLayout({
    <html lang={locale} suppressHydrationWarning>
      <head>
        <meta charSet="utf-8" />
+        <link rel="preconnect" href="https://i.scdn.co" crossOrigin="anonymous" />
      </head>
      <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
        <div className="grain-overlay" aria-hidden="true" />
--- a/package.json
+++ b/package.json
@@ -115,5 +115,11 @@
    "tsx": "^4.20.5",
    "typescript": "5.9.3",
    "whatwg-fetch": "^3.6.20"
-  }
+  },
+  "browserslist": [
+    "chrome >= 100",
+    "firefox >= 100",
+    "safari >= 15",
+    "edge >= 100"
+  ]
 }