← Journal

28. August 2026·6 Min. Lesezeit

Shopify Core Web Vitals verbessern: Der Praxisguide

Core Web Vitals in Shopify verbessern: LCP, INP und CLS verstehen, richtig messen und mit konkreten Hebeln optimieren. Schwellenwerte, Tools und Checkliste.

Ein Shopify-Shop, der 4 Sekunden zum Laden braucht, verliert Käufer, bevor das erste Produkt sichtbar ist. Und Google misst genau das mit: die Core Web Vitals fließen in das Ranking ein und schlagen direkt auf deine Conversion durch.

In diesem Beitrag zeigen wir dir, was hinter den drei Werten LCP, INP und CLS steckt, wo Shopify-Shops typischerweise ausgebremst werden und mit welchen konkreten Hebeln du sie schneller machst. Am Ende findest du eine Checkliste zum Messen und Optimieren.

Was Core Web Vitals sind und warum sie zählen

Core Web Vitals sind drei Kennzahlen von Google, die die reale Nutzererfahrung einer Seite bewerten: wie schnell der Hauptinhalt erscheint, wie schnell die Seite auf Klicks reagiert und wie stabil das Layout bleibt. Sie sind Teil der Google-Bewertung für die Page Experience und damit ein Ranking-Faktor.

Für deinen Shop bedeutet das zwei Dinge. Erstens: Bei sonst gleichem Inhalt bevorzugt Google die schnellere Seite. Zweitens, und das wiegt oft schwerer: Jede Sekunde Ladezeit kostet Umsatz. Wer auf eine leere Seite starrt, springt ab, statt in den Warenkorb zu legen.

Der Effekt trifft dich doppelt. Ein langsamer Shop bekommt weniger organischen Traffic und verwandelt den vorhandenen Traffic schlechter. Genau deshalb behandeln wir Core Web Vitals nicht als SEO-Detail, sondern als Teil der Conversion-Optimierung.

Wichtig ist die Datengrundlage. Google bewertet die Werte am 75. Perzentil deiner echten Besucher. Vereinfacht: Wenn 75 Prozent deiner Seitenaufrufe die "gut"-Schwelle erreichen, gilt die Metrik als bestanden. Diese Feld-Daten stammen aus dem Chrome User Experience Report (CrUX) und können sich von deinem Test auf einem schnellen Laptop unterscheiden. Deshalb reicht ein einzelner Lighthouse-Lauf nie als Beleg. Mehr zur allgemeinen Ladezeit-Optimierung findest du in unserem Beitrag Shopify-Ladezeit optimieren.

LCP, INP und CLS: die drei Werte und ihre Schwellen

Die drei Metriken messen unterschiedliche Aspekte. Hier die aktuellen "gut"-Schwellen laut web.dev (Stand 2026):

  • LCP (Largest Contentful Paint) misst die Ladeleistung, also wann das größte sichtbare Element geladen ist, meist dein Hero-Bild oder die Produkt-Überschrift. Gut: 2,5 Sekunden oder schneller.
  • INP (Interaction to Next Paint) misst die Reaktionsschnelligkeit über den gesamten Besuch: Wie lange dauert es nach einem Klick, Tap oder Tastendruck, bis die Seite sichtbar reagiert? Gut: 200 Millisekunden oder schneller.
  • CLS (Cumulative Layout Shift) misst die visuelle Stabilität, also wie stark Elemente während des Ladens verrutschen. Gut: 0,1 oder niedriger.

INP hat im März 2024 den älteren Wert FID (First Input Delay) als offiziellen Core Web Vital abgelöst. Wenn du also noch mit FID rechnest, ist deine Grundlage veraltet. INP ist strenger, weil es alle Interaktionen einer Sitzung berücksichtigt, nicht nur die erste. Details dazu erklärt Google im Artikel zu INP.

Alle drei Werte hängen zusammen, folgen aber verschiedenen Ursachen. Ein langsames Bild betrifft LCP, zu viel JavaScript betrifft INP, ein nachträglich eingeblendetes Banner betrifft CLS. Deshalb lohnt es sich, jede Metrik einzeln anzugehen.

Wo Shopify-Shops am häufigsten bremsen

Bevor du optimierst, musst du die Bremsen kennen. In Shopify-Shops treten immer wieder dieselben Ursachen auf:

  • Zu viele Apps und Third-Party-Skripte. Jede App, jedes Tracking-Pixel und jedes Chat-Widget lädt eigenen Code. Zehn Apps bedeuten oft zehn zusätzliche Skripte, die INP verschlechtern.
  • Unoptimierte Bilder. Produkt- und Hero-Bilder im falschen Format oder in zu großer Auflösung sind der häufigste LCP-Killer.
  • Schwere Themes. Manche Themes bringen viele Funktionen mit, die du nie nutzt. Ungenutzter Code lädt trotzdem mit.
  • Render-blockierendes Liquid, CSS und JavaScript. Skripte im Kopf der Seite blockieren den Aufbau, bis sie geladen sind.
  • Slider oder Video im Hero. Ein automatischer Slider oder ein autoplay-Video ganz oben verzögert LCP und kann das Layout verschieben.
  • Schriftarten. Custom Fonts, die spät laden, führen zu Textsprüngen und damit zu CLS.

Nicht jede Bremse trifft jeden Shop. Deshalb kommt zuerst das Messen, dann das Handeln.

So misst du die Core Web Vitals deines Shops

Verlasse dich nicht auf ein Gefühl, sondern auf Daten. Nutze diese Werkzeuge in dieser Reihenfolge:

  1. PageSpeed Insights öffnen. Gib die URL deiner Startseite, einer Sammlung und einer Produktseite bei PageSpeed Insights ein. Oben siehst du die Feld-Daten aus CrUX, das sind deine echten Nutzerwerte. Darunter stehen die Labor-Daten aus Lighthouse.
  2. Feld-Daten priorisieren. Der Abschnitt "Ergebnisse aus der Praxis" zählt für dein Ranking. Fehlt er, hat deine Seite noch zu wenig Traffic für CrUX. Dann arbeitest du mit den Labor-Werten weiter.
  3. Lighthouse in den Chrome DevTools laufen lassen. Öffne die Seite im Inkognito-Modus ohne Browser-Erweiterungen, damit fremde Skripte das Ergebnis nicht verfälschen. Lighthouse zeigt dir konkrete Diagnosen, etwa welches Element dein LCP ist.
  4. Mobil testen. Der Großteil des Shop-Traffics ist mobil, und mobile Werte sind fast immer schlechter. Bewerte deinen Shop zuerst auf dem Handy-Profil.
  5. INP live prüfen. INP siehst du nur bei echter Interaktion. Klicke im Test durch Menü, Filter und Warenkorb. Die Web Vitals Chrome-Erweiterung zeigt die Werte in Echtzeit an.
  6. Shopifys eigenen Speed-Report einordnen. Der Geschwindigkeits-Bericht im Shopify-Admin gibt eine grobe Richtung, basiert aber auf Labor-Daten. Für das Ranking zählen die CrUX-Feld-Daten aus PageSpeed Insights.

Notiere die Ausgangswerte je Seitentyp. Nur so erkennst du später, ob eine Maßnahme wirklich etwas gebracht hat.

Konkrete Hebel je Metrik

Jetzt zur Umsetzung. Wir sortieren die Hebel nach Metrik, damit du gezielt an der schwächsten Stelle ansetzt.

LCP verbessern (Ziel: unter 2,5 s)

  • Komprimiere dein Hero-Bild und liefere es als WebP oder AVIF aus. Dimensioniere es exakt auf die Anzeigegröße, statt ein 4000-Pixel-Bild herunterzuskalieren.
  • Setze für das Hero-Bild fetchpriority="high" und lade es nicht "lazy". Für Bilder unterhalb der Falz bleibt Lazy Loading dagegen richtig.
  • Verzichte im Hero auf automatische Slider und autoplay-Videos. Ein statisches Bild lädt schneller und stabiler.
  • Reduziere render-blockierendes CSS und JavaScript. Lade nicht kritische Skripte mit defer oder async.

INP verbessern (Ziel: unter 200 ms)

  • Miste Apps aus. Deinstalliere, was du nicht aktiv nutzt, und prüfe, ob Reste im Theme-Code zurückbleiben.
  • Lade Third-Party-Skripte wie Chat, Reviews oder Analytics verzögert, idealerweise erst nach der ersten Interaktion.
  • Teile lange JavaScript-Aufgaben in kleinere Blöcke. So bleibt der Hauptthread frei für Nutzer-Klicks.
  • Prüfe schwere Elemente wie Mega-Menüs und Filter. Sie sind häufige INP-Verursacher.

CLS verbessern (Ziel: unter 0,1)

  • Gib jedem Bild und Video feste width- und height-Attribute, damit der Browser den Platz vorab reserviert.
  • Reserviere Raum für Ankündigungs-Banner, Cookie-Hinweise und App-Einblendungen, statt sie nachträglich einzuschieben.
  • Lade Schriften mit font-display: swap und einem passenden Fallback. Preloade die wichtigste Schrift.
  • Vermeide Inhalte, die sich erst nach dem Laden über bestehende Elemente schieben.

Arbeite die Hebel in der Reihenfolge deiner schlechtesten Metrik ab. Ein Shop mit gutem LCP, aber rotem INP, gewinnt nichts durch weitere Bild-Optimierung.

Checkliste: In 7 Schritten zu grünen Werten

Diese Reihenfolge hat sich in unseren Projekten bewährt:

  1. Messen. Startseite, Sammlung und Produktseite in PageSpeed Insights prüfen, mobil und Feld-Daten zuerst. Werte notieren.
  2. Schwächste Metrik bestimmen. Entscheide, ob LCP, INP oder CLS zuerst dran ist.
  3. Bilder aufräumen. Hero-Bild komprimieren, Format auf WebP oder AVIF, korrekte Maße, fetchpriority setzen.
  4. Apps prüfen. Ungenutzte Apps entfernen, verbliebene Skripte im Theme-Code aufräumen.
  5. Skripte entschärfen. Third-Party-Code verzögern, Nicht-Kritisches mit defer laden.
  6. Layout stabilisieren. Feste Bildmaße, reservierter Platz für Banner, Schriften mit Fallback.
  7. Erneut messen. Nach jeder Runde neu testen und mit den Ausgangswerten vergleichen. CrUX-Feld-Daten brauchen einige Wochen, bis sie die Verbesserung zeigen.

Wenn du an einem Punkt nicht weiterkommst oder das Theme tiefe Eingriffe braucht, buche ein kostenloses Erstgespräch mit Alpha Design. Wir optimieren Shopify-Shops gezielt auf die drei Metriken.

Fazit

Core Web Vitals sind kein abstrakter Google-Wert, sondern ein direkter Hebel für Ranking und Umsatz. Die drei Zielwerte sind klar: LCP unter 2,5 Sekunden, INP unter 200 Millisekunden, CLS unter 0,1, jeweils gemessen am 75. Perzentil deiner echten Besucher.

Der Weg dorthin ist Handwerk: erst messen, dann die schwächste Metrik gezielt angehen, dann erneut messen. Bilder, Apps und Layout sind bei den meisten Shopify-Shops die drei größten Hebel. Fang bei deinem größten Problem an, und wiederhole den Zyklus. Willst du das nicht selbst machen, sprich mit uns.