Website Performance optimieren – Core Web Vitals verbessern (2025)

~9 Min. Lesezeit · Veröffentlicht am 23. Juli 2025

Was sind Core Web Vitals?

Core Web Vitals sind drei spezifische Metriken, die Google als entscheidend für eine gute User Experience einstuft. Sie messen reale Nutzererfahrungen und sind seit Mai 2021 ein offizieller Ranking-Faktor.

Warum Core Web Vitals entscheidend sind

• SEO-Impact: Direkter Einfluss auf Google Rankings
• Conversion-Rate: 1 Sekunde langsamere Ladezeit = 7% weniger Conversions
• Bounce-Rate: Nutzer verlassen langsame Websites nach 3 Sekunden
• Mobile-First: Besonders kritisch für mobile Nutzer (über 60% Traffic)

LCP optimieren (Largest Contentful Paint)

LCP misst, wann das größte Element im sichtbaren Bereich vollständig geladen ist. Das können Bilder, Videos oder große Textblöcke sein.

LCP-Probleme identifizieren

// LCP im Browser messen
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry.element);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

Häufige LCP-Bremsen

• Große, unoptimierte Bilder: Hero-Images ohne WebP/AVIF
• Render-blocking Ressourcen: CSS/JS blockiert das Rendering
• Langsame Server-Antwortzeiten: TTFB über 200ms
• Client-side Rendering: JavaScript-Heavy SPAs ohne SSR

LCP-Optimierungsstrategien

1. Bilder optimieren

<!-- Modernes responsive Bild mit Priority-Hint -->
<img src="hero.webp" 
     alt="Hero Bild"
     width="800" 
     height="400"
     fetchpriority="high"
     sizes="(max-width: 768px) 100vw, 800px"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w" />

2. Critical CSS inline

<!-- Critical CSS direkt im HTML -->
<style>
/* Above-the-fold CSS */
.hero { background: linear-gradient(...); height: 100vh; }
.nav { position: fixed; top: 0; z-index: 100; }
</style>

<!-- Non-critical CSS asynchron laden -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

3. Preload wichtiger Ressourcen

<!-- Wichtige Ressourcen vorladen -->
<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://analytics.google.com">

FID optimieren (First Input Delay)

FID misst die Zeit zwischen der ersten Nutzerinteraktion (Klick, Touch) und der Browser-Antwort. Lange JavaScript-Ausführungszeiten sind der Hauptverursacher.

FID-Probleme erkennen

// FID im Browser überwachen
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const FID = entry.processingStart - entry.startTime;
    console.log('FID:', FID);
  }
}).observe({type: 'first-input', buffered: true});

Häufige FID-Verursacher

• Große JavaScript-Bundles: Monolithische Skripte blockieren Main Thread
• Third-Party-Scripts: Analytics, Ads, Chat-Widgets
• Ineffiziente Event-Handler: Schwere Berechnungen bei Interactions
• Hydration-Probleme: React/Vue-Apps mit komplexer Client-Hydration

FID-Optimierungsstrategien

1. JavaScript Code-Splitting

// Dynamische Imports für bessere Performance
const loadModule = async () => {
  const { heavyFunction } = await import('./heavy-module.js');
  return heavyFunction();
};

// Intersection Observer für Lazy Loading
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      import('./feature-module.js').then(module => {
        module.initialize(entry.target);
      });
    }
  });
});

2. Web Workers für schwere Tasks

// main.js - Main Thread entlasten
const worker = new Worker('heavy-computation.js');
worker.postMessage({data: largeDataset});
worker.onmessage = (e) => {
  console.log('Ergebnis:', e.data);
  updateUI(e.data);
};

// heavy-computation.js - Web Worker
self.onmessage = function(e) {
  const result = performHeavyCalculation(e.data.data);
  self.postMessage(result);
};

3. Event-Handler optimieren

// Schlecht: Synchrone, schwere Berechnung
button.addEventListener('click', () => {
  const result = heavyCalculation(); // Blockiert Main Thread
  updateUI(result);
});

// Besser: Async mit RequestIdleCallback
button.addEventListener('click', () => {
  requestIdleCallback(() => {
    const result = heavyCalculation();
    updateUI(result);
  });
});

CLS optimieren (Cumulative Layout Shift)

CLS misst unerwartete Layout-Verschiebungen, die Nutzer frustrieren. Bilder ohne Dimensionen und nachladende Inhalte sind häufige Ursachen.

CLS-Probleme aufspüren

// Layout Shifts im Browser tracken
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout Shift:', entry.value, entry.sources);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

Häufige CLS-Verursacher

• Bilder ohne Dimensionen: Browser kann Platz nicht reservieren
• Web Fonts: FOIT/FOUT beim Font-Loading
• Dynamische Inhalte: Ads, Banners, Cookie-Hinweise
• Flexible Layouts: CSS ohne feste Dimensionen

CLS-Optimierungsstrategien

1. Aspect-Ratio für Medien

/* CSS: Platz für Bilder reservieren */
.image-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. Font-Loading optimieren

<!-- Preload wichtiger Fonts -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<style>
@font-face {
  font-family: 'MainFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* FOUT statt FOIT */
}

body {
  font-family: 'MainFont', Arial, sans-serif;
}
</style>

3. Container für dynamische Inhalte

<!-- Feste Container für nachladende Inhalte -->
<div class="ad-container" style="height: 250px; background: #f0f0f0;">
  <!-- Ad wird hier geladen -->
</div>

<div class="cookie-banner-space" style="height: 80px;">
  <!-- Cookie-Banner reserviert Platz -->
</div>

Mess-Tools & Monitoring

Google-Tools

Erweiterte Monitoring-Tools

Real User Monitoring (RUM) implementieren

// Web Vitals Library einbinden
import {getLCP, getFID, getCLS} from 'web-vitals';

// Metriken an Analytics senden
function sendToAnalytics(metric) {
  gtag('event', metric.name, {
    value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
    event_category: 'Web Vitals',
    event_label: metric.id,
    non_interaction: true,
  });
}

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

Technische Optimierungen

HTML-Optimierungen

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Critical CSS inline -->
  <style>/* Critical CSS hier */</style>
  
  <!-- Resource Hints -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://analytics.google.com">
  
  <!-- Preload wichtiger Assets -->
  <link rel="preload" href="hero.webp" as="image">
  <link rel="preload" href="main.woff2" as="font" type="font/woff2" crossorigin>
</head>

CSS-Performance

/* CSS-Container Queries für bessere Performance */
@container (min-width: 400px) {
  .card { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
  }
}

/* Contain für Layout-Isolation */
.article {
  contain: layout style paint;
}

/* Content-visibility für Offscreen-Inhalte */
.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

JavaScript-Performance

// Moderne ES6+ Features nutzen
// Intersection Observer statt Scroll-Events
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Element ist sichtbar - Aktion ausführen
      loadComponent(entry.target);
    }
  });
}, { threshold: 0.1 });

// RequestIdleCallback für non-kritische Tasks
requestIdleCallback(() => {
  // Schwere Berechnungen in idle Zeit
  preloadNextPage();
});

Bilder & Assets optimieren

Moderne Bildformate nutzen

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero Bild" width="800" height="400" loading="lazy">
</picture>

Responsive Images

<img src="image-800.webp"
     srcset="image-400.webp 400w,
             image-800.webp 800w,
             image-1200.webp 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 800px) 50vw,
            400px"
     alt="Produktbild"
     width="800"
     height="600"
     loading="lazy">

Asset-Optimierung Workflow

Server-Performance verbessern

Caching-Strategien

# .htaccess - Apache Caching Headers
<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/html "access plus 1 hour"
</IfModule>

# Cache-Control Headers
<IfModule mod_headers.c>
  <FilesMatch "\.(css|js|png|jpg|webp|woff2)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
</IfModule>

HTTP/2 & HTTP/3

• Server Push: Kritische Ressourcen proaktiv senden
• Multiplexing: Mehrere Requests parallel
• Header Compression: HPACK reduziert Overhead
• HTTP/3 (QUIC): Noch schnellere Verbindungen

CDN-Optimierung

Performance-Checklist

"Performance ist kein Feature – es ist die Grundlage für alle anderen Features. Eine Website, die nicht schnell lädt, wird nicht genutzt."

– Addy Osmani, Google Chrome Team

Benötigen Sie Hilfe bei der Performance-Optimierung Ihrer Website? Kontaktieren Sie mich für eine professionelle Core Web Vitals-Analyse und Umsetzung.