← Zurück

Web Performance

Core Web Vitals & Optimierungen die wirklich zählen.

Core Web Vitals Was Google misst

⚡

LCP

Largest Contentful Paint

Ziel: < 2.5s

👆

INP

Interaction to Next Paint

Ziel: < 200ms

📐

CLS

Cumulative Layout Shift

Ziel: < 0.1

Quick Wins 80/20 Optimierungen

🖼️ Images

✅
WebP/AVIF statt PNG/JPEG — 30-50% kleiner
✅
loading="lazy" — für Below-the-fold
✅
width & height Attribute — verhindert CLS
✅
fetchpriority="high" — für LCP Image 
<img 
  src="hero.webp"
  width="1200" height="600"
  fetchpriority="high"
  alt="Hero"
/>

🔤 Fonts

✅ font-display: swap
✅ Preload kritische Fonts
✅ Nur nötige Weights laden
✅ Self-host statt Google Fonts 
<link 
  rel="preload" 
  href="/fonts/inter.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin
/>

📜 JavaScript

✅ Code Splitting — nur laden was gebraucht wird
✅ defer/async für non-critical Scripts
✅ Tree Shaking — tote Code entfernen
❌ Keine 500KB Libraries für einen Button

Framework-Spezifisch

Next.js / React

  • • next/image für automatische Optimierung
  • • Server Components wo möglich
  • • Suspense für Streaming
  • • Dynamic imports für große Komponenten

Astro

  • • Zero JS by default 🚀
  • • client:visible für lazy hydration
  • • Image component für srcset
  • • View Transitions für smooth UX

Mess-Tools

PageSpeed Insights

Google's Official Tool

WebPageTest

Deep Dive Analysis

Bundlephobia

NPM Package Size

💡 Key Insight

Performance ist UX. Eine Seite die 100ms schneller lädt fühlt sich qualitativ hochwertiger an — auch wenn der User nicht weiß warum.