2:I[5261,["972","static/chunks/972-ac97f36a834d6832.js","308","static/chunks/app/blog/%5Bslug%5D/page-c4b68d562bd5bc6b.js"],"ArticleJsonLd"] 3:I[2972,["972","static/chunks/972-ac97f36a834d6832.js","308","static/chunks/app/blog/%5Bslug%5D/page-c4b68d562bd5bc6b.js"],""] 4:I[4707,[],""] 6:I[6423,[],""] 7:I[1494,["972","static/chunks/972-ac97f36a834d6832.js","116","static/chunks/116-341472f8ac463ae0.js","185","static/chunks/app/layout-a01bb62e56618fca.js"],"Navbar"] 5:["slug","core-web-vitals-optimierung","d"] 0:["omhYOsufEqpk7UWysVe39",[[["",{"children":["blog",{"children":[["slug","core-web-vitals-optimierung","d"],{"children":["__PAGE__?{\"slug\":\"core-web-vitals-optimierung\"}",{}]}]}]},"$undefined","$undefined",true],["",{"children":["blog",{"children":[["slug","core-web-vitals-optimierung","d"],{"children":["__PAGE__",{},[["$L1",[["$","$L2",null,{"article":{"slug":"core-web-vitals-optimierung","title":"Core Web Vitals optimieren: Schritt-für-Schritt Guide 2026","metaTitle":"Core Web Vitals optimieren 2026: LCP, CLS & INP verbessern | smugo","metaDescription":"Core Web Vitals direkt verbessern: Wir zeigen, wie Sie LCP unter 2,5s, CLS unter 0,1 und INP unter 200ms bringen – mit konkreten Maßnahmen für Next.js und WordPress.","category":"Web-Entwicklung","categoryColor":"bg-green/10 text-green border-green/20","date":"2026-02-18","lastUpdated":"2026-02-18","readTime":"11 Min.","tldr":"Core Web Vitals sind seit 2021 ein Google-Rankingfaktor. Die drei Metriken LCP (Ladezeit), CLS (Layoutverschiebung) und INP (Interaktivität) bestimmen, ob Google Ihre Seite als \"gut\" einstuft. Mit 8 konkreten Maßnahmen erreichen die meisten Websites in 2-4 Wochen grüne Werte.","heroImage":"/images/blog/blog_hero_core_web_vitals.png","content":[{"type":"h2","content":"Was sind Core Web Vitals und warum sind sie wichtig?"},{"type":"paragraph","content":"Core Web Vitals (CWV) sind drei Metriken, die Google zur Bewertung der Nutzererfahrung einer Website verwendet. Seit dem Page Experience Update 2021 fließen sie direkt in das Google-Ranking ein. Websites mit schlechten CWV-Werten verlieren Sichtbarkeit – unabhängig von der Content-Qualität."},{"type":"table","content":"","headers":["Metrik","Was sie misst","Gut","Verbesserungsbedarf","Schlecht"],"rows":[["LCP (Largest Contentful Paint)","Ladezeit des größten sichtbaren Elements","< 2,5s","2,5s – 4s","> 4s"],["CLS (Cumulative Layout Shift)","Unerwartete Layoutverschiebungen","< 0,1","0,1 – 0,25","> 0,25"],["INP (Interaction to Next Paint)","Reaktionszeit auf Nutzerinteraktionen","< 200ms","200ms – 500ms","> 500ms"]]},{"type":"callout","variant":"info","content":"INP hat FID (First Input Delay) im März 2024 ersetzt. INP misst alle Interaktionen während einer Sitzung, nicht nur die erste – es ist damit deutlich strenger."},{"type":"h2","content":"LCP verbessern: Die 4 wichtigsten Maßnahmen"},{"type":"h3","content":"1. Hero-Image als AVIF/WebP ausliefern"},{"type":"paragraph","content":"Das LCP-Element ist meist das Hero-Bild oder die H1-Überschrift. Bei Bildern: Konvertieren Sie PNG/JPG zu AVIF (60-80% kleiner) und WebP (30-50% kleiner). Nutzen Sie ``-Elemente für progressive Auslieferung."},{"type":"callout","variant":"tip","content":"In Next.js: Nutzen Sie die ``-Komponente mit `priority` für das LCP-Element. Sie optimiert automatisch Format, Größe und Lazy Loading."},{"type":"h3","content":"2. Preload für kritische Ressourcen"},{"type":"paragraph","content":"Fügen Sie `` für das LCP-Bild und kritische Fonts im `` hinzu. Der Browser lädt diese Ressourcen sofort, ohne auf das HTML-Parsing zu warten."},{"type":"h3","content":"3. Server Response Time (TTFB) reduzieren"},{"type":"paragraph","content":"Ein langsamer Server verzögert alles. Ziel: TTFB unter 800ms. Maßnahmen: CDN nutzen (Cloudflare, Vercel Edge), Server-Caching aktivieren, Datenbankabfragen optimieren."},{"type":"h3","content":"4. Render-Blocking Resources eliminieren"},{"type":"paragraph","content":"CSS und JavaScript im `` blockieren das Rendering. Lösung: Kritisches CSS inline einbetten, nicht-kritisches CSS mit `media=\"print\"` laden, JavaScript mit `defer` oder `async` ausführen."},{"type":"h2","content":"CLS verbessern: Layout-Verschiebungen stoppen"},{"type":"list","content":"","items":["Immer width und height für Bilder und Videos angeben – verhindert Platzhalter-Sprünge","Werbebanner und Embeds mit fester Höhe reservieren (aspect-ratio CSS)","Webfonts mit font-display: swap und Preload stabilisieren","Dynamisch eingefügte Inhalte (Banners, Cookie-Hinweise) am unteren Bildschirmrand platzieren","Animationen nur mit transform und opacity – nie mit top/left/width/height"]},{"type":"h2","content":"INP verbessern: Interaktivität optimieren"},{"type":"paragraph","content":"INP misst, wie schnell die Seite auf Klicks, Taps und Tastatureingaben reagiert. Häufige Ursachen für schlechte INP-Werte:"},{"type":"list","content":"","items":["Zu viel JavaScript im Main Thread (Long Tasks > 50ms)","Schwere Event-Handler ohne Debouncing","Drittanbieter-Scripts (Chat-Widgets, Analytics) blockieren den Main Thread","React/Next.js: Unnötige Re-Renders durch fehlende Memoization"]},{"type":"callout","variant":"tip","content":"Nutzen Sie den Chrome DevTools Performance-Tab, um Long Tasks zu identifizieren. Alles über 50ms im Main Thread ist ein INP-Risiko."},{"type":"h2","content":"Core Web Vitals messen: Die richtigen Tools"},{"type":"table","content":"","headers":["Tool","Typ","Stärke"],"rows":[["PageSpeed Insights","Lab + Field Data","Schnellste Übersicht, Google-Daten"],["Chrome DevTools (Lighthouse)","Lab Data","Detaillierte Diagnose lokal"],["Google Search Console","Field Data (real)","Echte Nutzerdaten aus Chrome"],["WebPageTest","Lab Data","Tiefste Analyse, Wasserfall-Diagramm"],["Vercel Analytics","Field Data","Ideal für Next.js-Projekte"]]},{"type":"callout","variant":"warning","content":"Lab Data (PageSpeed Insights, Lighthouse) und Field Data (Search Console) können stark abweichen. Field Data zeigt echte Nutzererfahrungen – das ist, was Google für das Ranking nutzt."},{"type":"h2","content":"Unser Fazit"},{"type":"paragraph","content":"Core Web Vitals sind kein einmaliges Projekt, sondern kontinuierliche Pflege. Die größten Hebel: Bildoptimierung (AVIF/WebP), Preloading kritischer Ressourcen und JavaScript-Reduktion. Mit Next.js und Vercel erreichen die meisten Projekte grüne CWV-Werte ohne großen Aufwand – die Plattform optimiert vieles automatisch."}],"faq":[{"question":"Wie stark beeinflussen Core Web Vitals das Google-Ranking?","answer":"Core Web Vitals sind ein Rankingfaktor, aber kein dominanter. Google gewichtet Content-Relevanz und Backlinks stärker. CWV sind ein Tiebreaker: Bei ähnlicher Content-Qualität gewinnt die schnellere Seite. Für wettbewerbsintensive Keywords kann der Unterschied jedoch signifikant sein."},{"question":"Wie lange dauert es, Core Web Vitals zu verbessern?","answer":"Technische Maßnahmen (Bildoptimierung, Preloading) zeigen Ergebnisse in Lab Data sofort. Field Data in der Google Search Console aktualisiert sich alle 28 Tage – Sie sehen Verbesserungen also erst nach 4-6 Wochen im Ranking."},{"question":"Mein LCP-Wert ist gut im Labor, aber schlecht in der Search Console – warum?","answer":"Lab Data simuliert eine kontrollierte Umgebung (schnelle Verbindung, leistungsstarker Rechner). Field Data spiegelt echte Nutzer wider – oft auf mobilen Geräten mit langsameren Verbindungen. Optimieren Sie primär für Field Data."},{"question":"Welche CMS-Plattform hat die besten Core Web Vitals?","answer":"Next.js mit Vercel erreicht am einfachsten grüne CWV-Werte dank automatischer Bildoptimierung, Edge-Caching und Code-Splitting. WordPress kann mit dem richtigen Hosting und Plugins (WP Rocket, Imagify) ebenfalls gute Werte erreichen, erfordert aber mehr manuelle Konfiguration."},{"question":"Was ist der Unterschied zwischen FID und INP?","answer":"FID (First Input Delay) maß nur die erste Interaktion auf einer Seite. INP (Interaction to Next Paint) misst alle Interaktionen während einer Sitzung und nimmt den schlechtesten Wert. INP ist damit deutlich strenger und repräsentativer für die gesamte Nutzererfahrung."}],"internalLinks":[{"text":"Next.js vs. WordPress","href":"/blog/nextjs-vs-wordpress"},{"text":"DSGVO-konforme Website","href":"/blog/dsgvo-konforme-website"},{"text":"Web-Entwicklung Services","href":"/services"},{"text":"Erstgespräch vereinbaren","href":"/contact"}]}}],["$","div",null,{"className":"bg-paper min-h-screen","children":["$","div",null,{"className":"container mx-auto px-4 py-24 max-w-3xl","children":[["$","$L3",null,{"href":"/blog","className":"inline-flex items-center gap-2 text-sm text-ink/70 hover:text-blue transition-colors mb-12","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-left w-4 h-4","aria-hidden":"true","children":[["$","path","1l729n",{"d":"m12 19-7-7 7-7"}],["$","path","x3x0zl",{"d":"M19 12H5"}],"$undefined"]}]," Zurück zum Blog"]}],["$","header",null,{"className":"mb-12","children":[["$","div",null,{"className":"flex items-center gap-3 mb-6","children":[["$","span",null,{"className":"px-3 py-1 rounded-full text-xs font-bold border bg-green/10 text-green border-green/20","children":"Web-Entwicklung"}],["$","div",null,{"className":"flex items-center gap-4 text-xs text-ink/60","children":[["$","span",null,{"className":"flex items-center gap-1","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-calendar w-3 h-3","aria-hidden":"true","children":[["$","path","1cmpym",{"d":"M8 2v4"}],["$","path","4m81vk",{"d":"M16 2v4"}],["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}],["$","path","8toen8",{"d":"M3 10h18"}],"$undefined"]}]," ","2026-02-18"]}],["$","span",null,{"className":"flex items-center gap-1","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-clock w-3 h-3","aria-hidden":"true","children":[["$","circle","1mglay",{"cx":"12","cy":"12","r":"10"}],["$","path","mmk7yg",{"d":"M12 6v6l4 2"}],"$undefined"]}]," ","11 Min."]}]]}]]}],["$","h1",null,{"className":"text-3xl md:text-5xl font-display font-bold text-ink leading-[1.1] mb-6","children":"Core Web Vitals optimieren: Schritt-für-Schritt Guide 2026"}],["$","div",null,{"className":"bg-blue/5 border border-blue/20 rounded-xl p-5 mb-12","children":[["$","p",null,{"className":"text-sm font-bold text-blue uppercase tracking-wider mb-2","children":"TL;DR"}],["$","p",null,{"className":"text-ink/80 leading-relaxed","children":"Core Web Vitals sind seit 2021 ein Google-Rankingfaktor. Die drei Metriken LCP (Ladezeit), CLS (Layoutverschiebung) und INP (Interaktivität) bestimmen, ob Google Ihre Seite als \"gut\" einstuft. Mit 8 konkreten Maßnahmen erreichen die meisten Websites in 2-4 Wochen grüne Werte."}]]}]]}],["$","div",null,{"className":"mb-12 rounded-2xl overflow-hidden border border-sand/30 shadow-lg","children":["$","picture",null,{"children":[["$","source",null,{"srcSet":"/images/blog/blog_hero_core_web_vitals.avif","type":"image/avif"}],["$","source",null,{"srcSet":"/images/blog/blog_hero_core_web_vitals.webp","type":"image/webp"}],["$","img",null,{"src":"/images/blog/blog_hero_core_web_vitals.png","alt":"Core Web Vitals optimieren: Schritt-für-Schritt Guide 2026","width":800,"height":450,"loading":"$undefined","className":"w-full h-auto object-cover","fetchPriority":"high"}]]}]}],["$","article",null,{"className":"prose-smugo","children":[["$","h2","0",{"className":"text-2xl md:text-3xl font-display font-bold text-ink mt-12 mb-4","children":"Was sind Core Web Vitals und warum sind sie wichtig?"}],["$","p","1",{"className":"text-ink/80 leading-relaxed mb-4","children":"Core Web Vitals (CWV) sind drei Metriken, die Google zur Bewertung der Nutzererfahrung einer Website verwendet. Seit dem Page Experience Update 2021 fließen sie direkt in das Google-Ranking ein. Websites mit schlechten CWV-Werten verlieren Sichtbarkeit – unabhängig von der Content-Qualität."}],["$","div","2",{"className":"overflow-x-auto mb-8 rounded-xl border border-sand/30","children":["$","table",null,{"className":"w-full text-left border-collapse","children":[["$","thead",null,{"children":["$","tr",null,{"className":"bg-paper border-b border-sand/30","children":[["$","th","0",{"className":"p-4 font-bold text-ink text-sm","children":"Metrik"}],["$","th","1",{"className":"p-4 font-bold text-ink text-sm","children":"Was sie misst"}],["$","th","2",{"className":"p-4 font-bold text-ink text-sm","children":"Gut"}],["$","th","3",{"className":"p-4 font-bold text-ink text-sm","children":"Verbesserungsbedarf"}],["$","th","4",{"className":"p-4 font-bold text-ink text-sm","children":"Schlecht"}]]}]}],["$","tbody",null,{"children":[["$","tr","0",{"className":"border-b border-sand/10 last:border-0","children":[["$","td","0",{"className":"p-4 text-ink/80 text-sm","children":"LCP (Largest Contentful Paint)"}],["$","td","1",{"className":"p-4 text-ink/80 text-sm","children":"Ladezeit des größten sichtbaren Elements"}],["$","td","2",{"className":"p-4 text-ink/80 text-sm","children":"< 2,5s"}],["$","td","3",{"className":"p-4 text-ink/80 text-sm","children":"2,5s – 4s"}],["$","td","4",{"className":"p-4 text-ink/80 text-sm","children":"> 4s"}]]}],["$","tr","1",{"className":"border-b border-sand/10 last:border-0","children":[["$","td","0",{"className":"p-4 text-ink/80 text-sm","children":"CLS (Cumulative Layout Shift)"}],["$","td","1",{"className":"p-4 text-ink/80 text-sm","children":"Unerwartete Layoutverschiebungen"}],["$","td","2",{"className":"p-4 text-ink/80 text-sm","children":"< 0,1"}],["$","td","3",{"className":"p-4 text-ink/80 text-sm","children":"0,1 – 0,25"}],["$","td","4",{"className":"p-4 text-ink/80 text-sm","children":"> 0,25"}]]}],["$","tr","2",{"className":"border-b border-sand/10 last:border-0","children":[["$","td","0",{"className":"p-4 text-ink/80 text-sm","children":"INP (Interaction to Next Paint)"}],["$","td","1",{"className":"p-4 text-ink/80 text-sm","children":"Reaktionszeit auf Nutzerinteraktionen"}],["$","td","2",{"className":"p-4 text-ink/80 text-sm","children":"< 200ms"}],["$","td","3",{"className":"p-4 text-ink/80 text-sm","children":"200ms – 500ms"}],["$","td","4",{"className":"p-4 text-ink/80 text-sm","children":"> 500ms"}]]}]]}]]}]}],["$","div","3",{"className":"flex gap-4 p-5 rounded-xl border mb-6 bg-blue/5 border-blue/20 text-blue","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-info w-5 h-5 shrink-0 mt-0.5","aria-hidden":"true","children":[["$","circle","1mglay",{"cx":"12","cy":"12","r":"10"}],["$","path","1dtifu",{"d":"M12 16v-4"}],["$","path","e9boi3",{"d":"M12 8h.01"}],"$undefined"]}],["$","p",null,{"className":"text-ink/80 text-sm leading-relaxed","children":"INP hat FID (First Input Delay) im März 2024 ersetzt. INP misst alle Interaktionen während einer Sitzung, nicht nur die erste – es ist damit deutlich strenger."}]]}],["$","h2","4",{"className":"text-2xl md:text-3xl font-display font-bold text-ink mt-12 mb-4","children":"LCP verbessern: Die 4 wichtigsten Maßnahmen"}],["$","h3","5",{"className":"text-xl font-display font-bold text-ink mt-8 mb-3","children":"1. Hero-Image als AVIF/WebP ausliefern"}],["$","p","6",{"className":"text-ink/80 leading-relaxed mb-4","children":"Das LCP-Element ist meist das Hero-Bild oder die H1-Überschrift. Bei Bildern: Konvertieren Sie PNG/JPG zu AVIF (60-80% kleiner) und WebP (30-50% kleiner). Nutzen Sie ``-Elemente für progressive Auslieferung."}],["$","div","7",{"className":"flex gap-4 p-5 rounded-xl border mb-6 bg-green/5 border-green/20 text-green","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-lightbulb w-5 h-5 shrink-0 mt-0.5","aria-hidden":"true","children":[["$","path","1gvzjb",{"d":"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"}],["$","path","x1upvd",{"d":"M9 18h6"}],["$","path","ceow96",{"d":"M10 22h4"}],"$undefined"]}],["$","p",null,{"className":"text-ink/80 text-sm leading-relaxed","children":"In Next.js: Nutzen Sie die ``-Komponente mit `priority` für das LCP-Element. Sie optimiert automatisch Format, Größe und Lazy Loading."}]]}],["$","h3","8",{"className":"text-xl font-display font-bold text-ink mt-8 mb-3","children":"2. Preload für kritische Ressourcen"}],["$","p","9",{"className":"text-ink/80 leading-relaxed mb-4","children":"Fügen Sie `` für das LCP-Bild und kritische Fonts im `` hinzu. Der Browser lädt diese Ressourcen sofort, ohne auf das HTML-Parsing zu warten."}],["$","h3","10",{"className":"text-xl font-display font-bold text-ink mt-8 mb-3","children":"3. Server Response Time (TTFB) reduzieren"}],["$","p","11",{"className":"text-ink/80 leading-relaxed mb-4","children":"Ein langsamer Server verzögert alles. Ziel: TTFB unter 800ms. Maßnahmen: CDN nutzen (Cloudflare, Vercel Edge), Server-Caching aktivieren, Datenbankabfragen optimieren."}],["$","h3","12",{"className":"text-xl font-display font-bold text-ink mt-8 mb-3","children":"4. Render-Blocking Resources eliminieren"}],["$","p","13",{"className":"text-ink/80 leading-relaxed mb-4","children":"CSS und JavaScript im `` blockieren das Rendering. Lösung: Kritisches CSS inline einbetten, nicht-kritisches CSS mit `media=\"print\"` laden, JavaScript mit `defer` oder `async` ausführen."}],["$","h2","14",{"className":"text-2xl md:text-3xl font-display font-bold text-ink mt-12 mb-4","children":"CLS verbessern: Layout-Verschiebungen stoppen"}],["$","ul","15",{"className":"space-y-2 mb-6 pl-1","children":[["$","li","0",{"className":"flex items-start gap-3 text-ink/80","children":[["$","span",null,{"className":"text-blue mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"children":"Immer width und height für Bilder und Videos angeben – verhindert Platzhalter-Sprünge"}]]}],["$","li","1",{"className":"flex items-start gap-3 text-ink/80","children":[["$","span",null,{"className":"text-blue mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"children":"Werbebanner und Embeds mit fester Höhe reservieren (aspect-ratio CSS)"}]]}],["$","li","2",{"className":"flex items-start gap-3 text-ink/80","children":[["$","span",null,{"className":"text-blue mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"children":"Webfonts mit font-display: swap und Preload stabilisieren"}]]}],["$","li","3",{"className":"flex items-start gap-3 text-ink/80","children":[["$","span",null,{"className":"text-blue mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"children":"Dynamisch eingefügte Inhalte (Banners, Cookie-Hinweise) am unteren Bildschirmrand platzieren"}]]}],["$","li","4",{"className":"flex items-start gap-3 text-ink/80","children":[["$","span",null,{"className":"text-blue mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"children":"Animationen nur mit transform und opacity – nie mit top/left/width/height"}]]}]]}],["$","h2","16",{"className":"text-2xl md:text-3xl font-display font-bold text-ink mt-12 mb-4","children":"INP verbessern: Interaktivität optimieren"}],["$","p","17",{"className":"text-ink/80 leading-relaxed mb-4","children":"INP misst, wie schnell die Seite auf Klicks, Taps und Tastatureingaben reagiert. Häufige Ursachen für schlechte INP-Werte:"}],["$","ul","18",{"className":"space-y-2 mb-6 pl-1","children":[["$","li","0",{"className":"flex items-start gap-3 text-ink/80","children":[["$","span",null,{"className":"text-blue mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"children":"Zu viel JavaScript im Main Thread (Long Tasks > 50ms)"}]]}],["$","li","1",{"className":"flex items-start gap-3 text-ink/80","children":[["$","span",null,{"className":"text-blue mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"children":"Schwere Event-Handler ohne Debouncing"}]]}],["$","li","2",{"className":"flex items-start gap-3 text-ink/80","children":[["$","span",null,{"className":"text-blue mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"children":"Drittanbieter-Scripts (Chat-Widgets, Analytics) blockieren den Main Thread"}]]}],["$","li","3",{"className":"flex items-start gap-3 text-ink/80","children":[["$","span",null,{"className":"text-blue mt-1.5 shrink-0","children":"▸"}],["$","span",null,{"children":"React/Next.js: Unnötige Re-Renders durch fehlende Memoization"}]]}]]}],["$","div","19",{"className":"flex gap-4 p-5 rounded-xl border mb-6 bg-green/5 border-green/20 text-green","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-lightbulb w-5 h-5 shrink-0 mt-0.5","aria-hidden":"true","children":[["$","path","1gvzjb",{"d":"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"}],["$","path","x1upvd",{"d":"M9 18h6"}],["$","path","ceow96",{"d":"M10 22h4"}],"$undefined"]}],["$","p",null,{"className":"text-ink/80 text-sm leading-relaxed","children":"Nutzen Sie den Chrome DevTools Performance-Tab, um Long Tasks zu identifizieren. Alles über 50ms im Main Thread ist ein INP-Risiko."}]]}],["$","h2","20",{"className":"text-2xl md:text-3xl font-display font-bold text-ink mt-12 mb-4","children":"Core Web Vitals messen: Die richtigen Tools"}],["$","div","21",{"className":"overflow-x-auto mb-8 rounded-xl border border-sand/30","children":["$","table",null,{"className":"w-full text-left border-collapse","children":[["$","thead",null,{"children":["$","tr",null,{"className":"bg-paper border-b border-sand/30","children":[["$","th","0",{"className":"p-4 font-bold text-ink text-sm","children":"Tool"}],["$","th","1",{"className":"p-4 font-bold text-ink text-sm","children":"Typ"}],["$","th","2",{"className":"p-4 font-bold text-ink text-sm","children":"Stärke"}]]}]}],["$","tbody",null,{"children":[["$","tr","0",{"className":"border-b border-sand/10 last:border-0","children":[["$","td","0",{"className":"p-4 text-ink/80 text-sm","children":"PageSpeed Insights"}],["$","td","1",{"className":"p-4 text-ink/80 text-sm","children":"Lab + Field Data"}],["$","td","2",{"className":"p-4 text-ink/80 text-sm","children":"Schnellste Übersicht, Google-Daten"}]]}],["$","tr","1",{"className":"border-b border-sand/10 last:border-0","children":[["$","td","0",{"className":"p-4 text-ink/80 text-sm","children":"Chrome DevTools (Lighthouse)"}],["$","td","1",{"className":"p-4 text-ink/80 text-sm","children":"Lab Data"}],["$","td","2",{"className":"p-4 text-ink/80 text-sm","children":"Detaillierte Diagnose lokal"}]]}],["$","tr","2",{"className":"border-b border-sand/10 last:border-0","children":[["$","td","0",{"className":"p-4 text-ink/80 text-sm","children":"Google Search Console"}],["$","td","1",{"className":"p-4 text-ink/80 text-sm","children":"Field Data (real)"}],["$","td","2",{"className":"p-4 text-ink/80 text-sm","children":"Echte Nutzerdaten aus Chrome"}]]}],["$","tr","3",{"className":"border-b border-sand/10 last:border-0","children":[["$","td","0",{"className":"p-4 text-ink/80 text-sm","children":"WebPageTest"}],["$","td","1",{"className":"p-4 text-ink/80 text-sm","children":"Lab Data"}],["$","td","2",{"className":"p-4 text-ink/80 text-sm","children":"Tiefste Analyse, Wasserfall-Diagramm"}]]}],["$","tr","4",{"className":"border-b border-sand/10 last:border-0","children":[["$","td","0",{"className":"p-4 text-ink/80 text-sm","children":"Vercel Analytics"}],["$","td","1",{"className":"p-4 text-ink/80 text-sm","children":"Field Data"}],["$","td","2",{"className":"p-4 text-ink/80 text-sm","children":"Ideal für Next.js-Projekte"}]]}]]}]]}]}],["$","div","22",{"className":"flex gap-4 p-5 rounded-xl border mb-6 bg-orange/5 border-orange/20 text-orange","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-triangle-alert w-5 h-5 shrink-0 mt-0.5","aria-hidden":"true","children":[["$","path","wmoenq",{"d":"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"}],["$","path","juzpu7",{"d":"M12 9v4"}],["$","path","p32p05",{"d":"M12 17h.01"}],"$undefined"]}],["$","p",null,{"className":"text-ink/80 text-sm leading-relaxed","children":"Lab Data (PageSpeed Insights, Lighthouse) und Field Data (Search Console) können stark abweichen. Field Data zeigt echte Nutzererfahrungen – das ist, was Google für das Ranking nutzt."}]]}],["$","h2","23",{"className":"text-2xl md:text-3xl font-display font-bold text-ink mt-12 mb-4","children":"Unser Fazit"}],["$","p","24",{"className":"text-ink/80 leading-relaxed mb-4","children":"Core Web Vitals sind kein einmaliges Projekt, sondern kontinuierliche Pflege. Die größten Hebel: Bildoptimierung (AVIF/WebP), Preloading kritischer Ressourcen und JavaScript-Reduktion. Mit Next.js und Vercel erreichen die meisten Projekte grüne CWV-Werte ohne großen Aufwand – die Plattform optimiert vieles automatisch."}]]}],["$","section",null,{"className":"mt-16 pt-12 border-t border-sand/30","children":[["$","h2",null,{"className":"text-2xl font-display font-bold text-ink mb-8","children":"Häufig gestellte Fragen"}],["$","div",null,{"className":"space-y-6","children":[["$","div","0",{"className":"bg-white rounded-xl border border-sand/30 p-6","children":[["$","h3",null,{"className":"font-bold text-ink mb-2","children":"Wie stark beeinflussen Core Web Vitals das Google-Ranking?"}],["$","p",null,{"className":"text-ink/70 text-sm leading-relaxed","children":"Core Web Vitals sind ein Rankingfaktor, aber kein dominanter. Google gewichtet Content-Relevanz und Backlinks stärker. CWV sind ein Tiebreaker: Bei ähnlicher Content-Qualität gewinnt die schnellere Seite. Für wettbewerbsintensive Keywords kann der Unterschied jedoch signifikant sein."}]]}],["$","div","1",{"className":"bg-white rounded-xl border border-sand/30 p-6","children":[["$","h3",null,{"className":"font-bold text-ink mb-2","children":"Wie lange dauert es, Core Web Vitals zu verbessern?"}],["$","p",null,{"className":"text-ink/70 text-sm leading-relaxed","children":"Technische Maßnahmen (Bildoptimierung, Preloading) zeigen Ergebnisse in Lab Data sofort. Field Data in der Google Search Console aktualisiert sich alle 28 Tage – Sie sehen Verbesserungen also erst nach 4-6 Wochen im Ranking."}]]}],["$","div","2",{"className":"bg-white rounded-xl border border-sand/30 p-6","children":[["$","h3",null,{"className":"font-bold text-ink mb-2","children":"Mein LCP-Wert ist gut im Labor, aber schlecht in der Search Console – warum?"}],["$","p",null,{"className":"text-ink/70 text-sm leading-relaxed","children":"Lab Data simuliert eine kontrollierte Umgebung (schnelle Verbindung, leistungsstarker Rechner). Field Data spiegelt echte Nutzer wider – oft auf mobilen Geräten mit langsameren Verbindungen. Optimieren Sie primär für Field Data."}]]}],["$","div","3",{"className":"bg-white rounded-xl border border-sand/30 p-6","children":[["$","h3",null,{"className":"font-bold text-ink mb-2","children":"Welche CMS-Plattform hat die besten Core Web Vitals?"}],["$","p",null,{"className":"text-ink/70 text-sm leading-relaxed","children":"Next.js mit Vercel erreicht am einfachsten grüne CWV-Werte dank automatischer Bildoptimierung, Edge-Caching und Code-Splitting. WordPress kann mit dem richtigen Hosting und Plugins (WP Rocket, Imagify) ebenfalls gute Werte erreichen, erfordert aber mehr manuelle Konfiguration."}]]}],["$","div","4",{"className":"bg-white rounded-xl border border-sand/30 p-6","children":[["$","h3",null,{"className":"font-bold text-ink mb-2","children":"Was ist der Unterschied zwischen FID und INP?"}],["$","p",null,{"className":"text-ink/70 text-sm leading-relaxed","children":"FID (First Input Delay) maß nur die erste Interaktion auf einer Seite. INP (Interaction to Next Paint) misst alle Interaktionen während einer Sitzung und nimmt den schlechtesten Wert. INP ist damit deutlich strenger und repräsentativer für die gesamte Nutzererfahrung."}]]}]]}]]}],["$","div",null,{"className":"mt-12 text-xs text-ink/40","children":["Zuletzt aktualisiert: ","2026-02-18"]}],["$","div",null,{"className":"mt-16 bg-ink rounded-2xl p-8 md:p-12 text-center","children":[["$","h3",null,{"className":"text-2xl font-bold text-white mb-4","children":"Bereit für den nächsten Schritt?"}],["$","p",null,{"className":"text-white/60 mb-8 max-w-lg mx-auto","children":"Wir helfen Ihnen, diese Strategien in Ihrem Unternehmen umzusetzen."}],["$","$L3",null,{"href":"/contact","children":["Erstgespräch vereinbaren ",["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right ml-2 w-4 h-4","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]],"className":"inline-flex items-center justify-center rounded-lg font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-blue text-white hover:bg-gradient-to-r hover:from-blue hover:to-blue-cyan shadow-md hover:shadow-lg hover:-translate-y-0.5 h-14 px-10 text-lg","disabled":"$undefined"}]]}],["$","div",null,{"className":"mt-12 pt-8 border-t border-sand/30","children":[["$","h4",null,{"className":"text-sm font-bold text-ink/40 uppercase tracking-wider mb-4","children":"Weiterführende Seiten"}],["$","div",null,{"className":"flex flex-wrap gap-3","children":[["$","$L3","0",{"href":"/blog/nextjs-vs-wordpress","className":"px-4 py-2 bg-white rounded-lg border border-sand/30 text-sm font-medium text-ink hover:text-blue hover:border-blue/20 transition-colors","children":"Next.js vs. WordPress"}],["$","$L3","1",{"href":"/blog/dsgvo-konforme-website","className":"px-4 py-2 bg-white rounded-lg border border-sand/30 text-sm font-medium text-ink hover:text-blue hover:border-blue/20 transition-colors","children":"DSGVO-konforme Website"}],["$","$L3","2",{"href":"/services","className":"px-4 py-2 bg-white rounded-lg border border-sand/30 text-sm font-medium text-ink hover:text-blue hover:border-blue/20 transition-colors","children":"Web-Entwicklung Services"}],["$","$L3","3",{"href":"/contact","className":"px-4 py-2 bg-white rounded-lg border border-sand/30 text-sm font-medium text-ink hover:text-blue hover:border-blue/20 transition-colors","children":"Erstgespräch vereinbaren"}]]}]]}]]}]}]],null],null],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children","$5","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[null,["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]],null]},[[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/d02cc600f82bc049.css","precedence":"next","crossOrigin":"$undefined"}]],["$","html",null,{"lang":"de","className":"scroll-smooth","children":["$","body",null,{"className":"__variable_f367f3 __variable_dd5b2f antialiased bg-white text-ink selection:bg-blue selection:text-white flex flex-col min-h-screen","children":[["$","$L7",null,{}],["$","main",null,{"className":"flex-grow","children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}],["$","footer",null,{"className":"bg-ink text-white/70 py-16 border-t border-white/10","children":["$","div",null,{"className":"container mx-auto px-4","children":[["$","div",null,{"className":"grid grid-cols-1 md:grid-cols-4 gap-12 mb-12","children":[["$","div",null,{"className":"col-span-1 md:col-span-2","children":[["$","div",null,{"className":"flex items-center gap-3 cursor-pointer select-none mb-6","children":["$","div",null,{"className":"relative h-10 w-auto brightness-0 invert","children":["$","picture",null,{"children":[["$","source",null,{"srcSet":"/images/logo.avif","type":"image/avif"}],["$","source",null,{"srcSet":"/images/logo.webp","type":"image/webp"}],["$","img",null,{"src":"/images/logo.png","alt":"smugo Logo","width":160,"height":40,"className":"h-10 w-auto object-contain","fetchPriority":"high"}]]}]}]}],["$","p",null,{"className":"max-w-md leading-relaxed text-sm","children":"smugo GmbH: KI-Automatisierung, Prozessoptimierung und digitale Lösungen für Unternehmen in Trier & Luxemburg. Präzise – Technologisch – Schnell."}]]}],["$","div",null,{"className":"space-y-4","children":[["$","h4",null,{"className":"font-display font-semibold text-lg text-white","children":"Unternehmen"}],["$","ul",null,{"className":"space-y-2 text-sm","children":[["$","li",null,{"children":["$","$L3",null,{"href":"/about","className":"hover:text-blue transition-colors","children":"Über uns"}]}],["$","li",null,{"children":["$","$L3",null,{"href":"/services","className":"hover:text-blue transition-colors","children":"Leistungen"}]}],["$","li",null,{"children":["$","$L3",null,{"href":"/cases","className":"hover:text-blue transition-colors","children":"Referenzen"}]}],["$","li",null,{"children":["$","$L3",null,{"href":"/blog","className":"hover:text-blue transition-colors","children":"Blog"}]}],["$","li",null,{"children":["$","$L3",null,{"href":"/contact","className":"hover:text-blue transition-colors","children":"Kontakt"}]}]]}]]}],["$","div",null,{"className":"space-y-4","children":[["$","h4",null,{"className":"font-display font-semibold text-lg text-white","children":"Rechtliches"}],["$","ul",null,{"className":"space-y-2 text-sm","children":[["$","li",null,{"children":["$","$L3",null,{"href":"/legal/imprint","className":"hover:text-blue transition-colors","children":"Impressum"}]}],["$","li",null,{"children":["$","$L3",null,{"href":"/legal/privacy","className":"hover:text-blue transition-colors","children":"Datenschutz"}]}],["$","li",null,{"children":["$","$L3",null,{"href":"/legal/terms","className":"hover:text-blue transition-colors","children":"AGB"}]}]]}]]}]]}],["$","div",null,{"className":"border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs","children":[["$","p",null,{"children":["© ",2026," smugo GmbH. Alle Rechte vorbehalten."]}],["$","div",null,{"className":"flex gap-6","children":[["$","span",null,{"children":"Trier, Deutschland"}],["$","span",null,{"children":"Luxemburg"}]]}]]}]]}]}]]}]}]],null],null],["$L8",null]]]] 8:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Core Web Vitals optimieren 2026: LCP, CLS & INP verbessern | smugo"}],["$","meta","3",{"name":"description","content":"Core Web Vitals direkt verbessern: Wir zeigen, wie Sie LCP unter 2,5s, CLS unter 0,1 und INP unter 200ms bringen – mit konkreten Maßnahmen für Next.js und WordPress."}],["$","meta","4",{"property":"og:title","content":"Core Web Vitals optimieren 2026: LCP, CLS & INP verbessern | smugo"}],["$","meta","5",{"property":"og:description","content":"Core Web Vitals direkt verbessern: Wir zeigen, wie Sie LCP unter 2,5s, CLS unter 0,1 und INP unter 200ms bringen – mit konkreten Maßnahmen für Next.js und WordPress."}],["$","meta","6",{"property":"og:type","content":"article"}],["$","meta","7",{"property":"article:published_time","content":"2026-02-18"}],["$","meta","8",{"property":"article:modified_time","content":"2026-02-18"}],["$","meta","9",{"name":"twitter:card","content":"summary"}],["$","meta","10",{"name":"twitter:title","content":"Core Web Vitals optimieren 2026: LCP, CLS & INP verbessern | smugo"}],["$","meta","11",{"name":"twitter:description","content":"Core Web Vitals direkt verbessern: Wir zeigen, wie Sie LCP unter 2,5s, CLS unter 0,1 und INP unter 200ms bringen – mit konkreten Maßnahmen für Next.js und WordPress."}],["$","link","12",{"rel":"icon","href":"/icon.jpg?ff2c3eaa9137e207","type":"image/jpeg","sizes":"420x420"}],["$","meta","13",{"name":"next-size-adjust"}]] 1:null