Kostenlos testen Shopify Core Web Vitals: Was LCP, INP und CLS messen und wie Sie sie bestehen
Core Web Vitals sind die drei Messwerte, mit denen Google bewertet, wie sich eine Seite für echte Kunden anfühlt: LCP (wie schnell der Hauptinhalt erscheint, gut bei 2,5 Sekunden oder weniger), INP (wie schnell die Seite auf einen Tipp reagiert, gut bei 200 Millisekunden oder weniger) und CLS (wie stark das Layout springt, gut bei 0,1 oder weniger). Google wertet sie beim 75. Perzentil der echten Besuche der letzten 28 Tage aus. Bei Shopify sind die üblichen Ursachen App-Skripte, ein schweres Hero-Bild, Webfonts und Theme-Code.
- 7 Tage kostenlos
- Ohne Code
- Jederzeit kündbar
Die drei Core Web Vitals und ihre Grenzwerte
Google bewertet jeden Messwert beim 75. Perzentil der echten Besuche: Drei von vier Besuchen müssen im guten Bereich liegen. Mobilgeräte und Desktop werden getrennt bewertet, und eine Seite besteht, wenn alle drei Werte gut sind.
| Messwert | Was er misst | Gut | Optimierung erforderlich | Schlecht |
|---|---|---|---|---|
| LCP | Laden: Zeit, bis das größte Element auf dem Bildschirm erscheint | 2,5 s oder weniger | 2,5 bis 4 s | über 4 s |
| INP | Reaktion: Zeit, bis ein Tipp eine sichtbare Antwort zeigt | 200 ms oder weniger | 200 bis 500 ms | über 500 ms |
| CLS | Stabilität: wie stark die Seite beim Laden springt | 0,1 oder weniger | 0,1 bis 0,25 | über 0,25 |
LCP
Largest Contentful Paint (größtes sichtbares Element)
In einem Shopify-Shop ist das LCP-Element fast immer das Hero-Bild der Startseite oder das erste Produktfoto. Alles, was davor lädt (App-Skripte, Schriften, Theme-JavaScript, weitere Bilder einer Slideshow), verschiebt den LCP nach hinten.
INP
Interaction to Next Paint (Reaktionszeit)
INP hat im März 2024 First Input Delay abgelöst. Es misst die langsamsten Interaktionen eines Besuchs: eine Variante wählen, das Menü öffnen, In den Warenkorb tippen. Halten App- und Theme-Skripte den Browser beschäftigt, wartet der Tipp in der Schlange und die Seite wirkt eingefroren.
CLS
Cumulative Layout Shift (visuelle Stabilität)
CLS ist ein Wert, keine Zeit. Bei Shopify entsteht er meist durch Elemente, die spät kommen und die Seite nach unten schieben: eine Ankündigungsleiste, Bewertungssterne, ein Ratenkauf-Hinweis, ein Cookie-Banner, ein App-Block oder Bilder ohne feste Breite und Höhe.
Warum Shopify-Shops die Core Web Vitals nicht bestehen
Die Server und das Bild-CDN von Shopify sind schnell. Was einen Shop ausbremst, ist meist das, was zusätzlich zum Theme hinzukommt, und die Reihenfolge, in der es lädt.
App-Skripte
Jede App, die im Shop etwas anzeigt (Bewertungen, Chat, Popups, Upsells, Tracker), bringt ihr eigenes JavaScript mit. Der Browser lädt und führt es aus, oft vor dem Produktfoto. Das bremst den LCP und hält den Browser beschäftigt, wenn Kunden tippen, was den INP verschlechtert.
Ein schweres Hero-Bild oder eine Slideshow
Das Hero-Bild ist meist das LCP-Element. Eine große Datei, eine Slideshow, die mehrere Bilder auf einmal lädt, ein Hintergrundvideo oder ein Hero mit Lazy Loading lassen den Hauptinhalt später erscheinen.
Webfonts
Jede Schriftstärke einer eigenen Schrift ist eine weitere Datei. Text kann unsichtbar bleiben, bis sie da ist, und beim Austausch der Schrift können Zeilen umbrechen und den CLS erhöhen.
Theme-JavaScript
Mega-Menüs, Schnellansichten, Slider, Scroll-Animationen und ältere Themes auf großen Bibliotheken führen alle Code im Hauptthread aus. Je mehr davon gleichzeitig läuft, desto langsamer reagiert die Seite.
Drittanbieter-Tags
Analytics, Werbepixel, Heatmaps und Tag-Manager, die in Theme-Dateien eingefügt wurden, laden auf jeder Seite. Doppelte Tags sind häufig, etwa dasselbe Analytics-Tag einmal per App und einmal von Hand.
Code-Reste alter Apps
Manche Apps fügen dem Theme Code-Snippets hinzu, die nach der Deinstallation bleiben. Die App ist weg, ihr Skript lädt aber womöglich weiter auf jeder Seite.
So prüfen Sie die Core Web Vitals Ihres Shops
-
PageSpeed Insights: zuerst die obere Hälfte lesen
Der obere Bereich zeigt Felddaten: echte Chrome-Besuche Ihres Shops der letzten 28 Tage und ob die Seite besteht. Das ist, was Google verwendet. Der Performance-Wert von 0 bis 100 darunter ist ein Labortest auf einem simulierten Smartphone. Er hilft bei der Fehlersuche, ist aber nicht Ihr Core-Web-Vitals-Ergebnis.
-
Search Console: alle Seiten auf einen Blick
Der Core-Web-Vitals-Bericht ordnet Ihre URLs in Gut, Optimierung erforderlich und Schlecht ein, getrennt für Mobilgeräte und Desktop, und nennt den Messwert, der nicht besteht. Nach einer Korrektur klicken Sie auf Korrektur überprüfen, und Google prüft die Seiten in den folgenden 28 Tagen erneut.
-
Der Web-Performance-Bericht von Shopify
Der Shopify-Admin hat einen eigenen Web-Performance-Bericht mit LCP, INP und CLS aus den Besuchen Ihres Shops. Praktisch, wenn Ihr Shop zu wenig Traffic hat, damit Google Felddaten zeigt.
-
Das kostenlose Speed-Audit von Whoosh
Geben Sie die Adresse Ihres Shops ein, und das Audit zeigt, welche Apps auf Ihren Seiten laden und was sie ausbremst. Ohne Installation, ohne Code.
Core Web Vitals bei Shopify verbessern, nach Wirkung sortiert
Beginnen Sie oben. Jeden Schritt können Händler ohne Entwicklungsaufwand umsetzen, und die ersten helfen allen drei Messwerten.
-
Entfernen Sie Apps, die Sie nicht mehr nutzen
Suchen Sie danach im Theme-Code nach dem Namen der alten App: übrig gebliebene Snippets laden womöglich weiter. Weniger Skripte helfen allen drei Messwerten.
-
Laden Sie sichtbare Apps zuerst, der Rest wartet
Chat, Tracker, Bewertungs-Widgets weiter unten auf der Seite und Popups müssen nicht vor dem Produktfoto laden. Wenn sie warten, hat der Browser Zeit für das Foto (LCP) und für die Tipps Ihrer Kunden (INP).
-
Optimieren Sie das Hero-Bild
Nutzen Sie auf Mobilgeräten ein einzelnes Bild statt einer Slideshow, laden Sie es in sinnvoller Größe hoch und stellen Sie sicher, dass das erste Bild der Seite kein Lazy Loading hat. Aktuelle Shopify-Themes liefern dann für jeden Bildschirm die passende Größe.
-
Reservieren Sie Platz für spät geladene Elemente
Geben Sie Bildern Breite und Höhe, und App-Blöcken, Bewertungssternen und Bannern einen festen Platz im Layout, damit sie eine Lücke füllen, statt die Seite nach unten zu schieben. Das ist die wichtigste CLS-Korrektur.
-
Weniger Schriften und Schriftstärken
Ein oder zwei Stärken einer Schrift oder eine Systemschrift reichen oft aus. Schriften aus der Shopify-Schriftbibliothek liefert Shopify selbst aus, und weniger Dateien bedeuten, dass Text früher erscheint und weniger springt.
-
Räumen Sie Drittanbieter-Tags auf
Entfernen Sie doppelte Analytics-Tags und Pixel, und verlagern Sie Tracking wo möglich aus den Theme-Dateien in die Kundenereignisse von Shopify oder die offiziellen Kanal-Apps.
-
Halten Sie das Theme aktuell und sparen Sie an Effekten
Theme-Updates enthalten oft Geschwindigkeitsverbesserungen. Automatisch startende Videos im Hero, Parallax und Scroll-Animationen kosten bei jedem Besuch Zeit.
-
Messen Sie nach 28 Tagen erneut
Felddaten decken die letzten 28 Tage ab, eine Korrektur zeigt sich also schrittweise. Vergleichen Sie Gleiches mit Gleichem: dieselben Seiten, auf Mobilgeräten, in den Felddaten.
Wo Whoosh hilft
Whoosh ist eine Shopify-App, die den Teil der Liste, der von App-Skripten kommt, automatisch löst. Die anderen Korrekturen ersetzt sie nicht.
Was es tut
- Smart App Loading lädt zuerst die Apps, die Kunden sehen, und lässt Chat, Tracker, Bewertungs-Tools und Popups warten. So ist das Produktfoto früher zu sehen und die Seite kann schneller auf Tipps reagieren.
- AI Page Preloading lädt die nächste Seite, bevor Kunden tippen, sodass sie ohne Wartezeit öffnet.
- Ohne Code und ohne Theme-Änderungen. Aus dem Shopify App Store installieren, und es ist sofort aktiv.
Was es nicht tut
- Es schreibt Ihr Theme nicht um, komprimiert keine Bilder und ändert keine Schriften. Diese Korrekturen bleiben Ihre Aufgabe.
- Es macht Ihre Apps selbst nicht schneller. Es ändert die Reihenfolge, in der sie ankommen.
- Checkout und Kundenkonto lässt es in Ruhe. Der Checkout läuft über Shopify.
Das Ergebnis sehen Sie im Dashboard, aus einem 50/50-Test in Ihren ersten Wochen: Kunden mit Whoosh im Vergleich zu Kunden ohne.
Sehen, was Ihren Shop bremst: kostenloses Audit Shopify-Speed-Apps im Vergleich (auf Englisch)
Smart App Loading: 99 US$ pro Monat
Testen Sie 7 Tage kostenlos. Abgerechnet wird über Shopify, kündbar jederzeit in Shopify. Sie möchten auch AI Page Preloading? Whoosh Max enthält beides für 149 US$ pro Monat.
Fragen zu Shopify Core Web Vitals
Welche Core-Web-Vitals-Werte sind für einen Shopify-Shop gut?
Dieselben wie für jede Website: LCP von 2,5 Sekunden oder weniger, INP von 200 Millisekunden oder weniger und CLS von 0,1 oder weniger. Google misst jeden Wert beim 75. Perzentil der echten Besuche der letzten 28 Tage, getrennt für Mobilgeräte und Desktop. Eine Seite besteht, wenn alle drei gut sind.
Warum besteht mein Shopify-Shop die Core Web Vitals nicht?
Die üblichen Ursachen sind App-Skripte, die vor dem Produktfoto laden, ein schweres Hero-Bild oder eine Slideshow, mehrere Webfonts, Theme-JavaScript, ins Theme eingefügte Drittanbieter-Tags und Code-Reste deinstallierter Apps. Der Core-Web-Vitals-Bericht in der Search Console zeigt, welcher Messwert nicht besteht, und grenzt die Ursache ein.
Ist der PageSpeed-Insights-Wert dasselbe wie die Core Web Vitals?
Nein. Der Performance-Wert von 0 bis 100 ist ein Labortest auf einem simulierten Smartphone. Ihr Core-Web-Vitals-Ergebnis sind die Felddaten oben im Bericht, aus echten Besuchen der letzten 28 Tage, und die verwendet Google. Ein Shop kann einen niedrigen Laborwert haben und trotzdem bestehen, oder umgekehrt.
Beeinflussen Core Web Vitals das Google-Ranking?
Ja, als eines der Page-Experience-Signale, die die Ranking-Systeme von Google nutzen. Hilfreiche, relevante Inhalte zählen mehr, Bestehen allein hebt eine Seite also nicht nach oben. Ein langsamer Shop verliert aber Kunden vor dem Kauf, egal wie er rankt.
Wie lange dauert es, bis eine Korrektur in den Core Web Vitals sichtbar wird?
Bis zu etwa vier Wochen. Die Felddaten in PageSpeed Insights und der Search Console decken die letzten 28 Tage ab und ändern sich schrittweise, während neue Besuche alte ersetzen. Der Web-Performance-Bericht von Shopify und Labortests zeigen eine Änderung früher.
Kann eine Shopify-App die Core Web Vitals verbessern?
Eine App kann einen Teil davon lösen. Smart App Loading von Whoosh löst den Teil, der von App-Skripten kommt: Es lädt zuerst die Apps, die Kunden sehen, und lässt den Rest warten. Keine App kann ein zu groß hochgeladenes Bild verkleinern oder Ihr Theme für Sie umschreiben. Seien Sie vorsichtig bei allem, was den Laborwert hebt, ohne zu ändern, was echte Kunden erleben, denn Google nutzt echte Besuche.
Verändert Whoosh mein Theme oder den Checkout?
Nein. Whoosh verändert Ihr Theme nicht. Es steuert, wann Apps laden, nicht wie das Theme aufgebaut ist, und lässt Checkout und Kundenkonto in Ruhe. Der Checkout läuft über Shopify.
Noch Fragen?
Die Antwort finden Sie in unserem Hilfe-Center (auf Englisch).
