ITMay 26, 2026

Website-Geschwindigkeitsoptimierung 2026 — So erreichen Sie Core Web Vitals von 90+

Vollständiger Leitfaden 2026 zur Optimierung der Google Core Web Vitals. Behandelt Messung und Verbesserung von LCP, INP und CLS: Bildoptimierung (WebP/AVIF), Vorladen von Schriftarten, Aufteilung von JavaScript-Bundles, CDN-Konfiguration. Enthält eine 30-Punkte-Checkliste zum Erreichen von Lighthouse 90+ mit Codebeispielen für Next.js.

> **Kurzfassung** Google Core Web Vitals 2026: LCP (Largest Contentful Paint) < 2.5s, INP (Interaction to Next Paint) < 200ms, CLS (Cumulative Layout Shift) < 0.1. Diese drei Metriken wirken sich direkt auf die Google-Suchrankings aus. Am meisten bringen in der Praxis: ① Bilder in WebP/AVIF ausliefern ② Fonts vorladen ③ JavaScript per Code-Splitting verkleinern ④ Inhalte über ein CDN am Edge bereitstellen. Wer Next.js sauber konfiguriert, kann mit den Standardfunktionen Lighthouse-Werte von 90+ erreichen. ## Was sind Core Web Vitals? Core Web Vitals sind die drei wichtigsten Google-Metriken für Nutzererfahrung. Seit 2021 fließen sie als SEO-Ranking-Signale ein. ### Die drei Kernmetriken | Metrik | Vollständiger Name | Was gemessen wird | Gut | Verbesserungsbedarf | Schlecht |

|---|---|---|---|---|---|

| **LCP** | Largest Contentful Paint | Zeit bis zum Rendern des größten Bildes oder Textes | < 2.5s | 2.5–4s | > 4s |

| **INP** | Interaction to Next Paint | Zeit vom Nutzerklick bis zur visuellen Reaktion | < 200ms | 200–500ms | > 500ms |

| **CLS** | Cumulative Layout Shift | Unerwartete Layout-Verschiebungen während des Ladens | < 0.1 | 0.1–0.25 | > 0.25 | Hinweis: FID (First Input Delay) wurde 2024 durch INP ersetzt. ### Warum Core Web Vitals wichtig sind - **Direkter SEO-Einfluss**: Sie sind Teil des Google-Ranking-Algorithmus — bei vergleichbaren Inhalten hat die schnellere Website den Vorteil

**Absprungrate**: LCP > 3s erhöht die mobile Absprungrate um 53% (Google-Studie)

**Werbeeinnahmen**: AdSense RPM hängt eng mit der Verweildauer zusammen → schnellere Website = höherer RPM

**Conversion-Rate**: 1 Sekunde Verzögerung = 7% weniger Conversions (Akamai-Studie) ## LCP-Optimierung LCP wird meist durch die Ladezeit des Hero-Bildes oder des größten sichtbaren Textblocks bestimmt. ### Bildoptimierung (größte Wirkung) **Formatvergleich:** | Format | Größenreduktion | Browser-Unterstützung |

|---|---|---|

| JPEG | Ausgangswert | 100% |

| WebP | 25–35% kleiner | 98%+ |

| AVIF | 40–50% kleiner | 90%+ (2026) | ```html

</picture>

``` **Next.js Image component:**

```typescript

import Image from 'next/image' // LCP images must have priority prop

<Image src="/hero.jpg" alt="Hero image" width={1200} height={628} priority // critical — eliminates LCP delay quality={85}

``` ### Ressourcen vorladen ```html

``` ### Server-Antwortzeit (TTFB) | Methode | Wirkung | Implementierung |

|---|---|---|

| CDN | Globales Edge-Caching | Cloudflare, Vercel Edge |

| Cache-Header | Sofort für wiederkehrende Besucher | Cache-Control: max-age=31536000 |

| SSG/ISR | Vorgerendertes HTML | Next.js generateStaticParams | ## INP-Optimierung INP misst die Zeit von einer Nutzerinteraktion (Klick, Tippen, Tastatur) bis zu dem Moment, in dem der Browser den nächsten Frame zeichnet. ### Blockierung des Main Threads reduzieren ```javascript

// Bad: heavy sync computation blocks click response

button.addEventListener('click', () => { const result = heavyComputation(data) // blocks main thread updateUI(result)

}) // Good: offload to Web Worker

const worker = new Worker('heavy-worker.js')

button.addEventListener('click', () => { worker.postMessage(data) // runs in separate thread

})

worker.onmessage = (e) => updateUI(e.data)

``` ### Code-Splitting (Next.js) ```typescript

import dynamic from 'next/dynamic' // Defer components not visible on first load

const HeavyChart = dynamic(() => import('./HeavyChart'), { loading: () => <div>Loading chart...</div>, ssr: false

})

``` ### Tree Shaking ```javascript

// Bad: imports entire lodash (70KB+)

import _ from 'lodash' // Good: imports only what you need (1KB)

import chunk from 'lodash/chunk'

``` ## CLS-Optimierung CLS entsteht, wenn Anzeigen, Bilder oder dynamische Inhalte während des Ladens ihre Position verändern. ### Bildabmessungen immer angeben ```html

``` ### Platz für Anzeigen reservieren ```css.ad-container { min-height: 250px; /* pre-reserve ad space */ display: flex; align-items: center; justify-content: center;

}

``` ### Laden von Schriftarten ```css

@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); font-display: swap; /* show system font immediately, swap when loaded */

}

``` ## Lighthouse-90+-Checkliste (30 Punkte) **LCP (10 Punkte)**

[ ] LCP-Element identifizieren (DevTools → Performance-Tab)

[ ] Dem LCP-Bild priority hinzufügen oder es per preload vorladen

[ ] Hero-Bild in WebP/AVIF konvertieren

[ ] next/image für automatische Optimierung verwenden

[ ] Responsive Bilder über srcset bereitstellen

[ ] CDN verwenden (Cloudflare Pages, Vercel Edge)

[ ] TTFB < 600 ms überprüfen

[ ] Wo möglich SSG/ISR verwenden

[ ] Unnötige Weiterleitungen entfernen

[ ] Alle Drittanbieter-Skripte aufschieben **INP (10 Punkte)**

[ ] INP-Wert in Lighthouse prüfen

[ ] Long Tasks (50 ms+) entfernen — DevTools Performance-Tab

[ ] Rechenintensive Verarbeitung in Web Workers verschieben

[ ] JavaScript-Bundle < 200 KB (komprimiert)

[ ] Unnötige Polyfills entfernen

[ ] useMemo/useCallback in React anwenden

[ ] Event-Handler entprellen/drosseln

[ ] CSS-Transitions statt JS-Animationen verwenden

[ ] async/defer zu Drittanbieter-Script-Tags hinzufügen

[ ] JS-Ausführungsreihenfolge für das LCP-Element optimieren **CLS (10 Punkte)**

[ ] Breite/Höhe für alle Bilder und Videos festlegen

[ ] Mindesthöhe für Anzeigencontainer reservieren

[ ] Dynamisch eingefügte Inhalte am Ende platzieren

[ ] font-display: swap auf @font-face-Regeln anwenden

[ ] Link-Tags zum Vorladen von Schriftarten hinzufügen

[ ] Nur transform/opacity animieren (keine layout-verändernden Eigenschaften)

[ ] Skeleton Loader verwenden, um Inhaltsbereiche vorab zu reservieren

[ ] Prüfen, dass sticky/fixed-Elemente Inhalte nicht verschieben

[ ] Scrollposition beim Einfügen in Infinite Scroll beibehalten

[ ] Höhe der Animation beim Tab-Wechsel mit overflow: hidden fixieren ## Messwerkzeuge | Tool | Zweck | URL |

|---|---|---|

| PageSpeed Insights | Echte Nutzerdaten zu LCP/INP/CLS | pagespeed.web.dev |

| Lighthouse | Laborbasierter Performance-Score | Chrome DevTools → Lighthouse |

| WebPageTest | Tests von globalen Standorten aus | webpagetest.org |

| Chrome DevTools | Detailliertes Profiling | F12 → Performance-Tab |

| Core Web Vitals Report | CrUX-Felddaten für SEO | Search Console | ## FAQ **Q1. Wie stark beeinflussen Core Web Vitals die Google-Rankings?** A. Google beschreibt CWV als ein „Tiebreaker-Signal“ — wenn die Inhaltsqualität gleich ist, gewinnt die schnellere Website. Mobile Page Experience nutzt CWV als Ranking-Komponente. Die genaue Gewichtung ist nicht öffentlich, Praxistests zeigen aber regelmäßig Unterschiede zwischen Websites mit LCP > 4s und < 2s. **Q2. Ist Lighthouse 90+ dasselbe wie bestandene Core Web Vitals?** A. Nein. Lighthouse arbeitet mit einer Laborsimulation; Core Web Vitals basieren auf echten Nutzerdaten (CrUX / Field Data). Ein perfekter Lighthouse-Score von 100 garantiert daher keine guten CWV-Felddaten. Prüfen Sie den Core Web Vitals Report in Google Search Console, denn diese Felddaten sind für SEO-Rankings maßgeblich. **Q3. Liefert Next.js automatisch gute Performance?** A. Teilweise. Next.js bringt Bildoptimierung (next/image), Schriftoptimierung (next/font), Code-Splitting und SSG/ISR bereits mit. Entwickler müssen aber weiterhin priority-Attribute korrekt setzen, unnötige Drittanbieter-Skripte entfernen und Bildabmessungen angeben. Bei sauberer Umsetzung ist ein Lighthouse-Score von 85–95+ realistisch. **Q4. Verringert die Umwandlung in WebP die Bildqualität?** A. Bei quality=80–90 ist der Unterschied für das menschliche Auge in der Regel nicht wahrnehmbar. WebP erreicht bei gleicher visueller Qualität 25–35% kleinere Dateigrößen als JPEG. AVIF komprimiert noch stärker. Tools wie Squoosh, Cloudinary oder next/image können die Konvertierung automatisch übernehmen. **Q5. Wie finde ich heraus, welches Element CLS verursacht?** A. Öffnen Sie in Chrome DevTools den Performance-Tab und suchen Sie nach der Aufzeichnung nach „Layout Shift“-Markierungen. PageSpeed Insights zeigt unter „Avoid large layout shifts“ außerdem die konkreten Elemente, die Bewegungen verursachen. Typische Auslöser sind Bilder ohne Größenangaben, nachladende Anzeigen, Schriftwechsel (FOUT) und dynamisch eingefügte Inhalte. **F6. Wie stark beeinträchtigen Drittanbieter-Skripte (GA, Hotjar) die Performance?** A. Deutlich — Drittanbieter-Skripte können Lighthouse-Scores um 10–20 Punkte senken. GA4 ist durch asynchrones Laden vergleichsweise schlank; umfangreiche Tools wie Hotjar oder Intercom können den INP spürbar verschlechtern. Verwende next/script mit strategy="afterInteractive" oder "lazyOnload", um diese Skripte aufzuschieben, bis die Hauptseite interaktiv ist. **F7. Mobile LCP ist immer langsamer als auf dem Desktop — wie kann ich ihn verbessern?** A. Mobile Geräte haben langsamere Netzwerke und CPUs, deshalb ist ein guter mobiler LCP grundsätzlich schwieriger zu erreichen. Sinnvolle Maßnahmen: ① Kleineres Hero-Bild per srcset für Mobilgeräte bereitstellen ② Nicht wesentliche Bilder auf Mobilgeräten ausblenden ③ Kritisches CSS inline einbinden ④ HTML am CDN-Edge cachen. Ziel bleibt: LCP < 2,5s auch auf Mobilgeräten. **F8. Verbessert die Nutzung von Cloudflare automatisch die Core Web Vitals?** A. Ja, zumindest teilweise. Das Cloudflare CDN reduziert TTFB durch Edge-Caching und verbessert damit direkt den LCP — besonders bei internationalen Besuchern. Aktiviere Cloudflares automatische Minimierung (JS/CSS/HTML), Rocket Loader (JS-Aufschub) und Polish (Bildkomprimierung), um weitere Performance-Gewinne mitzunehmen. --- *Dieser Beitrag enthält Affiliate-Marketing, und es können Provisionen verdient werden.*