Shopify-Entwickler in Dresden

Ich arbeite als Einzelentwickler, remote und schriftlich. Diese Seite beschreibt, wie ich vorgehe, wenn ein Shopify-Shop in Dresden langsam wirkt: erst messen, dann die Ursache eingrenzen, dann gezielt ändern. Alle Angaben zu Shopify stammen aus der Shopify-Hilfe und aus shopify.dev, die Schwellenwerte von web.dev.

Dresdens Kultur- und Kreativwirtschaft umfasste laut Monitoring-Bericht, den die Landeshauptstadt Dresden auf ihrer Wirtschaftsseite zusammenfasst, 2024 rund 2.300 Unternehmen und Selbständige. Die Software- und Games-Industrie ist dort der umsatzstärkste Teilmarkt. Die Stadt beschreibt die Branche als deutlich kleinteiliger organisiert als klassische Industriezweige. Für solche Shops beschreibe ich hier, wie ich die Geschwindigkeit eines Shopify-Themes prüfe.

#Was misst Shopify überhaupt?

Shopify misst Geschwindigkeit mit den Core Web Vitals aus echten Besuchen. Nach der Shopify-Hilfe zu den Web-Performance-Berichten zeigt die Leistungsübersicht auf der Themes-Seite im Admin die drei Kennzahlen der letzten 30 Tage. Die Daten können bis zu 36 Stunden verzögert sein und sind 90 Tage lang abrufbar. Die ausführlichen Berichte finden Sie unter Analysen und Berichte. Für jede Kennzahl gibt es Berichte im Zeitverlauf, nach Seitentyp und nach Seiten-URL.

Die Grenzen für “gut” stehen im Artikel von web.dev, und Shopify übernimmt sie:

Maßgeblich ist das 75. Perzentil der Seitenaufrufe, web.dev empfiehlt die Auswertung getrennt für Mobil und Desktop. Die Berichte helfen auf dem Weg zur Ursache: Der Verlauf zeigt, wann sich ein Wert verschlechtert hat, und Shopify markiert dort Änderungen wie App-Installationen und Theme-Updates. Der Seitentyp-Bericht zeigt, ob eher die Startseite, die Kollektion oder die Produktseite auffällt. Der URL-Bericht nennt die einzelne Seite.

Dazu kommt eine Unterscheidung aus dem Leitfaden zu Labor- und Felddaten: Felddaten finden das Problem, Labordaten wie Lighthouse oder WebPageTest suchen die Ursache, und nach der Änderung entscheiden wieder die Felddaten. INP hat laut Shopify kein Labor-Gegenstück, weil es von echten Interaktionen abhängt. Auch das Fenster zählt: CrUX meldet ein gleitendes Fenster von 28 Tagen, eine Korrektur zeigt sich also erst nach Wochen vollständig.

Foto: Romzig, CC0, Wikimedia Commons.

#Was bremst ein Shopify-Shop wirklich?

Die Shopify-Hilfe zur Shop-Geschwindigkeit nennt drei Hauptfaktoren: das Theme, die installierten Apps und zusätzlich eingebauter Drittanbieter-Code, ausdrücklich auch Tag-Manager samt der Tags darin. Serverseitige Dinge wie CDN, Komprimierung und Browser-Cache übernimmt Shopify selbst. Entsprechende Hinweise von Prüfwerkzeugen treffen auf einen Shopify-Shop meist nicht zu. Wichtig sind die Bilder, die Skripte und der Theme-Code.

Aus dem Performance-Leitfaden für Themes ergeben sich diese vier Bereiche:

#Wie liefert das Theme Bilder aus?

Bilder sind meist das größte sichtbare Element, also der LCP. Der Filter image_url liefert die CDN-Adresse eines Bildes. Nach der Dokumentation braucht er Breite oder Höhe, sonst gibt es einen Fehler, und ein Bild wird nie größer als das Original ausgeliefert. Mit image_tag entsteht daraus ein vollständiges img mit srcset, width und height. Die Maße verhindern Layoutverschiebung. So sieht das Muster aus den Shopify-Hinweisen zu responsiven Bildern aus:

{{ product.featured_image
  | image_url: width: 1000
  | image_tag:
      widths: '400, 600, 800, 1000',
      sizes: '(min-width: 1000px) 900px, calc(100vw - 2rem)'
}}

Der Browser wählt dann das kleinste passende Bild. Shopify rät zu vier bis sechs Breiten, mehr schadet dem Caching.

Beim Hauptbild gilt das Gegenteil von Lazy Loading. Shopify nennt ein lazy geladenes LCP-Bild (Seite dazu) einen der häufigsten Fehler in Themes. image_tag lädt Bilder in den Sections 1 bis 3 eager und ab Section 4 lazy, solange Sie das Attribut nicht selbst setzen. Bibliotheken wie lazysizes ersetzen src durch data-src und verstecken die Adresse damit vor dem Preload-Scanner des Browsers. Für das eine Bild, das sicher im ersten Bildschirm liegt, kommt fetchpriority: 'high' dazu, und zwar nur dort. Ein Hero als CSS-Hintergrund entdeckt der Preload-Scanner später als ein img im HTML.

#Welche Liquid-Muster verlängern die Serverzeit?

Shopify rendert Liquid bei jedem Seitenaufruf auf dem Server, und diese Zeit steht am Anfang jedes Ladevorgangs. Der Leitfaden nennt verschachtelte Schleifen die häufigste Ursache für hohe Serverzeit. Mit 10 Produkten zu je 10 Varianten sind es 100 Durchläufe, mit 50 Produkten 500. Ein Theme, das im Test mit wenigen Produkten schnell war, kann bei einem größeren Sortiment langsam werden.

Drei Muster aus den Shopify-Seiten behebe ich am häufigsten:

• Suche in der Schleife ersetzen. Statt für jede Kollektion alle Produkte zu durchlaufen und zu prüfen, ob eines verfügbar ist, holt where mit first den Treffer in einem Filteraufruf (Seite dazu).
• Metafields einmal lesen. Ein Metafield, das sich zwischen den Durchläufen nicht ändert, gehört vor die Schleife in eine Variable. Metafield-Zugriffe in verschachtelten Schleifen können nach Shopify Sekunden zur Serverzeit addieren (Seite dazu).
• Nur laden, was erscheint. Für collection.products und collections reduziert limit die Abfrage. Eine Zeile mit vier Produkten holt dann vier statt bis zu 50 (Seite dazu). Ein Optionswähler braucht meist nicht alle Varianten, product.options_with_values reicht oft aus (Seite dazu).

Welche Zeile im Theme die Zeit kostet, zeigt der Shopify Theme Inspector für Chrome, den der Leitfaden dafür nennt. Ich messe damit, bevor ich etwas ändere.

#Was machen Apps und Drittanbieter-Tags mit der Seite?

Der Leitfaden nennt das Entfernen und Aufräumen unnötiger Skripte die wirkungsvollste Maßnahme für die Reaktionsfähigkeit. Typische Kandidaten sind doppelte Analyse-Anbieter, A/B-Test-Werkzeuge, Chat-Widgets, Bewertungs-Apps, die ihr Skript auf jeder Seite laden, und Marketing-Pixel. Zwei Punkte aus der Anleitung gehören in jede Prüfung:

• Eine App im Admin zu deinstallieren entfernt ihren Code nicht immer aus dem Theme. Skript-Tags, Stylesheet-Links und Snippets können bleiben und werden dann weiter geladen.
• Skripte, die bleiben sollen, lade ich nur dort, wo sie gebraucht werden. Ein Bewertungs-Widget gehört zum Beispiel nur auf die Produktseite.

Eigene Skripte im Theme bekommen defer, unabhängige Drittanbieter-Skripte wie Zählpixel gegebenenfalls async. Für App-Inhalte, die nachladen, reserviert der Leitfaden Platz per min-height am App-Block, damit die Seite nicht springt. Cookie-Banner und Chat-Blasen kommen dagegen aus App-Embeds. Dort hilft nach Shopify eine feste Position statt reservierter Fläche.

Wie Apps ins Theme gelangen und was Sie vor der Deinstallation prüfen, beschreibe ich ausführlich auf der Seite für Wuppertal. Dort steht auch, wie sich der Einfluss einer einzelnen App messen lässt.

Tags betreffen auch das Recht. Nach § 25 TDDDG ist das Speichern von oder der Zugriff auf Informationen im Endgerät nur mit Einwilligung zulässig, außer wenn es für einen ausdrücklich gewünschten Dienst unbedingt erforderlich ist. Für Dresdner Shops ist die Sächsische Datenschutz- und Transparenzbeauftragte die Datenschutzaufsicht, ihre Seite finden Sie unter saechsdsb.de. Ein Tag, der erst nach der Einwilligung lädt, belastet Besucher ohne Einwilligung nicht. Welche Tags das betrifft, klären wir in der Inventur, die rechtliche Bewertung bleibt bei Ihnen oder Ihrer Beratung.

#Wie halten Theme Check und Lighthouse CI das Ergebnis fest?

Theme Check ist der Linter von Shopify für Liquid und JSON im Theme. Er läuft mit shopify theme check. Nach der Seite zur Geschwindigkeit findet er unter anderem Skripte ohne defer oder async (ParserBlockingScript), Dateien von fremden Domains (RemoteAsset), img-Tags ohne width und height (ImgWidthAndHeight) und zu große Seitenlängen bei der Paginierung. Die Prüfungen für die Dateigröße von CSS und JavaScript sind nicht Teil der empfohlenen Konfiguration. Wie ich Theme Check in den Arbeitsablauf einbinde, steht auf der Seite für Münster.

Für wiederholbare Messungen gibt es die Shopify-Lighthouse-CI-Action. Sie führt bei jedem Pull Request einen Lighthouse-Test für Startseite, Produktseite und Kollektionsseite aus. Sie braucht einen eigenen Entwicklungs-Shop mit den Testdaten von Shopify, damit die Werte vergleichbar bleiben. Der Standard verlangt mindestens 0,6 bei Performance und 0,9 bei Barrierefreiheit, beides lässt sich anpassen. Ein Lighthouse-Lauf ist ein Laborwert mit simulierter Drosselung und ersetzt nicht den Blick auf die Felddaten. Er fängt aber Rückschritte ab, bevor sie live gehen.

#Wie läuft eine Geschwindigkeitsprüfung mit mir ab?

1. Anfrage. Sie schicken mir die Shop-Adresse, das Ziel und Ihren Termin. Ich antworte schriftlich.
2. Zugang. Sie geben mir Collaborator-Zugang und, falls nötig, die Mitarbeiterberechtigung für Berichte. Eine Skizze oder Tabelle für etwaige neue Bereiche liefern Sie.
3. Ausgangslage. Ich halte die Felddaten nach Kennzahl, Seitentyp und Gerät schriftlich fest, bevor ich etwas ändere.
4. Befund. Sie erhalten eine Liste: was im Theme, was bei Apps, was bei Tags bremst, mit der Quelle der Shopify-Empfehlung zu jedem Punkt.
5. Änderung. Ich arbeite in einer Kopie des Themes, nicht im Live-Theme. Sie prüfen und veröffentlichen.
6. Kontrolle. Nach dem Berichtszeitraum vergleiche ich die Felddaten. Zusagen für Zahlen gebe ich nicht, denn Gerät, Netz und Standort Ihrer Besucher liegen außerhalb des Themes.

Ich arbeite allein, remote und schriftlich, ohne Termine vor Ort. Entscheidungen über Apps und Tags treffen Sie, ich zeige, was sie kosten.

#Checkliste für Ihren Shop

#Häufige Fragen

#Wo sehe ich in Shopify, wie schnell mein Shop für echte Besucher ist?

Im Shopify-Admin unter Onlineshop zeigt die Leistungsübersicht die drei Core Web Vitals der letzten 30 Tage. Die ausführlichen Berichte liegen unter Analysen und Berichte. Sie brauchen die Mitarbeiterberechtigung für Berichte, und der Passwortschutz muss ausgeschaltet sein, sonst kommen keine Daten an.

#Warum zeigt PageSpeed Insights andere Werte als der Bericht in Shopify?

Shopify wertet Besuche aus allen Chromium-Browsern und aus Firefox aus, PageSpeed Insights nutzt die öffentlichen Chrome-Felddaten (CrUX) von Nutzern, die der Weitergabe zugestimmt haben. Dazu kommt ein gleitendes Fenster von 28 Tagen bei CrUX. Ein Unterschied ist deshalb normal. Entscheidend ist, dass Sie beim Vergleich vorher und nachher dieselbe Quelle nutzen.

#Was bremst ein Shopify-Theme am häufigsten?

Nach der Shopify-Hilfe sind es das Theme selbst, installierte Apps und zusätzlich eingebauter Drittanbieter-Code wie Tag-Manager. Im Theme kommen große oder falsch ausgelieferte Bilder, ein lazy geladenes Hauptbild und Liquid-Schleifen hinzu, die mit dem Sortiment wachsen. Welcher Punkt bei Ihnen zählt, zeigt erst die Messung.

#Sagt der Lighthouse-Wert aus dem Theme Store etwas über meinen Shop?

Nur begrenzt. Shopify prüft Themes auf einem Benchmark-Shop; ein Theme braucht dort im Mittel mindestens 60 Punkte, um aufgenommen zu werden. Ihr Shop hat andere Bilder, Apps und Tags. Wie echte Besucher ihn erleben, zeigen die Felddaten im Bericht.

#Muss ich Bilder vor dem Hochladen verkleinern?

Das Theme bestimmt über image_url, in welcher Breite ein Bild ausgeliefert wird, und kein Bild wird größer als das Original. Die Shopify-Hilfe rät trotzdem, Bilder in passender Größe und im empfohlenen Format hochzuladen. Ob Ihr Theme die Breiten richtig anfordert, prüfe ich im Code.

#Arbeiten Sie in Dresden vor Ort?

Nein. Ich arbeite remote von Gdynia aus, schriftlich und ohne Termine. Die erste schriftliche Einschätzung ist kostenlos, ein Angebot folgt individuell. Das Layout kommt von Ihnen, ich setze es im Theme um.

#Schreiben Sie mir

Wenn Ihr Dresdner Shop in den Berichten bei LCP, INP oder CLS auffällt, schicken Sie mir über das Kontaktformular die Shop-Adresse, das Ziel, Ihren Termin, das eingesetzte Theme und die installierten Apps. Dann sehe ich mir die Berichte und den Theme-Code an und schreibe Ihnen, wo ich anfangen würde. Diese erste Einschätzung kostet nichts.