Mobile First auf Shopify: Was im Theme-Code wirklich zählt
Mobile First ist nicht "kleiner Bildschirm zuerst". Es ist eine Architektur-Entscheidung im Liquid-Theme, die LCP, INP und Conversion definiert. Hier unsere harten Regeln aus der Praxis.
“Mobile First” ist eines der Wörter, die in jedem Pitch fallen - und in den wenigsten Themes wirklich umgesetzt sind. Hier sind die Regeln, mit denen wir in Plus-Projekten Mobile-LCP unter 1,5 s halten.
Was Mobile First wirklich heißt (im Code)
Mobile First ist keine Design-Philosophie, sondern eine Architektur-Entscheidung: Du schreibst Mobile-Styles und -Markup zuerst, ergänzt für Desktop. Nicht umgekehrt.
Konkret im Liquid-Theme heißt das:
- Default-Styles greifen für Mobile,
@media (min-width: ...)für Tablet/Desktop - Default-Markup ist Mobile-optimiert (Single-Column, Touch-Target-Größen), Grid-Layouts werden additiv
- Default-Images sind klein, Larger-Images werden via
srcsetfür größere Viewports nachgeladen - Default-JavaScript ist minimal - Desktop-Features werden additiv geladen
Die fünf harten Regeln
Regel 1: Hero-Bild ist fetchpriority="high" und loading="eager"
Das LCP-Element auf der Homepage ist meistens das Hero-Bild. Wenn du das lazy-loadest, killst du den LCP-Score auf jedem Audit.
<img
src="{{ section.settings.hero_image | image_url: width: 800 }}"
srcset="
{{ section.settings.hero_image | image_url: width: 600 }} 600w,
{{ section.settings.hero_image | image_url: width: 1200 }} 1200w,
{{ section.settings.hero_image | image_url: width: 1800 }} 1800w
"
sizes="100vw"
width="800"
height="600"
fetchpriority="high"
loading="eager"
alt="{{ section.settings.hero_alt }}"
/>Regel 2: Critical CSS inline, Rest async
Shopify hat 2024 die Möglichkeit für Inline-Critical-CSS sauber dokumentiert. Wir extrahieren die Mobile-Above-the-Fold-Styles (max. 14 KB) und packen sie in <style> direkt in den <head>. Der Rest des CSS lädt async via <link rel="stylesheet" media="print" onload="this.media='all'">.
Regel 3: JavaScript ist Mobile-Budget-bounded
Wir setzen Hard-Limits pro Page-Type:
- Homepage: max. 80 KB JS (uncompressed)
- PDP: max. 120 KB JS (uncompressed)
- Collection: max. 60 KB JS (uncompressed)
Jede neue App, die mehr will, wird vorher diskutiert. Mehrheit wird abgelehnt.
Regel 4: Touch-Targets sind 44 × 44 px Minimum
Apple HIG, Google Material - beide schreiben es vor. Wir greifen das im Theme über CSS-Utilities ab:
.touch-target {
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}Buttons, Links, Variant-Picker - alle bekommen diese Utility. Das ist Pflicht, nicht “nice to have”.
Regel 5: Layout-Shift = Null
CLS-Werte über 0,1 sind 2026 inakzeptabel. Konkrete Maßnahmen:
- Alle
<img>habenwidthundheightAttribute - auch wenn du CSS für Responsive nutzt - Webfonts via
font-display: swap+ Preload mit fallback-font-family-Adjustment - Lazy-loaded Sections haben Placeholder mit fester Höhe - kein “Section materialisiert sich beim Scrollen”
- Banner und Cookie-Consent haben fixe Position, schieben nichts
INP unter 200 ms - die unterschätzte Metrik
LCP ist meistens das Problem, an dem alle herumschrauben. Aber INP (Interaction to Next Paint) ist das, was Conversion auf Mobile wirklich killt. Was hilft:
- Event-Listener mit
passive: truewo möglich (Scroll, Touch) requestIdleCallbackfür nicht-kritisches JavaScript- Vermeide Long Tasks >50 ms (Chrome Performance Profiler hilft)
- Lade Klaviyo, Meta-Pixel etc. defer-via-
facade-Pattern (z. B. mit Partytown oder eigenem Worker)
Wenn dein INP über 250 ms liegt, fühlt sich dein Shop auf Mobile zäh an - auch wenn LCP gut ist.
Wann das alles nicht hilft
Wenn du noch ein Premium-Theme aus dem Theme Store fährst, das 800 KB JavaScript by-default lädt, kommst du mit Mikro-Optimierung nicht weit. In dem Fall ist es Zeit für ein Custom-Liquid-Theme. Aus zwei Plus-Projekten haben wir nach Theme-Wechsel von Premium auf Custom gemessen:
| Metrik | Premium Theme | Custom Liquid Theme |
|---|---|---|
| Mobile LCP | 3,4 s | 1,3 s |
| JS-Bundle Homepage | 720 KB | 92 KB |
| Mobile CVR | 1,8 % | 2,9 % |
Unsere Mobile-First-Check-Liste
Wenn wir ein Theme übernehmen, prüfen wir in dieser Reihenfolge:
- Mobile LCP auf Top-3-Seitentypen
- CSS-Größe und Critical-CSS-Strategie
- JS-Bundle pro Page-Type
- Touch-Target-Audit
- CLS-Werte unter realen Devices
- INP unter Throttling (Slow 4G)
- App-Liste - was lädt im Storefront?
Mobile First ist 2026 die Default-Erwartung, nicht das Feature. Wenn dein Mobile-LCP über 2 s liegt: Buch dir einen Performance-Check - wir zeigen dir in 30 Minuten, wo dein Bottleneck liegt.