Shopify-Performance: Die Ursache messen, nicht alles in WebP umwandeln
Ein langsamer Shop kann große Bilder, blockierende Skripte oder aufwendige Interaktionen haben. Die richtige Maßnahme hängt vom Befund ab. Eine pauschale Bildumwandlung oder das Entfernen beliebiger Theme-Dateien ist kein sicherer Arbeitsablauf.
Repräsentative Seiten messen
Prüfe Startseite, Collection und Produktdetailseite unter vergleichbaren Bedingungen. Kombiniere PageSpeed Insights beziehungsweise Lighthouse mit verfügbaren Felddaten. Einzelne Labormessungen schwanken; sie sind Diagnosehilfen, keine garantierte Nutzererfahrung.
Die aktuellen Core Web Vitals sind:
- LCP: Ladezeit des größten sichtbaren Inhaltselements.
- INP: Reaktionsverhalten auf Interaktionen.
- CLS: unerwartete Layoutverschiebungen.
FID wurde durch INP ersetzt. Total Blocking Time ist eine Labormetrik und nicht dasselbe wie INP.
Bildausgabe vor Bildformat prüfen
Shopify liefert Bilder über sein CDN und unterstützt angepasste Größen sowie moderne Formate je nach Auslieferung. Prüfe im Netzwerkpanel, was tatsächlich geladen wird. Ein manuell exportiertes WebP ist nicht grundsätzlich besser als korrekt angeforderte CDN-Bilder.
Nutze die Liquid-Filter image_url und image_tag für passende Breiten und responsive Ausgabe. Ein schematisches Beispiel für ein Produktbild unterhalb des zuerst sichtbaren Bereichs:
{{ product.featured_image
| image_url: width: 1200
| image_tag: widths: '360, 720, 1200',
sizes: '(min-width: 990px) 50vw, 100vw',
loading: 'lazy'
}}
Passe Breiten und sizes an das tatsächliche Layout an. Verwende aussagekräftigen Alternativtext. Bildabmessungen helfen, Layoutsprünge zu vermeiden.
Das LCP-Bild anders behandeln
Das wichtige Bild im zuerst sichtbaren Bereich darf nicht pauschal lazy geladen werden. Prüfe gezieltes frühes Laden und gegebenenfalls Priorisierung. Lade nicht sämtliche Bilder vor; zu viele Preloads können wichtige Ressourcen verdrängen.
Behalte Qualität, Transparenz und Detailerkennung im Blick. Das kleinere Format ist nicht automatisch die bessere Produktdarstellung.
Apps und JavaScript untersuchen
Erstelle eine Liste geladener Skripte mit Herkunft und Zweck. Deaktiviere einen nicht benötigten Appblock zunächst in einer Theme-Kopie und vergleiche dieselbe Seite.
Setze async nicht wahllos: Es kann Ausführungsreihenfolgen ändern. defer eignet sich für viele nicht sofort benötigte Skripte, erfordert aber Funktionstests. Auch entfernte Apps können Integrationsreste hinterlassen.
Checkout und Datenschutzsteuerung folgen eigenen Shopify-Möglichkeiten; verschiebe Tracking nicht beliebig auf andere Seiten. Nach jeder Änderung Variantenwahl, Warenkorb, Suche und erlaubte Datenübermittlung kontrollieren.
Dokumentiere Messbedingungen und Änderungen. Performanceverbesserung unterstützt die Nutzung, verspricht aber weder pro Millisekunde zusätzliche Käufe noch einen bestimmten Rang in Google.