Core Web Vitals · 23. Juli 2026

Shopify Web Performance Dashboard: Wie man es liest und darauf reagiert

Das Shopify Web Performance Dashboard zeigt, wie echte Besucher Ihre Storefront in Core Web Vitals erleben. Verwenden Sie es, um herauszufinden, ob LCP, INP oder CLS den Käufern schadet, und führen Sie dann einen aus kostenloser Shopify-Geschwindigkeitstest , um die langsame Seite zu reproduzieren und die Fehlerbehebung zu bestätigen.

Schnelle Lösung mit Thunder

Wenn Ihr Dashboard nach App-Installationen, Theme-Änderungen oder medienintensiven Seitenaktualisierungen schlechte LCP-, INP- oder CLS-Werte anzeigt, bietet Ihnen Thunder einen schnellen ersten Durchgang, bevor Sie für die benutzerdefinierte Entwicklung bezahlen. Es optimiert automatisch Skripte von Drittanbietern, das Laden von Ressourcen, Bilder, Schriftarten und Storefront-Leistungsmuster.

Installieren Sie Thunder Siehe Funktionen

Was das Web Performance Dashboard von Shopify misst

Das Shopify-Dashboard misst die Storefront-Leistung anhand der drei Core Web Vitals: Größter Contentful Paint, Interaktion zum nächsten Paint und kumulative Layoutverschiebung. Shopifys eigene Hilfedokumentation beschreibt diese als Ladegeschwindigkeit, Interaktivität und visuelle Stabilität und besagt, dass die Berichte Desktop- und Mobilerlebnisse sowie die Auswirkungen von App-Installationen, Theme-Updates und Codeänderungen auf die Storefront zeigen.

That matters because most store owners test only the homepage in PageSpeed Insights. Real shoppers do not use your store that way. They land on product pages from ads, open collections from search, interact with filters, scroll product media, click sticky carts, and trigger review widgets. The Shopify Web Performance Dashboard helps you see those real paths.

Behandeln Sie das Dashboard als Ihren Felddatenkompass. Behandeln Google PageSpeed Insights für Shopify, Chrome DevTools und Thunders Geschwindigkeitstest als Diagnosetools. Das Dashboard zeigt Ihnen, wo das Geschäftsproblem liegt; Der Test sagt Ihnen, welche Anfrage, welches Skript, welches Bild oder welcher Layoutblock das Problem verursacht.

So lesen Sie LCP, INP und CLS in Shopify

Beginnen Sie mit dem Handy. Der Großteil des Shopify-Verkehrs ist mobil und mobile Geräte machen Theme- und App-Probleme schneller sichtbar als Desktop-Geräte. Eine Seite, die sich auf Ihrem MacBook sofort anfühlt, kann auf einem Mittelklasse-Telefon mit langsamerer CPU und instabilem Netzwerk immer noch fehlschlagen.

Metrisch Gutes Ziel Häufiger Shopify-Anlass Erste Aktion
LCP 2,5 s oder schneller Spätes Hero-Bild, renderblockierendes CSS, App-Skripte, langsame Themenabschnitte Überprüfen Sie das größte Above-the-Fold-Element der Seite
INP 200 ms oder schneller Umfangreiche Bewertungs-Widgets, Analysepixel, Filter, Warenkorb-Schubladencode Finden Sie lange Aufgaben und Skripte von Drittanbietern
CLS 0,1 oder niedriger Fehlende Bildabmessungen, Banner, Popups, Rezensionen, eingefügte App-Blöcke Reservieren Sie Speicherplatz, bevor Assets und Apps geladen werden

Wenn LCP auf Produktseiten schlecht ist, lesen Sie unsere Shopify LCP-Optimierungsleitfaden. Wenn INP das Problem ist, beginnen Sie mit den in unserem behandelten Skripten und Event-Handlern Shopify INP-Leitfaden. Wenn die Seite springt, verwenden Sie unsere Shopify CLS-Korrekturanleitung.

Build a Practical Action Plan from the Dashboard

Öffnen Sie nicht das Dashboard und versuchen Sie nicht, alles auf einmal zu reparieren. Erstellen Sie eine kurze Leistungswarteschlange. Wählen Sie eine fehlgeschlagene Metrik, einen Gerätetyp und einen hochwertigen Seitentyp aus. Ein LCP-Problem auf einer Produktseite mit Tausenden von mobilen Sitzungen übertrifft ein CLS-Problem auf einer Blogseite mit fast keinem Datenverkehr.

  1. Finden Sie die schwächste Metrik. Schlecht schlägt Mäßig, und das Mobilgerät übertrifft normalerweise den Desktop.
  2. Nach Seitentyp filtern. Separate Startseite, Produkt, Sammlung, Blog und Zielseite.
  3. Passen Sie den Zeitpunkt an Änderungen an. Suchen Sie nach App-Installationen, Theme-Veröffentlichungen, neuen Medienbereichen oder Code-Releases.
  4. Eine Seite reproduzieren. Testen Sie eine URL mit Thunders Geschwindigkeitstest und PageSpeed Insights.
  5. Beheben Sie die Ursache und warten Sie dann auf Felddaten. Labordaten können heute verbessert werden; Shopify-Berichtstrends können länger dauern.

Dieser Prozess hält Sie ehrlich. Das Shopify-Dashboard kann zwar anzeigen, dass etwas langsam ist, aber es kann nicht immer entscheiden, ob die richtige Lösung Bildkomprimierung, Codebereinigung, Skriptverzögerung oder das Löschen einer App ist. Deshalb kombiniert der beste Arbeitsablauf Felddaten, Labordiagnostik und einen sicheren Bereitstellungsprozess.

Manuelle Korrekturen vs. Thunder Fixes

Sie können Dashboard-Probleme manuell beheben, wenn Sie mit dem Bearbeiten von Themen, dem Testen des App-Verhaltens und dem Lesen von Browser-Leistungsspuren vertraut sind. Bei vielen Geschäften werden durch einen automatisierten Durchgang mit Thunder zunächst die üblichen Blocker entfernt, dann kann sich ein Entwickler nur noch auf die ungewöhnliche themenspezifische Arbeit konzentrieren.

Problem Manuelle Korrektur Donnerfix
App-Skripte beeinträchtigen INP Überprüfen Sie jedes Skript von Drittanbietern, verschieben Sie sichere Skripte, testen Sie Warenkörbe und Widgets. Optimiert automatisch das Laden von Skripten mit Shopify-App-kompatiblen Sicherheitsregeln.
Heldenbild schadet LCP Größe ändern, vorladen, Priorität festlegen, verzögertes Laden des LCP-Bildes vermeiden. Wendet Bild- und Ressourcenladeoptimierungen an, ohne jede Vorlage manuell zu bearbeiten.
Schriftarten blockieren das Rendern Schriftarten selbst hosten, kritische Gewichte vorladen, Schriftfamilien reduzieren. Verbessert das Laden von Schriftarten als Teil des breiteren Leistungsstapels.
Layout shifts from apps Reservieren Sie CSS-Platz für Banner, Rezensionen, Popups und Einbettungen. Reduziert häufige Schichtauslöser und hilft bei der Identifizierung von App-bezogenen Auswirkungen.

Sicherer manueller Workflow für Theme-Korrekturen

If you decide to fix the theme manually, duplicate the live theme first. Work against the duplicate, test the exact URL from the dashboard, then publish only after you confirm product media, variants, cart drawer, search, filters, reviews, popups, checkout links, and tracking still work.

Ein einfacher LCP-Fix für Heldenbilder könnte wie folgt aussehen: Laden Sie das „above-the-fold“-Bild vorab, stellen Sie sicher, dass es nicht verzögert geladen wird, und geben Sie dem Browser genügend Größeninformationen, um das Layout zu reservieren. 

<!-- In theme.liquid or a section rendered above the fold -->
<link rel="preload" as="image" href="/cdn/shop/files/hero.jpg" fetchpriority="high">

<img
  src="/cdn/shop/files/hero.jpg"
  width="1600"
  height="900"
  loading="eager"
  fetchpriority="high"
  alt="Produktbild des Homepage-Helden"
>

Das kann helfen, aber laden Sie nicht jedes Bild blind vor. Das Vorladen zu vieler Assets führt dazu, dass der Browser sich selbst bekämpft. Für einen tiefergehenden manuellen Prozess nutzen Sie unsere vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung.

Wann sollte ein Entwickler eingesetzt werden?

Beauftragen Sie einen Entwickler, wenn das Dashboard auf eine benutzerdefinierte Liquid-Architektur, duplizierten App-Code, defekte Theme-Abschnitte oder JavaScript hinweist, das umsatzkritisches Verhalten steuert. Eine Speed-App kann gängige Optimierungen automatisieren, sollte sich jedoch nicht durch einen benutzerdefinierten Konfigurator, ein Abonnement-Widget oder einen stark modifizierten Warenkorb schleichen.

Die effiziente Reihenfolge lautet: Testen Sie den Store, installieren Sie Thunder für die sicheren automatischen Korrekturen und beauftragen Sie dann nur für die verbleibenden Engpässe Hilfe. Dadurch bleibt die Entwicklerzeit auf die Arbeit konzentriert, die tatsächlich einen Menschen erfordert. Wenn Sie diesen Weg benötigen, sehen Sie sich unseren an professioneller Shopify-Geschwindigkeitsoptimierungsservice.

FAQ

Was ist das Shopify Web Performance Dashboard?

Das Shopify Web Performance Dashboard ist eine Reihe von Berichten im Shopify-Adminbereich, die die Core Web Vitals echter Benutzer für Ihre Storefront anzeigen. Der Schwerpunkt liegt auf Ladegeschwindigkeit, Interaktivität und visueller Stabilität durch LCP, INP und CLS.

Warum zeigt Shopify andere Zahlen an als PageSpeed ​​Insights?

Shopify reports real user data from your store visitors, while PageSpeed Insights can show both lab data and Chrome field data. The numbers differ when traffic mix, devices, countries, or page samples differ.

Welche Metrik sollte ich zuerst im Shopify Web Performance Dashboard korrigieren?

Beheben Sie zuerst schlechte Metriken und beginnen Sie dann mit dem Seitentyp, der die meisten mobilen Sitzungen erhält. Für viele Shopify-Shops bedeutet das Produktseiten mit schlechtem LCP, Sammlungsseiten mit schlechtem INP oder Seiten mit App-bezogenem CLS.

Kann eine Shopify-Speed-App das Web Performance Dashboard verbessern?

Ja, wenn die App auf die im Dashboard angezeigten Engpässe abzielt. Thunder hilft beim Laden von Skripten, der Bildbereitstellung, den Auswirkungen auf die App, dem Lazy Loading, dem Laden von Schriftarten und anderen häufigen Ursachen für schlechtes LCP, INP und CLS.

Wie lange dauert die Aktualisierung der Shopify Web Performance Dashboard-Daten?

Laut Shopify können sich Berichtsdaten um bis zu 36 Stunden verzögern und Web-Leistungsdaten decken die letzten 90 Tage ab. Betrachten Sie es als Trendbericht und nicht als sofortiges Bestätigungstool.

Brauche ich trotzdem einen Geschwindigkeitstest, wenn Shopify über das Dashboard verfügt?

Ja. Das Dashboard zeigt Ihnen, was echte Benutzer im Laufe der Zeit erleben. Ein Geschwindigkeitstest hilft Ihnen, eine bestimmte Seite zu reproduzieren, Labordiagnosen zu überprüfen und zu bestätigen, welcher Code oder welches Asset das Problem verursacht.

Fazit

Das Shopify Web Performance Dashboard ist am nützlichsten, wenn Sie es in eine kurze Korrekturwarteschlange umwandeln: Metrik, Seitentyp, Ursache, Aktion, erneuter Test. Benutze es mit unser Core Web Vitals-Leitfaden für Shopify, validieren Sie URLs in einem Geschwindigkeitstest und überlassen Sie Thunder die wiederholbaren Leistungskorrekturen, bevor Sie Zeit für die benutzerdefinierte Entwicklung aufwenden.