Core Web Vitals bei Shopify: So beheben Sie LCP, INP und CLS an der Ursache

Was sind Core Web Vitals und welche Schwellenwerte gelten 2026?

Datenquelle ist der Chrome User Experience Report (CrUX). Ein Lighthouse-Wert von 95 im Labor bedeutet nicht, dass die Smartphones Ihrer Kunden grün sehen. Der Großteil des Shopify-Traffics ist mobil, also zählt der mobile Datensatz.

Metrik	Was sie misst	Gut	Verbesserungswürdig	Schlecht
LCP (Largest Contentful Paint)	Zeit bis das größte Inhaltselement sichtbar ist	≤ 2,5 s	2,5 – 4,0 s	> 4,0 s
INP (Interaction to Next Paint)	Verzögerung bei Tipp-, Klick- und Tastatureingaben (schlechtester Wert des Besuchs)	≤ 200 ms	200 – 500 ms	> 500 ms
CLS (Cumulative Layout Shift)	Summe unerwarteter Layout-Verschiebungen	≤ 0,1	0,1 – 0,25	> 0,25

INP hat am 12. März 2024 FID (First Input Delay) abgelöst. FID maß nur die erste Interaktion; INP meldet die langsamste Interaktion des gesamten Besuchs. Deshalb ist INP die Metrik, die bei Shopify-Shops am häufigsten rot wird: Dutzende App-Skripte blockieren den Main Thread.

Der Umsatzeffekt von Geschwindigkeit ist gemessen, nicht geschätzt. Die Studie „Milliseconds Make Millions“ von Google und Deloitte über 37 Marken zeigt: Eine Verbesserung der mobilen Ladezeit um 0,1 Sekunden steigerte die Conversion im Handel um 8,4 %. Vodafone maß nach einer LCP-Verbesserung um 31 % einen Umsatzanstieg von 8 % (Fallstudie auf web.dev).

Was Sie bei Shopify ändern können und was nicht

Shopify ist eine gehostete Plattform. Server, CDN und Checkout gehören nicht Ihnen; Theme-Code, Bilder, Schriften und Apps dagegen vollständig. Ein realistischer Optimierungsplan beginnt mit dieser Trennung.

Ebene	Kontrolle	Was Sie tun können
Serverantwort (TTFB), CDN, HTTP/2 und HTTP/3	Shopify	Nichts; ist bereits gut aufgestellt
Checkout-Seiten	Shopify	Begrenzte Anpassung per Checkout Extensibility; Performance ist Sache von Shopify
Theme (Liquid, CSS, JS, Sections)	Sie	Der Großteil von LCP, CLS und INP wird hier gelöst
Bilder und Schriften	Sie	Größe, Format, Priorität und Ladestrategie
Apps und App-Embeds	Sie	Hauptursache für INP; entfernen und deaktivieren
Drittanbieter-Tags (Pixel, Chat, A/B-Tests)	Sie	Ladezeitpunkt und einwilligungsabhängiges Laden

Erst messen: Welche Metrik, welcher Seitentyp?

Nutzen Sie drei Datenquellen zusammen. Sich auf ein einziges Werkzeug zu verlassen, ist der häufigste Fehler bei Shopify.

1. Shopify-Admin → Onlineshop → Themes → Web-Performance. Shopifys eigener, CrUX-basierter Bericht. Zeigt LCP, CLS und INP Ihrer echten Besucher und vergleicht sie mit dem Shopify-Durchschnitt. Hier beginnen.
2. Google Search Console → Nutzererfahrung → Core Web Vitals. Zeigt, welche URL-Gruppen (Produktseiten, Kollektionen, Startseite) schlecht abschneiden. Bei Shopify ist das Problem meist seitentypspezifisch.
3. PageSpeed Insights. Oben Felddaten (CrUX), unten Labordiagnose. Die Abschnitte „LCP-Element“ und „Große Layout-Verschiebungen vermeiden“ zeigen genau, welches DOM-Element zu korrigieren ist.

Für INP reichen Laborwerkzeuge nicht; es braucht Interaktion. Nutzen Sie die Spur „Interactions“ im Performance-Panel der Chrome DevTools oder binden Sie vorübergehend den Attribution-Build der Bibliothek web-vitals ein, um das verantwortliche Skript zu protokollieren:

<script type="module">
import {onINP, onLCP, onCLS} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js';
const log = m => console.log(m.name, Math.round(m.value), m.attribution);
onINP(log); onLCP(log); onCLS(log);
</script>

LCP: Das Hero-Bild ab dem ersten Byte priorisieren

Bei Shopify-Shops ist das LCP-Element in neun von zehn Fällen das Hero-Bild auf der Startseite, das erste Produktbild einer Kollektion oder das Hauptfoto einer Produktseite. Vier Techniken genügen.

1. Die richtige Größe im modernen Format anfordern

Das Shopify-CDN konvertiert Bilder automatisch in WebP/AVIF, liefert aber nur dann die passende Größe, wenn Sie korrekte Werte für width und sizes übergeben. Ein 4.000-Pixel-Original an ein 390-Pixel-Smartphone zu senden, ist der häufigste LCP-Fehler.

{{ section.settings.image
   | image_url: width: 1600
   | image_tag:
       widths: '480, 768, 1024, 1366, 1600',
       sizes: '100vw',
       loading: 'eager',
       fetchpriority: 'high',
       preload: true,
       alt: section.settings.image.alt }}

preload: true lässt Shopifys image_tag-Filter ein <link rel="preload"> erzeugen; fetchpriority="high" weist den Browser an, dieses Bild vor allen anderen Ressourcen zu laden. Diese zwei Zeilen allein können den LCP um 0,5 bis 1,5 Sekunden senken.

2. Bilder im sichtbaren Bereich nie lazy laden

Dawn-basierte Themes liefern jedes Bild mit loading="lazy" aus. Setzen Sie Hero und erste Produktkarten auf eager. Ein lazy geladenes LCP-Bild beginnt erst mit dem Download, wenn der Browser das Layout berechnet hat.

3. Auf den Slider verzichten

Automatisch rotierende Hero-Slider verzögern den LCP, erzeugen CLS, und es gibt kaum gemessene Fälle, in denen sie die Conversion verbessern. Ein statisches Hero, eine klare Überschrift und ein einziger CTA ist das Muster mit der besten Performance bei Shopify.

4. Schriften und CSS aus dem Weg räumen

Ergänzen Sie Shopifys font_face-Filter um font_display: 'swap' und laden Sie die Schriftdatei per Preload. Vermeiden Sie externe Schriftdienste (auch Google Fonts); Shopifys eigene Schriftbibliothek kommt aus dem CDN ohne zusätzliche DNS-/TLS-Kosten.

{{ settings.type_header_font | font_face: font_display: 'swap' }}
<link rel="preload" as="font" type="font/woff2" crossorigin
      href="{{ settings.type_header_font | font_url }}">

INP: Die App-Skripte prüfen

INP-Probleme sind fast immer JavaScript, und bei Shopify stammt das meiste JavaScript aus Apps, die Sie nicht geschrieben haben. Jede installierte App fügt im Schnitt ein bis drei Skripte hinzu, manche mehr als zehn. Sie erzeugen Long Tasks (>50 ms) im Main Thread; tippt der Kunde auf „In den Warenkorb“, ist der Browser nicht frei.

Audit-Schritte

1. Alle Apps auflisten und markieren, welche in den letzten 90 Tagen wirklich genutzt wurden. Den Rest entfernen. Entfernen reicht nicht: Unter Onlineshop → Themes → Anpassen → App-Embeds die verbliebenen Embeds abschalten; manche Apps hinterlassen Code in theme.liquid.
2. theme.liquid und Layout-Dateien bereinigen. Nach <script>-Zeilen alter Apps suchen: alles mit cdn.shopify.com/extensions oder Skripte außerhalb von {{ content_for_header }}.
3. Messen und vergleichen. DevTools Performance → Aufzeichnung → auf „In den Warenkorb“ tippen → Spur „Interactions“ und Long Tasks ansehen. Der Dateiname verrät das verantwortliche Skript.
4. Den Rest verzögern. Eigenes Theme-JS mit defer, nicht dringende Arbeit in requestIdleCallback, Scroll- und Resize-Listener mit { passive: true }.

// Long Tasks aufteilen: schwere Arbeit nach der Interaktion
button.addEventListener('click', () => {
  updateCartUI();                       // sofort sichtbare Reaktion
  requestIdleCallback(() => {           // schwere Arbeit im Leerlauf
    trackAnalytics(); rebuildRecommendations();
  });
});

CLS: Für alles Platz reservieren

Layout-Verschiebungen haben drei Ursachen: Bilder ohne Maßangaben, nach dem Laden eingefügte Banner und Widgets sowie Schriftwechsel. Alle drei löst dasselbe Prinzip: den Platz vorab reservieren.

• Bilder: Der image_tag-Filter ergänzt width und height automatisch. Bei handgeschriebenen <img>-Tags nicht weglassen oder CSS aspect-ratio nutzen.
• Ankündigungsleisten und App-Widgets: Alles, was später ins DOM kommt (Versandkostenfrei-Leiste, Chat-Blase, Pop-up), schiebt den Inhalt darunter weg. Dem Container eine min-height geben; Pop-ups mit position: fixed aus dem Fluss halten.
• Schriftwechsel: font-display: swap löst die Sichtbarkeit, aber Schriften mit anderen Metriken verschieben Text weiterhin. Die Ersatzschrift mit size-adjust und ascent-override angleichen:

@font-face {
  font-family: "Fallback-Heading";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 22%;
}
h1, h2 { font-family: "Marken-Schrift", "Fallback-Heading", sans-serif; }

Auf Produktseiten erzeugt auch das Neuzeichnen der Galerie bei Variantenwahl CLS. Geben Sie dem Galerie-Container ein festes Seitenverhältnis und laden Sie Variantenbilder im gleichen Verhältnis hoch.

Shopify-spezifische Checkliste

Prüfpunkt	Metrik	Wo
Online Store 2.0 Theme (Dawn oder Ableger)	Alle	Themes
Hero-Bild: loading: 'eager', fetchpriority: 'high', preload: true	LCP	sections/image-banner.liquid
Erste 2–4 Produktkarten eager, Rest lazy	LCP	sections/main-collection-product-grid.liquid
widths + sizes bei jedem Bild	LCP, CLS	snippets/card-product.liquid
Ungenutzte Apps entfernt, App-Embeds aus	INP	Apps, Theme → App-Embeds
Keine verwaisten Skripte in theme.liquid	INP	layout/theme.liquid
Shopify-Schriften mit font_display: 'swap' + Preload	LCP, CLS	snippets oder layout
min-height für Ankündigungsleiste und Widgets	CLS	CSS
Pixel-, Chat- und A/B-Skripte nur mit Einwilligung laden	INP	Customer Events / GTM
Kein Hintergrundvideo auf der Startseite oder preload="none" + Poster	LCP	sections

Ranking- und Umsatzeffekt überprüfen

CrUX arbeitet mit einem rollierenden 28-Tage-Fenster; Änderungen sind erst nach 2 bis 4 Wochen vollständig sichtbar. Beobachten Sie in der Zwischenzeit zwei Dinge: die steigende Zahl „guter“ URLs in der Search Console und die mobile Conversion-Rate in Shopify Analytics. Planen Sie Performance-Arbeit zusammen mit Werbekampagnen; Traffic für einen Shop mit schlechtem INP einzukaufen, verschwendet einen Teil des Budgets.

Core Web Vitals sind nur ein Teil des technischen SEO. Zu strukturierten Daten und Conversion-Messung lesen Sie unseren Schema.org-JSON-LD-Leitfaden für E-Commerce und die Einrichtung von GA4 Consent Mode v2 und Meta CAPI.