Zurück zum Blog
Webdesign und Entwicklung

Core Web Vitals 2026: Optimierung für Next.js & React

Von Josep Purroy
27. Januar 2026
18 min Lesezeit
Artikelbild: core Web vitals 2026 nextjs react

Core Web Vitals 2026: Optimierung für Next.js und React

Die Core Web Vitals haben sich seit ihrer Einführung im Jahr 2020 erheblich weiterentwickelt. Im Jahr 2026, mit der Konsolidierung von INP (Interaction to Next Paint) als offizielle Metrik und den erweiterten Funktionen von Next.js 15, erfordert die Optimierung der Web-Performance einen völlig neuen Ansatz. Diese technische Anleitung zeigt Ihnen genau, wie Sie jede Metrik mit den modernsten Tools des React-Ökosystems meistern können.

Google hat bestätigt, dass Websites, die die Schwellenwerte der Core Web Vitals überschreiten, eine 24 % geringere Absprungrate und bessere Positionen in den Suchergebnissen aufweisen. Für Projekte, die mit React und Next.js entwickelt wurden, sind die Optimierungsmöglichkeiten enorm, aber auch die technischen Herausforderungen.

Was sind die Core Web Vitals im Jahr 2026 und warum sind sie wichtig?

Die Core Web Vitals sind ein Satz von benutzerzentrierten Metriken, die die tatsächliche Ladeerfahrung, Interaktivität und visuelle Stabilität einer Webseite messen. Im Jahr 2026 sind die drei grundlegenden Metriken:

  • LCP (Largest Contentful Paint): Zeit bis das größte Element im Viewport sichtbar ist
  • INP (Interaction to Next Paint): Latenz aller Benutzerinteraktionen
  • CLS (Cumulative Layout Shift): Visuelle Stabilität während der gesamten Sitzung

Im Gegensatz zu synthetischen Metriken wie Time to First Byte oder Speed Index spiegeln die Core Web Vitals die von echten Benutzern wahrgenommene Erfahrung beim Surfen unter realen Netzwerk- und Gerätebedingungen wider.

Aktualisierte Schwellenwerte für 2026

Die bedeutendste Änderung war die Ersetzung von FID (First Input Delay) durch INP im März 2024. Während FID nur die erste Interaktion maß, bewertet INP die Latenz aller Interaktionen während der Sitzung und bietet eine viel realistischere Sicht auf die Interaktivität.

Wie funktioniert LCP und wie optimiert man es in Next.js 15?

LCP misst die Zeit, die benötigt wird, um das größte sichtbare Inhaltselement im Viewport zu rendern. Typischerweise ist dieses Element ein Hero-Bild, ein prominenter Textblock oder ein Video-Poster.

Elemente, die für LCP qualifizieren

  • -Elemente (einschließlich innerhalb von )
  • Hintergrundbilder, die über url() in CSS geladen werden
  • -Elemente mit Poster
  • Textelemente (

    ,

    , etc.) mit bedeutendem Inhalt

  • Elemente mit Inline-Hintergrundbildern

LCP-Optimierungstechniken in Next.js 15

1. Korrekte Verwendung der Image-Komponente

Next.js 15 enthält eine optimierte Image-Komponente, die intelligentes Lazy Loading implementiert, aber für das LCP-Element benötigen wir das gegenteilige Verhalten:

// app/page.tsx
import Image from 'next/image';

export default function HomePage() {
  return (
    <main>
      <section className="hero">
        {/* LCP-Bild: priority + fetchPriority */}
        <Image
          src="/hero-banner.webp"
          alt="Beschreibung des Hero"
          width={1920}
          height={1080}
          priority // Deaktiviert Lazy Loading
          fetchPriority="high" // Hinweis an den Browser
          sizes="100vw"
          quality={85}
        />
      </section>
      
      {/* Restliche Bilder: Lazy Loading standardmäßig */}
      <Image
        src="/secondary-image.webp"
        alt="Sekundärbild"
        width={800}
        height={600}
        loading="lazy"
      />
    </main>
  );
}

2. Preload kritischer Ressourcen

Im App Router von Next.js 15 können Sie Preloads direkt im Layout verwalten:

// app/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Meine Webseite',
  other: {
    'link': [
      {
        rel: 'preload',
        href: '/fonts/inter-var.woff2',
        as: 'font',
        type: 'font/woff2',
        crossOrigin: 'anonymous',
      },
    ],
  },
};

// Oder mit dem Head
export default function RootLayout({ children }) {
  return (
    <html lang="de">
      <head>
        <link
          rel="preload"
          href="/hero-banner.webp"
          as="image"
          fetchPriority="high"
        />
        <link
          rel="preconnect"
          href="https://fonts.googleapis.com"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

3. Streaming und Suspense für LCP

Eine fortgeschrittene Technik ist die Verwendung von Suspense, um den LCP-Inhalt zu priorisieren:

// app/page.tsx
import { Suspense } from 'react';
import HeroBanner from '@/components/HeroBanner';
import DynamicContent from '@/components/DynamicContent';

export default function Page() {
  return (
    <>
      {/* LCP-Inhalt rendert sofort */}
      <HeroBanner />
      
      {/* Sekundärer Inhalt im Streaming */}
      <Suspense fallback={<ContentSkeleton />}>
        <DynamicContent />
      </Suspense>
    </>
  );
}

Was ist INP und warum hat es FID ersetzt?

INP (Interaction to Next Paint) misst die Latenz zwischen einer Benutzerinteraktion und dem nächsten aktualisierten visuellen Frame. Im Gegensatz zu FID, das nur die erste Interaktion berücksichtigte, bewertet INP alle Interaktionen und meldet einen Wert, der dem schlechtesten Fall nahekommt.

Anatomie einer Interaktion

Jede Interaktion hat drei Phasen:

  1. Input Delay: Zeit vom Ereignis bis zum Start des Handlers
  2. Processing Time: Zeit für die Ausführung der Event-Handler
  3. Presentation Delay: Zeit bis der Browser den Frame rendert
[Click] → [Input Delay] → [Processing] → [Presentation] → [Visual Update]
         └─────────────── INP Total ───────────────────┘

Interaktionen, die INP zählt

  • Mausklicks
  • Taps auf Touchscreens
  • Tastendrücke (sowohl physische als auch Bildschirmtastatur)

Nicht gezählt: Hover, Scrollen oder Zoomen (als kontinuierliche Interaktionen betrachtet).

INP-Optimierung in React und Next.js

1. Vermeidung von Blockierungen des Main Threads

Das häufigste Problem von INP in React sind umfangreiche synchrone Renders:

// ❌ SCHLECHT: Aufwändiges Re-Render blockiert Interaktionen
function ProductList({ products }) {
  const [filter, setFilter] = useState('');
  
  // Synchrones Filtern bei jedem Render
  const filtered = products.filter(p => 
    p.name.toLowerCase().includes(filter.toLowerCase())
  );
  
  return (
    <>
      <input 
        value={filter} 
        onChange={e => setFilter(e.target.value)} 
      />
      {filtered.map(p => <ProductCard key={p.id} product={p} />)}
    </>
  );
}

// ✅ GUT: useDeferredValue zur Priorisierung von Eingaben
import { useDeferredValue, useMemo } from 'react';

function ProductList({ products }) {
  const [filter, setFilter] = useState('');
  const deferredFilter = useDeferredValue(filter);
  
  const filtered = useMemo(() => 
    products.filter(p => 
      p.name.toLowerCase().includes(deferredFilter.toLowerCase())
    ),
    [products, deferredFilter]
  );
  
  const isStale = filter !== deferredFilter;
  
  return (
    <>
      <input 
        value={filter} 
        onChange={e => setFilter(e.target.value)} 
      />
      <div style={{ opacity: isStale ? 0.7 : 1 }}>
        {filtered.map(p => <ProductCard key={p.id} product={p} />)}
      </div>
    </>
  );
}

2. useTransition für nicht dringende Aktualisierungen

import { useState, useTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('home');
  const [isPending, startTransition] = useTransition();
  
  function handleTabChange(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  
  return (
    <div>
      <nav>
        {['home', 'products', 'about'].map(t => (
          <button
            key={t}
            onClick={() => handleTabChange(t)}
            className={tab === t ? 'active' : ''}
          >
            {t}
          </button>
        ))}
      </nav>
      
      <div style={{ opacity: isPending ? 0.8 : 1 }}>
        <TabContent tab={tab} />
      </div>
    </div>
  );
}

3. Virtualisierung für lange Listen

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualizedList({ items }) {
  const parentRef = useRef(null);
  
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 80,
    overscan: 5,
  });
  
  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map(virtualItem => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: 0,
              transform: `translateY(${virtualItem.start}px)`,
              height: `${virtualItem.size}px`,
            }}
          >
            <ItemCard item={items[virtualItem.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

Wie verhindert man CLS in modernen React-Anwendungen?

CLS (Cumulative Layout Shift) misst die unerwarteten Änderungen im Layout während der gesamten Lebensdauer der Seite. Ein hoher CLS frustriert Benutzer, die versuchen, mit sich bewegenden Elementen zu interagieren.

Häufige Ursachen für CLS

  1. Bilder ohne Dimensionen: Der Browser reserviert keinen Platz, bis das Bild heruntergeladen wird
  2. Dynamische Anzeigen und Embeds: Eingefügter Inhalt, der das Layout verschiebt
  3. Web-Schriften (FOIT/FOUT): Größenänderungen beim Laden von Schriften
  4. Dynamisch eingefügter Inhalt: Banner, Benachrichtigungen, Modale

Spezifische Lösungen für Next.js 15

1. Seitenverhältnis für Medien

// Bildkomponente mit garantiertem Seitenverhältnis
function ResponsiveImage({ src, alt, aspectRatio = '16/9' }) {
  return (
    <div style={{ aspectRatio, position: 'relative' }}>
      <Image
        src={src}
        alt={alt}
        fill
        style={{ objectFit: 'cover' }}
        sizes="(max-width: 768px) 100vw, 50vw"
      />
    </div>
  );
}

2. Skeleton Loader mit festen Dimensionen

// components/ProductSkeleton.tsx
export function ProductSkeleton() {
  return (
    <div className="product-card" style={{ height: '320px' }}>
      <div 
        className="skeleton" 
        style={{ height: '200px', background: '#e0e0e0' }} 
      />
      <div 
        className="skeleton" 
        style={{ height: '24px', marginTop: '16px', width: '80%' }} 
      />
      <div 
        className="skeleton" 
        style={{ height: '20px', marginTop: '8px', width: '40%' }} 
      />
    </div>
  );
}

// Verwendung mit Suspense
import { Suspense } from 'react';

export default function ProductPage() {
  return (
    <Suspense fallback={<ProductSkeleton />}>
      <ProductDetails />
    </Suspense>
  );
}

3. Schriftoptimierung in Next.js 15

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Vermeidet FOIT
  variable: '--font-inter',
  preload: true,
  fallback: ['system-ui', 'sans-serif'],
  adjustFontFallback: true, // Passt Metriken des Fallbacks an
});

const robotoMono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-mono',
});

export default function RootLayout({ children }) {
  return (
    <html lang="de" className={`${inter.variable} ${robotoMono.variable}`}>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

4. Platz für dynamischen Inhalt reservieren

// Banner-Komponente mit reservierter Höhe
function PromoBanner() {
  const [isVisible, setIsVisible] = useState(true);
  
  if (!isVisible) {
    // Platz beibehalten oder sanft zusammenklappen
    return null;
  }
  
  return (
    <div 
      className="promo-banner"
      style={{ 
        minHeight: '60px', // Reservierte Höhe
        containIntrinsicSize: '0 60px', // content-visibility Optimierung
      }}
    >
      <p>Sonderangebot! 20% Rabatt</p>
      <button onClick={() => setIsVisible(false)}>×</button>
    </div>
  );
}

Wie beeinflussen die React Server Components die Core Web Vitals?

Die React Server Components (RSC), die vollständig in den Next.js 15 App Router integriert sind, verändern grundlegend, wie wir die Core Web Vitals optimieren. Da sie ausschließlich auf dem Server ausgeführt werden, reduzieren sie drastisch das an den Client gesendete JavaScript.

Vorteile von RSC für jede Metrik

LCP: Sofortiges Rendern

// app/products/[id]/page.tsx
// Dieser Komponente ist standardmäßig ein Server Component

import { getProduct } from '@/lib/api';
import ProductImage from '@/components/ProductImage';

export default async function ProductPage({ params }) {
  // Fetch auf dem Server - kein Wasserfall im Client
  const product = await getProduct(params.id);
  
  return (
    <article>
      {/* Vollständiges HTML in der initialen Antwort gesendet */}
      <ProductImage 
        src={product.image} 
        alt={product.name}
        priority 
      />
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      
      {/* Nur dieser Komponente benötigt JavaScript */}
      <AddToCartButton productId={product.id} />
    </article>
  );
}

INP: Weniger JavaScript = weniger Blockierungen

// Vergleich von Bundles

// ❌ Traditioneller Ansatz (vollständiger Client Component)
// Bundle: ~150KB JavaScript
'use client';
import { useState, useEffect } from 'react';
import { formatPrice, calculateDiscount } from '@/lib/utils';
import { fetchReviews } from '@/lib/api';

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);
  const [reviews, setReviews] = useState([]);
  
  useEffect(() => {
    // Fetches im Client in Kaskade
  }, [productId]);
  
  // Der gesamte Formatierungscode wird an den Client gesendet
}

// ✅ Hybrider RSC-Ansatz
// Bundle: ~15KB JavaScript (nur Interaktivität)

// Server Component - 0KB an den Client
async function ProductPage({ params }) {
  const [product, reviews] = await Promise.all([
    getProduct(params.id),
    getReviews(params.id),
  ]);
  
  // Formatierung auf dem Server ausgeführt
  const formattedPrice = formatPrice(product.price);
  const discount = calculateDiscount(product);
  
  return (
    <article>
      <h1>{product.name}</h1>
      <p className="price">{formattedPrice}</p>
      
      {/* Nur interaktive Komponenten sind Client Components */}
      <InteractiveGallery images={product.images} />
      <AddToCartButton product={product} />
      
      {/* Reviews auf dem Server gerendert */}
      <ReviewList reviews={reviews} />
    </article>
  );
}

Optimales Kompositionsmuster

// app/dashboard/page.tsx
import { Suspense } from 'react';
import DashboardHeader from '@/components/DashboardHeader';
import StatsCards from '@/components/StatsCards';
import RecentActivity from '@/components/RecentActivity';
import InteractiveChart from '@/components/InteractiveChart';

export default function DashboardPage() {
  return (
    <div className="dashboard">
      {/* Server Component - sofortiges Rendern */}
      <DashboardHeader />
      
      {/* Server Component mit Daten - Streaming */}
      <Suspense fallback={<StatsCardsSkeleton />}>
        <StatsCards />
      </Suspense>
      
      {/* Client Component - verzögerte Ladezeit */}
      <Suspense fallback={<ChartSkeleton />}>
        <InteractiveChart />
      </Suspense>
      
      {/* Server Component - paralleles Streaming */}
      <Suspense fallback={<ActivitySkeleton />}>
        <RecentActivity />
      </Suspense>
    </div>
  );
}

Welche Tools zur Messung der Core Web Vitals verwenden?

Eine präzise Messung erfordert die Kombination von Labordaten (synthetisch) mit Felddaten (echte Benutzer).

Labortools

Lighthouse in Next.js

# Lighthouse CI installieren
npm install -g @lhci/cli

# Konfiguration: lighthouserc.js
module.exports = {
  ci: {
    collect: {
      startServerCommand: 'npm run start',
      url: ['http://localhost:3000/', 'http://localhost:3000/productos'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'interactive': ['error', { maxNumericValue: 3800 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

# In CI/CD ausführen
lhci autorun

Chrome DevTools Performance

  1. Öffnen Sie DevTools → Performance
  2. Aktivieren Sie "Web Vitals" im Panel
  3. Aktivieren Sie "CPU throttling: 4x slowdown"
  4. Aktivieren Sie "Network: Slow 3G"
  5. Zeichnen Sie eine Benutzersitzung auf

Feldtools (RUM)

web-vitals library

// lib/analytics.ts
import { onLCP, onINP, onCLS, Metric } from 'web-vitals';

function sendToAnalytics(metric: Metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  });
  
  // Verwenden Sie sendBeacon, um unload nicht zu blockieren
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/vitals', body);
  } else {
    fetch('/api/vitals', { body, method: 'POST', keepalive: true });
  }
}

export function initWebVitals() {
  onLCP(sendToAnalytics);
  onINP(sendToAnalytics);
  onCLS(sendToAnalytics);
}
// app/layout.tsx
'use client';
import { useEffect } from 'react';
import { initWebVitals } from '@/lib/analytics';

export function WebVitalsReporter() {
  useEffect(() => {
    initWebVitals();
  }, []);
  
  return null;
}

Google Search Console und CrUX

Der Chrome User Experience Report (CrUX) liefert reale Daten von Millionen Chrome-Nutzern. Zugriff über:

  • Search Console: Core Web Vitals-Bericht nach URL/Gruppe
  • PageSpeed Insights: CrUX-Daten + Lighthouse-Diagnose
  • CrUX Dashboard: Visualisierungen in Data Studio
  • BigQuery: SQL-Abfragen über den öffentlichen Datensatz
-- CrUX-Abfrage in BigQuery
SELECT
  origin,
  p75_lcp,
  p75_inp,
  p75_cls
FROM
  `chrome-ux-report.materialized.metrics_summary`
WHERE
  origin = 'https://tudominio.com'
  AND yyyymm = 202601

Next.js Analytics (Vercel)

// next.config.js
module.exports = {
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP', 'INP'],
  },
};

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

Welche Benchmarks gibt es für Core Web Vitals je nach Seitentyp?

Die universellen Schwellenwerte von Google erzählen nicht die ganze Geschichte. Verschiedene Seitentypen haben einzigartige Herausforderungen und unterschiedliche Erwartungen.

E-Commerce

Spezifische Herausforderungen:

  • Produktkarussells (CLS)
  • Dynamische Filter (INP)
  • Hochwertige Bilder (LCP)

SaaS / Dashboards

Spezifische Herausforderungen:

  • Komplexe interaktive Grafiken (INP)
  • Echtzeitaktualisierungen (CLS)
  • Tabellen mit vielen Daten (INP, LCP)

Blogs / Content-Seiten

Spezifische Herausforderungen:

  • Große Hero-Bilder (LCP)
  • Anzeigen und Embeds (CLS)
  • Lazy Loading von Inhalten (CLS)

Landing Pages

Spezifische Herausforderungen:

  • Eingangsanimationen (CLS)
  • Autoplay-Videos (LCP)
  • Interaktive CTAs (INP)

Wie implementiert man eine kontinuierliche Überwachungspipeline?

Die Optimierung der Core Web Vitals ist kein einmaliger Aufwand. Sie erfordert kontinuierliche Überwachung und frühzeitige Warnungen.

GitHub Actions für CI/CD

# .github/workflows/lighthouse.yml
name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
      
      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: './lighthouserc.js'
          uploadArtifacts: true
          temporaryPublicStorage: true
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
      
      - name: Comment PR with results
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const results = JSON.parse(
              fs.readFileSync('.lighthouseci/manifest.json', 'utf8')
            );
            // Generieren Sie einen Kommentar mit Metriken

Benutzerdefiniertes Überwachungsdashboard

Für Enterprise-Projekte implementiert unser Node.js-Entwicklungsteam Überwachungsdashboards mit:

  • Slack/Email-Benachrichtigungen bei Verschlechterung der Metriken
  • Historische Vergleiche pro Release
  • Segmentierung nach Seitentyp und Gerät
  • Korrelation mit Geschäftsmesswerten

Fazit: Leistung als Wettbewerbsvorteil

Die Optimierung der Core Web Vitals im Jahr 2026 erfordert ein tiefes Verständnis der Metriken, die Beherrschung der React- und Next.js-Tools und die Aufrechterhaltung eines kontinuierlichen Überwachungsprozesses. Websites, die in Leistung investieren, sehen greifbare Verbesserungen in SEO, Konversionen und Benutzerzufriedenheit.

Die in diesem Artikel behandelten Techniken, von React Server Components bis hin zu Virtualisierung und INP-Optimierung, repräsentieren den Stand der Technik in der performanten Webentwicklung. Ihre korrekte Implementierung erfordert Erfahrung in der Frontend-Architektur und Verständnis des tatsächlichen Benutzerverhaltens.

Benötigt Ihre Next.js-Website eine Optimierung der Core Web Vitals? Bei KIWOP sind wir Spezialisten für React-Entwicklung und Leistungsoptimierung. Kontaktieren Sie unser Team für ein kostenloses Audit Ihrer Website.

Häufig gestellte Fragen zu Core Web Vitals

Was ist der Unterschied zwischen INP und FID?

FID (First Input Delay) maß nur die Latenz der ersten Benutzerinteraktion mit der Seite. INP (Interaction to Next Paint) bewertet alle Interaktionen während der gesamten Sitzung und meldet einen repräsentativen Wert des schlechtesten Falls (Perzentil 75). Das bedeutet, dass INP eine viel anspruchsvollere und realistischere Metrik der wahrgenommenen Interaktivität ist.

Beeinflussen die Core Web Vitals direkt das Ranking bei Google?

Ja, die Core Web Vitals sind seit 2021 ein bestätigter Rankingfaktor. Google hat jedoch klargestellt, dass relevanter und qualitativ hochwertiger Inhalt weiterhin wichtiger ist. Die Core Web Vitals wirken als "Tiebreaker" zwischen Seiten mit ähnlichem Inhalt und als Eintrittsbarriere für Premium-Positionen.

Wie beeinflussen die React Server Components das LCP?

Die React Server Components verbessern das LCP erheblich, da das HTML vollständig auf dem Server generiert und in der initialen Antwort gesendet wird. Es gibt keinen JavaScript → Fetch → Render-Wasserfall im Client. Der LCP-Inhalt ist ab dem ersten Byte des HTML vorhanden.

Was ist ein guter INP-Score für ein E-Commerce?

Für wettbewerbsfähige E-Commerce-Websites empfehlen wir einen INP unter 150ms (der "gute" Schwellenwert von Google liegt bei 200ms). Die Top-Performer erreichen weniger als 100ms. Kritische Bereiche sind Produktfilter, Karussells und Checkout-Prozesse.

Wird der CLS während der gesamten Sitzung oder nur beim initialen Laden gemessen?

CLS wird während der gesamten Lebensdauer der Seite gemessen, aber Google verwendet "Session Windows" für die endgültige Berechnung. Ein Session Window ist eine Gruppe von Shifts mit weniger als 1 Sekunde dazwischen und maximal 5 Sekunden Dauer. Der gemeldete CLS ist das Maximum aller Session Windows.

Hat Next.js 15 automatische Optimierungen für Core Web Vitals?

Ja. Next.js 15 umfasst: automatische Bildoptimierung (WebP/AVIF, Lazy Loading, Dimensionen), Schriftoptimierung (Preload, font-display), intelligentes Prefetching von Routen und React Server Components standardmäßig, die das an den Client gesendete JavaScript reduzieren.

Wie kann ich Core Web Vitals von echten Benutzern messen, nicht nur Lighthouse?

Verwenden Sie die web-vitals-Bibliothek von Google, um RUM-Metriken (Real User Monitoring) zu erfassen. Kombinieren Sie sie mit Ihrem bestehenden Analytics-Stack oder Diensten wie Vercel Analytics, Datadog RUM oder New Relic Browser. Die CrUX-Daten in der Search Console zeigen ebenfalls Metriken von echten Chrome-Nutzern.

Lohnt es sich, auf das Perzentil 75 zu optimieren oder sollte ich auf das 95. zielen?

Google verwendet das Perzentil 75 (p75) für seine Schwellenwerte, was bedeutet, dass 75 % Ihrer Benutzer gute Werte erleben sollten. Für Premium-Websites garantiert jedoch die Optimierung auf p90 oder p95 eine konsistente Erfahrung, selbst für Benutzer unter widrigen Bedingungen (langsame Verbindungen, alte Geräte).

Technisches
Erstaudit.

KI, Sicherheit und Performance. Diagnose mit phasenweisem Vorschlag.

NDA verfügbar
Antwort <24h
Phasenweiser Vorschlag

Ihr erstes Meeting ist mit einem Solutions Architect, nicht mit einem Verkäufer.

Diagnose anfordern