# Mobile-Ecommerce-Optimierung: Core Web Vitals, Checkout und die konkreten Korrekturen, die die Conversion bewegen > 70-85 % des Ecommerce-Traffics kommen mobil. Die zehn konkreten Bereiche (Web Vitals, Touch-Ziele, Formular-Autofill, Apple Pay, Daumenzonen), die die Conversion-Lücke zwischen Mobil und Desktop schließen, mit echten Tools und Richtwerten. Ryan Badger - 1. Mai 2025 - 8 Min. Lesezeit ## Warum Mobile das ganze Spiel ist 70-80 % deines Ecommerce-Traffics sind mobil. In den meisten Verbraucherkategorien nähert sich der Wert 85 %. Die Desktop-Conversion ist typischerweise das 2- bis 3-Fache der mobilen Conversion, und das sagt weniger darüber aus, dass Desktop besser wäre, als darüber, dass Mobile in den meisten Shops kaputt ist. Ein gut optimiertes mobiles Erlebnis kann die Lücke schließen und dreht sie oft sogar um: Manche DTC-Marken konvertieren mobil inzwischen auf Desktop-Niveau oder besser. Der Unterschied ist konkret, messbar und hat überwiegend mit Hygiene zu tun, nicht mit Innovation. Dieser Beitrag behandelt, was die mobile Conversion wirklich bewegt, mit Richtwerten, Tools und konkreten Dingen, die du beheben solltest. Kein "gestalte Mobile-first". Die konkreten Prüfpunkte, die den aufsummierten Effekt bringen. ## 1. Core Web Vitals und warum Google sie beobachtet Google nutzt die Core Web Vitals als Ranking-Signal und als Stellvertreter für die Qualität des Erlebnisses. Über den SEO-Aspekt hinaus sind die zugrunde liegenden Kennzahlen starke Prädiktoren für die Conversion. ### LCP (Largest Contentful Paint) Zeit, bis das größte Element im sichtbaren Bereich (meist ein Hero-Bild oder die H1) gerendert ist. Ziel: unter 2,5 Sekunden mobil über 4G. Häufigste Ursachen für einen schlechten LCP: - Hero-Bild unkomprimiert oder zu groß - Laden von Web-Fonts blockiert das Rendern - Einbindung von Drittanbieter-Scripts (Chat-Widgets, Analytics, A/B-Test-Tools) im `` ### INP (Interaction to Next Paint) Zeit von einer Nutzerinteraktion (Tippen) bis zur nächsten visuellen Aktualisierung. Ziel: unter 200 ms. Häufigste Ursachen für einen schlechten INP: - JavaScript-lastige Seiten (React-/Vue-Shops ohne Code-Splitting) - Analytics- oder Chat-Scripts, die synchron bei der Interaktion feuern - Tipp-Verzögerung in älteren mobilen Browsern ### CLS (Cumulative Layout Shift) Dinge, die beim Laden auf der Seite herumspringen. Ziel: unter 0,1. Häufigste Ursachen: - Bilder ohne Breiten-/Höhenattribute - Anzeigen oder Drittanbieter-Embeds, die nach dem Inhalt laden - Schriften, die nachladen und die Textgröße verändern ### So prüfst du es Kostenlos: [PageSpeed Insights](https://pagespeed.web.dev/) lässt Lighthouse laufen und meldet alle drei Werte. Teste deine umsatzstärkste Produktseite, nicht die Startseite. Behebe, was rot ist, akzeptiere, was gelb ist, und geh weiter. Kostenpflichtig / tiefer: WebPageTest.org für die Wasserfall-Analyse, der Performance-Tab der Chrome DevTools für lokales Profiling. ## 2. Mobile Geschwindigkeit unter 3 Sekunden (echtes Mobil, kein gedrosselter Desktop) Der "Mobil-Emulator" eines Desktop-Browsers nutzt eine schnelle Verbindung und eine schnelle CPU. Echte Handys haben langsamere Verbindungen und langsamere CPUs. Die Lücke ist erheblich. Teste auf echten Handys über 4G. Wenn deine Seite im mobilen Emulator von Chrome 2 Sekunden braucht, sind es auf einem Android der Mittelklasse über 4G wahrscheinlich 4-5 Sekunden. ### Die größten Geschwindigkeitsgewinne (der Reihe nach) 1. **Bildoptimierung:** auf 80 % Qualität komprimieren, auf die tatsächlich benötigten Maße verkleinern, WebP oder AVIF ausliefern. Shoprocket macht das automatisch über Cloudflare 2. **Inhalte unterhalb des sichtbaren Bereichs per Lazy Loading laden.** Bilder, iframes und schwere Scripts sollten erst laden, wenn man dorthin scrollt 3. **Nicht kritisches JavaScript verzögern.** Analytics, Chat-Widgets und A/B-Test-Tools sollten das Rendern nicht blockieren 4. **Statische Assets aggressiv cachen.** 1 Jahr Cache auf Bilder, Fonts, CSS, JS mit Fingerprint-URLs 5. **Ein CDN nutzen** (Cloudflare, Fastly oder das eingebaute deiner Plattform). Liefert Assets von geografisch nahen Edge-Standorten 6. **Drittanbieter-Scripts reduzieren.** Jedes Pixel und jeder Tag kostet ~50-200 ms; prüfe, was wirklich nötig ist ## 3. Größe der Touch-Ziele Apples Human Interface Guidelines verlangen Touch-Ziele von mindestens 44×44 Pixeln. Google Material verlangt 48×48. Die meisten "mobilen" Versionen von Themes erreichen keins von beiden. **Korrekturen:** - Buttons mindestens 44 px hoch mit 8-12 px Innenabstand - Links in der Navigation mindestens 44 px hoch - Formularfelder mindestens 44 px hoch (hilft auch der Barrierefreiheit) - Abstand zwischen benachbarten Tipp-Zielen mindestens 8 px Test: Öffne deinen Shop auf dem Handy. Versuch, mit dem Daumen die Kategorienavigation zu treffen. Tippst du daneben? Dann ist das ein Problem mit den Touch-Zielen. ## 4. Besonderheiten des mobilen Checkouts Warenkorb und Checkout sind auf dem Handy die Stellen, an denen die meiste Conversion verloren geht. Konkrete Aufgabenliste: ### Einspaltige Formulare Zweispaltige Formulare funktionieren am Desktop und scheitern mobil. Ordne jedes Feld untereinander an. Keine Ausnahmen. ### Passende Eingabetypen - E-Mail-Feld: `type="email"` (blendet die E-Mail-Tastatur mit @-Zeichen ein) - Telefon: `type="tel"` (numerische Tastatur) - Postleitzahl: `type="text" inputmode="numeric"` für Länder mit numerischen Postleitzahlen - Kreditkartennummer: `type="text" inputmode="numeric" autocomplete="cc-number"` (damit Autofill funktioniert) Die meisten Plattformen machen das nativ richtig. Es lohnt sich, dein Formular auf dem Handy zu prüfen; wenn die falsche Tastatur erscheint, behebe es. ### Autofill-Tauglichkeit Browser können Name, Adresse, E-Mail, Telefon und Kartendaten automatisch ausfüllen, wenn die `autocomplete`-Attribute des Formulars stimmen. Ein Kunde, der einen Autofill-Vorschlag antippt, schließt den Checkout in 3 Sekunden ab. Ohne Autofill tippt er 12+ Felder von Hand. Standardwerte für autocomplete: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`. ### Fixierter Warenkorb-Button auf Produktseiten Scrollst du auf einer mobilen Produktseite 3 Bildschirme nach unten, ist der Button "In den Warenkorb" außerhalb des Bildschirms. Die Lösung: eine fixierte untere Leiste mit Preis und "In den Warenkorb", die erscheint, sobald der ursprüngliche Button aus dem Bild gescrollt ist. ### Apple Pay + Google Pay + Link Das sind die größten Einzelhebel für den mobilen Checkout. Ein-Tipp-Zahlung ohne Tippen; native biometrische Authentifizierung. - **Apple Pay:** wird automatisch aktiviert, sobald du deine Domain bei Stripe verifizierst (Shoprocket erledigt das) - **Google Pay:** ähnlich - **Stripe Link:** füllt Karte und Adresse aus der websiteübergreifenden Identität von Link aus Jeder mobile Checkout ohne diese Optionen verliert Kunden. Aktiviere alle drei. ## 5. Weniger Formularfelder Jedes Feld in deinem mobilen Checkout ist ein Reibungspunkt. Prüfe deine Felder: **Meist nötig:** - E-Mail - Lieferadresse (Name, Straße, Ort, Postleitzahl, Land) - Zahlungsdaten (oder Apple/Google Pay) **Oft zu viel abgefragt:** - Telefonnummer (nur, wenn du sie für Zustellung / Versanddienstleister brauchst; viele brauchen sie nicht) - Geburtsdatum (beim Kauf fast nie nötig) - Firmenname (nur für B2B) - Newsletter-Anmeldung (vorausgewählt, wo rechtlich zulässig; sonst separate Checkbox) - "Wie hast du von uns erfahren?" (in eine Umfrage nach dem Kauf verlegen) Weniger Felder = schnellerer Checkout = höhere Abschlussrate. Jedes Feld, das du entfernst, verbessert den Abschluss im mobilen Checkout um grob 5-10 %, mit Zinseszinseffekt. ## 6. Lesbare Schrift und Zeilenlänge auf dem Handy - **Fließtext:** mindestens 16 px (der iOS-Standard und die Material-Richtlinie von Google) - **Zeilenlänge:** 45-75 Zeichen - **Zeilenhöhe:** das 1,4- bis 1,6-Fache der Schriftgröße - **Kontrast:** mindestens WCAG AA (4,5:1 für Fließtext, 3:1 für große Schrift) Wenn Kunden auf deiner Produktbeschreibung zum Zoomen die Finger spreizen, ist deine Schrift zu klein. Wenn sie das Handy drehen müssen, um zu lesen, ist deine Zeilenlänge zu breit oder die Schrift zu eng gesetzt. ## 7. Einhändige Bedienung berücksichtigen Die meisten mobilen Nutzer bedienen ihr Handy einhändig, der Daumen reicht von unten rechts (oder unten links bei Linkshändern). Wichtige Interaktionen sollten in dieser Daumenzone liegen. - Primärer CTA (In den Warenkorb, Zur Kasse, Jetzt kaufen) weiter unten - Hamburger-Navigation oben links oder oben rechts, in Daumenreichweite - Zurück-Button vorhersehbar (der Zurück-Button des Browsers schlägt meist eigene Zurück-Buttons) Verlange kein doppeltes Tippen auf schwer erreichbare Bereiche. Jede Daumenakrobatik verliert Kunden. ## 8. Eine eigene Produktseite für Mobile Produktseiten für den Desktop zeigen oft alles auf einmal (Galerie links, Details rechts, Beschreibung darunter). Dieses Layout lässt sich nicht aufs Handy übertragen; dort musst du die Inhalte in eine Reihenfolge bringen. Wirksame Reihenfolge auf einer mobilen Produktseite: 1. Hero-Bild (wischbare Galerie) 2. Titel + Preis 3. Variantenauswahl (Größe, Farbe) 4. In den Warenkorb (primärer CTA) 5. Vertrauenssignale (Bewertung, kostenloser Versand, Rückgabe) 6. Beschreibung (einklappbar, nach 3 Zeilen gekürzt) 7. Spezifikationen / Details (einklappbar) 8. Bewertungsübersicht mit Erweiterung "alle ansehen" 9. Verwandte Produkte 10. FAQ (einklappbar) Inhalte unterhalb des sichtbaren Bereichs sollten per Lazy Loading geladen werden. Ein mobiler Kunde trifft die Kaufentscheidung oft in den ersten 3 Abschnitten; alles zu laden verlangsamt diese Entscheidung. ## 9. Auf echten Geräten testen Nicht in den DevTools. Nicht im mobilen Emulator des Browsers. Auf echten Handys über Mobilfunk. Minimale Testrotation: - iPhone SE (kleiner Bildschirm, älteres Gerät) - iPhone 15 Pro (neuestes iOS, Safari) - Samsung Galaxy der Mittelklasse (Android, Chrome) - Älteres Android über 4G (deckt Performance-Probleme auf) Bonus: Bitte 3 Freunde mit unterschiedlichen Handys, in deinem Shop etwas zu kaufen. Beobachte sie. Womit sie kämpfen, ist deine Korrekturliste. ## 10. Mobile-Killer-Muster vermeiden Häufige Fehler, die die mobile Conversion zerstören: ### Interstitial-Popups Das Popup "Abonniere und erhalte 10 % Rabatt!", das beim Aufruf mobil den Bildschirm verdeckt. Google straft das in den mobilen Suchergebnissen ab. Kunden stoßen darauf und springen ab. Nimm stattdessen Inline-Anmeldungen. ### Automatisch abspielendes Video mit Ton Verschwendet Bandbreite, nervt Nutzer, und iOS blockt es ohnehin oft. Stummes Autoplay ist für Hero-Videos akzeptabel; Autoplay mit Ton ist nutzerfeindlich. ### Hover-Zustände bei Touch "Mit der Maus darüberfahren, um Details zu sehen" funktioniert bei Touch nicht. Wenn dein Theme mobil noch Hover-zum-Aufdecken-Muster hat, sind sie praktisch kaputt. ### Winzige "Schließen"-Buttons in Modals Ein 16 Pixel großes X in der Ecke ist mit dem Daumen nicht zu treffen. Mach Schließen-Buttons 44×44 groß oder nutze "Schließen"-Buttons über die volle Breite am unteren Rand von Modals. ### Horizontales Scrollen in Produktrastern Auf dem Handy verstecken horizontal scrollende Produkt-Karussells 80 % der Produkte unterhalb des sichtbaren Bereichs. Ein vertikales Raster (2 Spalten mobil) konvertiert besser. ## Was Shoprocket für Mobile übernimmt Das meiste an Grundausstattung ist von Haus aus dabei: - **Automatische Bildoptimierung:** Größenanpassung + Komprimierung + WebP + Lazy Loading bei jedem Produktbild - **Warenkorb-Schublade (kein Ganzseiten-Warenkorb)** ist mobil der Standard - **Fixierter mobiler Warenkorb-Button** wird in Shops mit Themes unterstützt - **Mobil-responsiver Checkout** mit korrekten Eingabetypen, Autocomplete und einspaltiger Anordnung - **Apple Pay + Google Pay + Stripe Link** als Ein-Tipp-Zahlung über Stripe - **Mobil-responsives Live-Chat-Widget** - **CDN-Auslieferung** über Cloudflare für jedes Asset - **Core Web Vitals von Haus aus optimiert** für den gehosteten Shop ```
``` Nutzer des Widget-Embeds: Du kontrollierst Geschwindigkeit und Design der umgebenden Seite. Das Widget von Shoprocket wird per Lazy Loading geladen und blockiert das Rendern deiner Seite nicht, aber die Gesamtgeschwindigkeit der Seite liegt bei dir. > **Tipp:** Lass einmal im Quartal PageSpeed Insights auf deinen 3 umsatzstärksten Produktseiten mobil laufen. Schreib die drei Core-Web-Vitals-Werte auf. Vergleiche im nächsten Quartal. Ein Abwärtstrend ist ein stiller Conversion-Killer; erwisch ihn vierteljährlich statt erst nach dem Schaden. ## Kurz gesagt - **Mobile sind 70-85 % des Traffics.** Die meisten Shops behandeln es als Nebensache; tu das nicht - **Die Core Web Vitals sind die drei Zahlen, die du verfolgst:** LCP, INP, CLS. Unter 2,5 s / 200 ms / 0,1 - **Teste auf echten Geräten über 4G,** nicht in einem Browser-Emulator - **Checkout im Detail:** einspaltige Formulare, korrekte Eingabetypen, Autocomplete, Apple/Google Pay, fixierte CTAs - **Weniger Formularfelder** = höhere Abschlussrate. Prüfe, was wirklich nötig ist - **Touch-Ziele mindestens 44×44.** Abstand zwischen den Zielen mindestens 8 px - **Die Daumenzone zählt.** Primäre CTAs weiter unten; Hamburger oben links/rechts - **Vermeide Mobile-Killer:** Interstitials, Autoplay mit Ton, Hover-Zustände, winzige Schließen-Buttons [Starte eine kostenlose Testphase](https://app-v3.shoprocket.io/signup) und erhalte vom ersten Tag an automatische Bildoptimierung, Apple Pay und einen mobil-nativen Checkout. 14 Tage, keine Karte. --- - HTML version: https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout - Language: Deutsch (de) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)