Shopify Mobile Speed: So optimierst du für langsame Smartphones und Netze

Die wichtigsten Erkenntnisse

• Shopify Mobile Speed ist ein anderes Problem als auf dem Desktop. Smartphones haben langsamere CPUs und nutzen schwankende Netzwerke, und über Mobile finden der meiste Traffic und die meisten Conversions statt.
• Google bewertet drei Core Web Vitals auf Mobile: LCP, CLS und INP. Sie werden anhand realer Felddaten im 75. Perzentil gemessen und für Mobile separat ausgewiesen.
• Die Maßnahmen, die wirklich etwas bringen, sind Responsive Images aus dem Shopify CDN, Lazy-Loading von Medien im Below-the-fold-Bereich, das Aufschieben von nicht-kritischem JavaScript und das Reduzieren von App-Skripten.
• App-Skripte sind eine der häufigsten Bremsen auf Mobile. Jede Widget-App fügt ihr eigenes JavaScript in jede Seite ein, und das läuft eben auch auf dem Smartphone.
• Fudge schreibt schlanken, nativen Theme-Code, anstatt eine weitere Widget-App hinzuzufügen. So wird ein Feature ohne die Skript-Last ausgeliefert, die eine App bei jedem Seitenaufruf verursacht.

Die Shopify Mobile Speed in den Griff zu bekommen, ist nicht dieselbe Aufgabe wie die Desktop-Optimierung. Eine Seite, die sich auf einem Laptop mit Glasfaser sofort aufbaut, kann auf einem Mittelklasse-Smartphone mit lückenhaftem Netz extrem langsam sein. Und da der meiste Shopify-Traffic und die meisten Shopify-Checkouts auf Smartphones stattfinden, ist die mobile Version diejenige, die letztendlich über deinen Umsatz entscheidet.

Dieser Guide behandelt, warum Mobile schwieriger ist, welche Core Web Vitals Google bewertet, welche konkreten Taktiken Probleme mit der mobilen Ladegeschwindigkeit verringern und wie du testen kannst, wie deine Shopper mit der langsamsten Verbindung den Store erleben.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und hat an der Storefront-Performance von hunderten Shopify-Stores gearbeitet. Wir bauen Fudge, den KI-Operator für Shopify-Stores mit einer Bewertung von 4.9 im Shopify App Store. Wir arbeiten also auf derselben Theme-Ebene, auf der auch die Mobile Speed stattfindet, und sehen, was ein aufgeblähter App-Stack mit einem Smartphone macht.

Warum mobile Geschwindigkeit ein anderes Problem ist als Desktop

Auf beiden läuft dasselbe Theme, aber die Bedingungen sind nicht gleich.

Smartphones haben langsamere CPUs. Ein Mittelklasse-Android-Gerät verarbeitet und führt JavaScript viel langsamer aus als ein Desktop-PC. Skriptlastige Seiten, die auf einem Laptop flüssig laufen, können auf einem Smartphone ins Stocken geraten, weil das Telefon länger auf dem Main Thread verbringt, um denselben Code auszuführen.

Mobilfunknetze schwanken. Ein Shopper hat zu Hause vielleicht schnelles 5G und zehn Minuten später im Zug ein schwaches Signal. Jeder zusätzliche Request und jedes überdimensionierte Bild kostet bei einer langsamen Verbindung mit hoher Latenz mehr Zeit.

Auf Mobile wird das Geld verdient. Für die meisten Shopify-Stores macht Mobile den Großteil der Sessions und Bestellungen aus. Das macht den mobilen Render-Pfad zu dem Bereich, in den du zuerst deine Energie stecken solltest.

Das Ziel ist also nicht ein guter Desktop-Score. Es ist eine Seite, die auch auf einem günstigen Smartphone und mit langsamer Verbindung schnell bleibt, denn das trifft auf einen großen Teil der echten Shopper zu.

Core Web Vitals auf Mobilgeräten: die Metriken, die Google bewertet

Googles Page-Experience-Signale basieren auf den Core Web Vitals. Es gibt drei davon, und INP hat im März 2024 First Input Delay als Core Web Vital ersetzt.¹

Die Grenzwerte sind auf Mobile und Desktop gleich, aber die erreichten Werte sind es nicht. Auf einem Smartphone zieht ein großes Hero Image den LCP nach oben, und schwere Skripte ziehen den INP nach oben, während der Main Thread beschäftigt ist.

Warum mobile Felddaten so wichtig sind

Google bewertet die Core Web Vitals anhand von echten Felddaten (Field Data) und nicht anhand eines einzelnen Labortests. Diese Daten stammen aus dem Chrome User Experience Report und werden im 75. Perzentil der Besuche ausgewertet. Ein Shop besteht also nur, wenn drei Viertel der tatsächlichen Sessions den Schwellenwert erreichen.¹

Diese Felddaten werden für Mobile und Desktop separat ausgewiesen. In Kombination mit Mobile-First-Indexing, bei dem Google vorwiegend die mobile Version einer Seite für Indexierung und Ranking nutzt, ist die praktische Schlussfolgerung simpel: Deine Mobile Experience ist diejenige, die wirklich ins Gewicht fällt.

Für den breiteren Kontext dazu, wo Shopify-Shops tatsächlich stehen, sieh dir unseren Report zum Stand der Shopify-Performance an.

Wie du die mobile Geschwindigkeit in Shopify verbesserst

Die Erfolge konzentrieren sich auf wenige Bereiche: Bilder, Skripte und Layout-Stabilität. Hier lohnt es sich, Arbeit reinzustecken.

Liefere Responsive Images über das Shopify-CDN aus

Bilder sind normalerweise das Schwerste auf einer Produkt- oder Collection-Seite, und Smartphones brauchen keine Dateien in Desktop-Größe.

Das Bilder-CDN von Shopify kann die Größe eines Bildes on-the-fly ändern. Der image_url Liquid-Filter gibt eine CDN-URL mit der von dir gewünschten Breite zurück, und das CDN liefert automatisch ein modernes Format wie WebP oder AVIF aus, wenn der Browser dies unterstützt.²

Kombiniere das mit srcset und sizes, damit der Browser eine an das Gerät angepasste Datei herunterlädt. Mit Breitenangaben in srcset und einem sizes-Hinweis wählt der Browser die kleinste Quelle, die noch scharf aussieht. Das erspart dem Smartphone, ein 2000px großes Bild für einen 400px großen Platzbereich herunterzuladen.³

Der schnellste LCP-Gewinn auf Mobile ist meistens das Verkleinern des Hero Images. Eine vollständige Anleitung dazu findest du unter Bilder komprimieren in Shopify.

Lazy-Loading für Medien Below-the-Fold

Alles Below-the-Fold (im nicht sofort sichtbaren Bereich) kann warten. Das native loading="lazy"-Attribut bei einem <img> sagt dem Browser, dass er das Bild zurückstellen soll, bis es sich dem Viewport nähert. Das reduziert die Anzahl der konkurrierenden Requests beim ersten Laden.⁴

Nutze es für Bilder und Iframes weiter unten auf der Seite: Lifestyle-Bilder, Bewertungssektionen, Footer-Logos, eingebettete Videos. Verwende Lazy-Loading nicht für das LCP-Element selbst, denn wenn du dein Hero-Image aufschiebst, wird der LCP schlechter, nicht besser.

Details dazu, auch zum Umgang mit eingebetteten Videos, findest du unter Lazy Loading für Bilder in Shopify.

Nicht-kritisches JavaScript zurückstellen (defer)

JavaScript ist das, was dem INP auf Mobilgeräten am meisten schadet, da die langsamere CPU des Handys länger für die Ausführung braucht und der Main Thread blockiert bleibt.

Alles, was nicht für den First Paint benötigt wird, sollte ihn nicht blockieren. Füge Skripten ein defer hinzu, damit sie laden, ohne das Rendering aufzuhalten, und lade nicht essenzielle Widgets erst, wenn die Seite interaktiv ist, anstatt im <head>.

Render-blocking Scripts (Rendering-blockierende Skripte) verdienen einen eigenen Durchlauf. Siehe Wie man Render-blocking Scripts in Shopify behebt für die Details.

Critical CSS hinzufügen und font-display setzen

Zwei kleinere Optimierungen, die beim First Paint helfen:

• Critical CSS. Binde die Styles, die für das Rendern des oberen Seitenbereichs nötig sind, inline ein, damit der Browser rendern kann, bevor er das vollständige Stylesheet abruft.
• font-display: swap. Lass Text sofort in einer Fallback-Schriftart rendern, während der Webfont lädt, anstatt eine leere Fläche zu hinterlassen. Das verhindert unsichtbaren Text bei einer langsamen Verbindung.

Layout Shift durch Banner und Hero-Sections stoppen

CLS ist oft der am einfachsten zu behebende Vital-Wert, da die Ursachen strukturell sind. Layout-Sprünge entstehen durch Elemente, die spät laden und den Inhalt nach unten schieben: eine Announcement Bar, ein Hero Image ohne reservierten Platz, ein Cookie-Banner oder ein spät eingefügtes App-Widget.

Reserviere Platz für alles, was nach dem First Paint geladen wird. Gib Bildern explizite width- und height-Attribute, damit der Browser den Platz reserviert, bevor die Datei ankommt, und vermeide es, Banner über bereits gerendertem Inhalt einzufügen.

Wie du mit langsamen Netzwerken und Geräten testest

Du kannst die Mobile Speed nicht von deinem eigenen Smartphone im Büro-WLAN aus beurteilen. Du musst die Bedingungen simulieren, mit denen deine Shopper mit den langsamsten Verbindungen konfrontiert sind.

Führe Lighthouse im Mobile-Modus aus. In den Chrome DevTools simuliert das Lighthouse-Panel standardmäßig ein Mittelklasse-Smartphone mit gedrosselter CPU und gedrosseltem Netzwerk. Das kommt dem echten Mobile-Erlebnis viel näher als ein Desktop-Test.

Drossle das Netzwerk. Stelle das Throttling im Network-Tab der DevTools auf ein langsames Profil wie “Slow 4G” oder “3G” und lade die Seite neu. So werden die Requests sichtbar, die bei einer Verbindung mit hoher Latenz schmerzen und die bei einer schnellen Verbindung verborgen bleiben.

Drossle die CPU. Wende im Performance-Tab eine 4- oder 6-fache CPU-Verlangsamung (CPU slowdown) an, um ein günstiges Smartphone zu simulieren. Schweres JavaScript, das auf deinem Rechner sofort ausgeführt wird, zeigt hier seine wahren Kosten – genau das, was INP misst.

Prüfe auch die Felddaten. Labortests decken viel auf, aber Google bewertet anhand von Felddaten (Field Data). Beobachte den Core Web Vitals-Bericht in der Search Console, der nach Mobile und Desktop segmentiert ist, damit du bestätigen kannst, dass echte Besuche bestehen und nicht nur deine Labortests.

Teste nach jeder größeren Änderung, besonders nach der Installation einer App. Eine App, die im Admin-Bereich harmlos aussieht, kann jede Seite ordentlich beschweren.

Wie App-Bloat Shopify auf Mobile verlangsamt

Bilder und CSS sind wichtig, aber eine der häufigsten Bremsen für die Shopify Mobile Speed ist der App-Stack. Die meisten Stores unterschätzen das: Ein Stack aus einem Dutzend Apps kann eine Datenmenge hinzufügen, die sich durch noch so viel Bildoptimierung nicht ausgleichen lässt.

Dieses Muster wiederholt sich bei vielen Stores. Jede App, die ein sichtbares Feature hinzufügt (eine Sticky Bar, ein Review-Widget, ein Upsell-Popup, ein Währungswähler), liefert normalerweise ihr eigenes JavaScript mit, und dieses Skript wird auf dem Smartphone auf jeder relevanten Seite geladen. Einzeln betrachtet wirkt jedes klein. Zusammen blockieren sie den Main Thread, verzögern die Interaktivität und treiben den INP in die Höhe.

Die schlimmsten Übeltäter verursachen auch Layout Shift, weil sie ihr UI (User Interface) einfügen, nachdem die Seite bereits gerendert wurde, was Inhalte verschiebt und dem CLS schadet.

Die Lösung ist nicht, es einfach als Preis für die Features zu akzeptieren. Prüfe, was jede App tatsächlich kostet, und entferne die, die du nicht mehr nutzt. Viele der verbleibenden Features lassen sich mit etwas Theme-Code lösen. Wenn du sie nativ baust, statt eine weitere App hinzuzufügen, wird das Feature ohne die Skript-Last pro Seite ausgeliefert. Wenn dein Store bereits langsam ist, fange dort an, bevor du etwas Neues hinzufügst: Wie du ein Shopify-Theme schneller machst führt dich durch den Audit.

Wo Fudge ins Spiel kommt

Der übliche Weg, ein Storefront-Feature hinzuzufügen, ist die Installation einer App, und jede installierte App bedeutet mehr JavaScript auf jeder Seite, was Mobile am härtesten trifft.

Fudge geht den anderen Weg. Es ist der KI-Operator für Shopify-Stores und schreibt nativen Theme-Code. Du beschreibst, was du willst, und Fudge schreibt das Liquid, CSS und JavaScript direkt in dein Theme als Entwurf, den du dir auf deinem Smartphone in der Vorschau ansehen kannst, bevor du ihn veröffentlichst.

Weil der Output nativ ist, bringt ein mit Fudge gebautes Feature kein Drittanbieter-Widget oder ein zusätzliches Skript mit, das von einer App auf jeder Seite geladen wird. Das ist der Unterschied, der sich in deinen mobilen Core Web Vitals zeigt: weniger render-blockierende Skripte, weniger Arbeit für den Main Thread und kein spät eingefügtes Widget, das Layout Shift verursacht.

Und weil es Theme-Code ist, übersteht er auch eine Deinstallation. Was auch immer du mit dem Shopify Store Editor baust, bleibt in deinem Theme, auch wenn du kündigst – ganz im Gegensatz zu einem von einer App gerenderten Element, das verschwindet, sobald du die App entfernst.

Fudge kann auch zuerst die Schwachstellen finden. Bitte um einen Speed-Audit, und es listet auf, was deine Seiten beschwert. Dann entwirft es die Fixes, die du nur noch freigeben musst – einschließlich des Codes, den deinstallierte Apps oft in deinem Theme hinterlassen.

FAQ