Core Web Vitals: LCP, CLS und INP Optimierung für SaaS

// In Ihrer TanStack Router Root-Route, LCP-Elemente vorladen
export const Route = createRootRoute({
  component: () => (
    <head>
      <link rel="preload" href="/hero.webp" as="image" />
      <link rel="preload" href="/fonts/inter-var.woff2" as="font" crossOrigin="anonymous" />
      <link rel="preconnect" href="https://api.tanstackship.com" />
    </head>
  ),
})

export const Route = createFileRoute("/")({
  loader: async ({ context }) => {
    // Hero-Inhalte serverseitig abrufen — kein Client-Wasserfall
    return {
      heroContent: await context.env.DB.prepare(
        "SELECT heading, subheading, cta_text FROM hero_content WHERE active = 1"
      ).first(),
    }
  },
  component: HeroSection,
})

function HeroSection() {
  const { heroContent } = Route.useLoaderData()
  // heroContent rendern — er befindet sich bereits im HTML-Stream
}

// Cloudflare Image Resizing für die automatische Optimierung nutzen
function HeroImage() {
  return (
    <img
      src="/cdn-cgi/image/width=1200,format=webp,quality=80/hero.jpg"
      alt="SaaS Dashboard"
      width={1200}
      height={600}
      loading="eager" // LCP-Bilder sollten nicht lazy geladen werden
      fetchPriority="high"
    />
  )
}

// Immer width und height bei Bildern und iFrames setzen
function SaaScreenshot() {
  return (
    <img
      src="/dashboard-preview.webp"
      alt="Dashboard preview"
      width={1200}
      height={675}
      style={{ aspectRatio: "16/9" }}
    />
  )
}

// Platz für asynchron ladende Inhalte reservieren
.dynamic-content-placeholder {
  width: 100%;
  min-height: 200px;
  background: var(--skeleton-bg);
  border-radius: 8px;
}

function DynamicDashboard() {
  return (
    <Suspense fallback={<div className="dynamic-content-placeholder" />}>
      <DashboardContent />
    </Suspense>
  )
}

// font-display: swap mit angepassten Fallback-Metriken verwenden
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-display: swap;
  size-adjust: 100%; /* Für konsistente Metriken anpassen */
}

// Schlecht: Ein Banner über bestehendem Inhalt einfügen
// document.body.prepend(banner) // ← verursacht Layout-Verschiebung

// Gut: Unterhalb des inhaltlichen Sichtbereichs (Below the Fold) einfügen
function CookieBanner() {
  const [visible, setVisible] = useState(true)

  useEffect(() => {
    // Anfängliches Layout messen, dann Banner anzeigen
    requestAnimationFrame(() => setVisible(true))
  }, [])

  if (!visible) return null

  return <div className="cookie-banner">...</div>
}

// Vorher: Blockiert den Main Thread
function processAllRows(rows: Row[]) {
  rows.forEach((row) => expensiveOperation(row)) // blockiert die UI für 500ms
}

// Nachher: Übergabe an die Event Loop
async function processRowsProgressive(rows: Row[]) {
  const chunkSize = 50
  for (let i = 0; i < rows.length; i += chunkSize) {
    const chunk = rows.slice(i, i + chunkSize)
    chunk.forEach((row) => expensiveOperation(row))
    await new Promise((resolve) => setTimeout(resolve, 0)) // yield
  }
}

// Schwere Komponenten verzögert laden (Lazy Load)
const AnalyticsChart = lazy(() => import("./AnalyticsChart"))
const ExportButton = lazy(() => import("./ExportButton"))

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <AnalyticsChart />
    </Suspense>
  )
}

const mutation = useMutation({
  mutationFn: updateEmail,
  onMutate: async (newEmail) => {
    // Optimistisches Update — UI reagiert sofort
    queryClient.setQueryData(["user"], (old) => ({ ...old, email: newEmail }))
  },
  onError: () => {
    // Rollback bei Fehlschlag
    queryClient.invalidateQueries({ queryKey: ["user"] })
  },
})

// src/lib/web-vitals.ts
import { onLCP, onCLS, onINP, onTTFB } from "web-vitals"

export function reportWebVitals() {
  onLCP((metric) => sendMetric("LCP", metric.value))
  onCLS((metric) => sendMetric("CLS", metric.value))
  onINP((metric) => sendMetric("INP", metric.value))
  onTTFB((metric) => sendMetric("TTFB", metric.value))
}

async function sendMetric(name: string, value: number) {
  // An Ihre Analytics-Engine senden
  await fetch("/api/vitals", {
    method: "POST",
    body: JSON.stringify({ name, value, url: window.location.pathname }),
  })
}

// Serverseitig — Web Vitals-Daten in D1 speichern
export const reportVital = createServerFn({ method: "POST" }).handler(
  async ({ data, context }) => {
    await context.env.DB.prepare(`
      INSERT INTO web_vitals (id, name, value, path, user_id, created_at)
      VALUES (?, ?, ?, ?, ?, ?)
    `).bind(
      crypto.randomUUID(),
      data.name,
      data.value,
      data.url,
      context.session?.userId ?? null,
      Date.now()
    ).run()
  }
)

export const getVitalsDashboard = createServerFn({ method: "GET" }).handler(
  async ({}, { context }) => {
    const lcp = await context.env.DB.prepare(`
      SELECT AVG(value) as avg, PERCENTILE(value, 75) as p75,
             PERCENTILE(value, 95) as p95
      FROM web_vitals
      WHERE name = 'LCP' AND created_at > datetime('now', '-7 days')
    `).first()

    const cls = await context.env.DB.prepare(`...`).first()
    const inp = await context.env.DB.prepare(`...`).first()

    const passingRate = await context.env.DB.prepare(`
      SELECT
        COUNT(*) as total,
        SUM(CASE WHEN name = 'LCP' AND value < 2500 THEN 1 ELSE 0 END) as good_lcp,
        SUM(CASE WHEN name = 'CLS' AND value < 0.1 THEN 1 ELSE 0 END) as good_cls,
        SUM(CASE WHEN name = 'INP' AND value < 200 THEN 1 ELSE 0 END) as good_inp
      FROM web_vitals
      WHERE created_at > datetime('now', '-7 days')
    `).first()

    return { lcp, cls, inp, passingRate }
  }
)

// CI-Check — sicherstellen, dass Web Vitals die Grenzwerte einhalten
const BUDGETS = {
  LCP: 2500,
  CLS: 0.1,
  INP: 200,
  TTFB: 800,
}

export const checkPerformanceBudget = createServerFn({ method: "GET" }).handler(
  async ({}, { context }) => {
    const results = await Promise.all(
      Object.entries(BUDGETS).map(async ([metric, budget]) => {
        const row = await context.env.DB.prepare(`
          SELECT AVG(value) as avg
          FROM web_vitals
          WHERE name = ? AND created_at > datetime('now', '-1 day')
        `).bind(metric).first()

        return {
          metric,
          current: row.avg,
          budget,
          passing: row.avg <= budget,
        }
      })
    )

    return results
  }
)