Die Warenkorbabbruchrate im mobilen E-Commerce liegt bei 85,65 %, am Desktop ist sie niedriger. Ein großer Teil dieses Unterschieds lässt sich mit den richtigen Designentscheidungen vermeiden. Dieser Artikel zeigt, was einen Shop wirklich mobilfreundlich macht und wie du Seite für Seite dorthin kommst.
Was ist der Unterschied zwischen mobilfreundlich und mobiloptimiert?
Mobilfreundlich heißt: Der Shop funktioniert auf einem kleinen Bildschirm. Text bricht richtig um, Bilder passen sich an, Buttons lassen sich antippen. Das ist der Mindeststandard. Google hält ihn für die Indexierung für notwendig.
Mobiloptimiert heißt: Der Shop ist darauf ausgelegt, mobil zu verkaufen. Layout, Informationshierarchie, Tippflächen, Checkout und Ladezeit sind genau darauf abgestimmt, wie Menschen mit dem Handy einkaufen. Ein Shop kann mobilfreundlich sein, ohne mobiloptimiert zu sein. Bei vielen ist das so.
Der Unterschied ist wichtig, denn mobilfreundlich bringt dich ins Spiel. Mobiloptimiert bringt den Umsatz. Ein Shop, der auf dem Handy nicht kaputtgeht, aber 8 Sekunden lädt und ein Checkout-Formular für Maus und Tastatur hat, ist technisch mobilfreundlich. Mobiloptimiert ist er nicht. Jede Verbesserung über "nicht kaputt" hinaus verbessert deine Conversion-Rate.
Warum die Mobile-First-Indexierung von Google alles ändert
Google nutzt die Mobile-First-Indexierung. Das heißt: Google bewertet deinen Shop anhand der mobilen Version, nicht anhand der Desktop-Version. Hat dein mobiler Shop weniger Inhalt, weniger interne Links oder Bilder, die nicht laden, beruht Googles Bild von deinem Shop auf genau diesen Schwächen.
Das hat direkte Folgen für dein Ranking. Ein Shop, der am Desktop vollständig aussieht, mobil aber abgespeckt ist, wird nach dem bewertet, was die mobile Version zeigt. Sind Produktbeschreibungen mobil gekürzt, indexiert Google die gekürzte Version. Stecken Navigationslinks mobil hinter einem eingeklappten Menü, crawlt Google sie womöglich weniger gut.
Mobile Leistung ist also nicht nur ein Nutzererlebnis-Thema. Sie ist auch ein SEO-Thema. Wer seinen mobilen Shop verbessert, verbessert sein Ranking. Jede mobile Verbesserung wirkt doppelt.
Core Web Vitals und ihr Einfluss auf dein Ranking
Die Core Web Vitals sind eine Reihe von Leistungskennzahlen, die Google als Rankingsignal nutzt. Largest Contentful Paint misst, wie lange der Hauptinhalt einer Seite zum Laden braucht. Interaction to Next Paint misst, wie schnell die Seite auf Eingaben reagiert. Cumulative Layout Shift misst, wie stark sich das Layout beim Laden unerwartet verschiebt.
Alle drei zählen mobil, wo Netzgeschwindigkeit und Rechenleistung geringer sind als am Desktop. Ein Wert, der im Desktop-Browser in Ordnung ist, kann auf einem Mittelklasse-Handy mit 4G durchfallen. Genau dieses Handy nutzt ein großer Teil deiner Besucher.
Schlechte Core-Web-Vitals-Werte schaden dem Ranking und den Conversions, jeweils für sich. Laut Studien sinkt die Conversion-Rate mit jeder zusätzlichen Sekunde Ladezeit auf einer mobilen Seite um 4,42 %. Braucht eine Seite 5 statt 2 Sekunden zum Laden, geht vielleicht schon die Hälfte der möglichen Conversions verloren, bevor jemand deine Produkte gesehen hat.
Mobiles Design nach Seitentyp
Jeder Seitentyp in einem Shop hat mobil andere Prioritäten. Wer alle Seiten gleich behandelt, optimiert keine davon richtig.
Startseite
Mobil muss die Startseite im ersten Scroll zeigen, was der Shop verkauft und wohin man klickt. Desktop-Startseiten haben oft breite Hero-Bereiche mit mehreren Elementen. Mobil füllt derselbe Hero den ganzen Bildschirm. Zeigt er nicht sofort den Nutzen und lädt zum Handeln ein, scrollt der Besucher weiter oder geht.
Halte die Hauptnavigation mit wenigen Taps erreichbar. Ein Hamburger-Menü ist Standard, aber darin sollten nur die Kategorien stehen, die ein Erstbesucher wirklich braucht. Versteckte Navigation ist mobil unsichtbare Navigation.
Kategorieseiten
Kategorieseiten müssen mobil Produktdichte und Bedienbarkeit ausbalancieren. Zweispaltige Raster funktionieren bei den meisten Produkten gut. Einspaltige Listen sind besser, wenn es auf Bilddetails ankommt. Beides ist besser als dreispaltige Raster, in denen die Produktbilder auf den meisten Handys zu klein sind.
Filter und Sortierung sind auf Kategorieseiten wichtig und mobil schwierig. Ein Filter, der sich als Vollbild-Overlay öffnet statt als Seitenleiste, ist auf einem kleinen Bildschirm gut nutzbar. Mehr zum Aufbau von Kategorieseiten findest du im ausführlichen Guide Was ist eine Kategorieseite und wie gestaltest du sie.
Produktseiten
Die mobile Produktseite muss drei Fragen schnell beantworten. Was ist das? Was kostet es? Kann ich es einfach bekommen? Das Hauptbild sollte sofort laden und wischbar sein. Preis, Variantenauswahl und der Button "In den Warenkorb" sollten ohne Scrollen sichtbar sein.
Setze den Button "In den Warenkorb" mobil in den sichtbaren Bereich oder nutze zumindest einen Sticky-Button, der beim Scrollen durch die Produktbeschreibung mitwandert. Wer erst nach oben scrollen muss, um etwas in den Warenkorb zu legen, hat eine Gelegenheit mehr, es sich anders zu überlegen.
Checkout
Im Checkout ist der mobile Abbruch am höchsten. Je weniger Schritte und Felder, desto besser. Ein Gast-Checkout nimmt die Hürde der Kontoerstellung weg, an der viele mobile Nutzer abbrechen. Details zur Optimierung findest du im Guide So gestaltest du eine Checkout-Seite, die Abbrüche senkt.
Daumenzonen und ergonomisches Design
Menschen bedienen Handys mit dem Daumen, und der erreicht nur bestimmte Bereiche des Bildschirms bequem. Die untere Mitte ist am leichtesten zu erreichen. Die oberen Ecken sind am schwersten zu erreichen. Das ist kein Detail. Es ist eine ergonomische Tatsache, die direkt beeinflusst, ob Kunden mit den wichtigen Elementen deines Shops interagieren.
Platziere die wichtigsten Aktionsbuttons wie "In den Warenkorb", "Weiter zur Kasse" und "Filter anwenden" in der unteren Mitte, wo der Daumen von selbst ruht. Navigationsleisten am unteren Rand sind auf großen Handys besser erreichbar als Leisten oben. Obere Leisten sind eine Desktop-Konvention, die sich schlecht auf die einhändige mobile Nutzung übertragen lässt.
Zu kleine Tippflächen sind ein häufiges mobiles Usability-Problem. Buttons und Links, die sich mit dem Mauszeiger leicht treffen lassen, sind mit der Fingerspitze schwer genau zu treffen. Google empfiehlt Tippflächen von mindestens 48 mal 48 Pixeln mit ausreichend Abstand zu den Nachbarn. Zu kleine Flächen führen zu Fehltipps, Frust und Abbrüchen.
Mobiler Checkout und Formularoptimierung
Formulare sind eine der größten Reibungsquellen im mobilen Checkout. Ein Formular für Tastatur und Maus wird auf dem Touchscreen langsam und fehleranfällig, vor allem wenn die Autokorrektur dazwischenfunkt. Einige konkrete Verbesserungen machen Formulare mobil deutlich leichter ausfüllbar.
Die richtigen Tastaturtypen nutzen
HTML-Eingabetypen sagen dem mobilen Browser, welche Tastatur er zeigen soll. Ein E-Mail-Feld mit dem Typ "email" zeigt eine Tastatur mit gut erreichbarem @-Zeichen. Ein Telefonfeld mit dem Typ "tel" zeigt ein Zahlenfeld. Ein Feld mit dem Standardtyp "text" zeigt für alles die volle Tastatur, auch für Telefonnummern und Postleitzahlen.
Der falsche Eingabetyp erzeugt unnötige Reibung. Der Kunde muss die Tastatur von Hand umschalten oder mit dem falschen Layout tippen. Die Lösung ist eine einzige Attributänderung pro Formularfeld. Es ist eine der Verbesserungen im mobilen Checkout mit dem besten Verhältnis von Aufwand und Ertrag.
Formularfelder reduzieren
Jedes Feld im Checkout-Formular ist mobil eine Reibungsstelle. Prüfe deinen Checkout und entferne jedes Feld, das für den Abschluss nicht nötig ist. Getrennte Felder für Vor- und Nachnamen lassen sich meist zusammenlegen. Anredefelder braucht man selten. Mehrere Adresszeilen lassen sich oft durch eine einzige Adresssuche ersetzen.
Brauchst du zusätzliche Angaben für Marketing oder Analysen, frage sie nach dem Kauf ab, nicht im Checkout. Eine Umfrage nach dem Kauf liefert dieselben Daten ohne Abbruchrisiko.
Autofill unterstützen
Moderne mobile Browser und Passwortmanager können Checkout-Felder automatisch ausfüllen, wenn dein Formular richtig aufgebaut ist. Das Attribut "autocomplete" an jedem Feld sagt dem Browser, um welche Art von Daten es sich handelt. Ein Feld mit dem richtigen Wert wird vom Browser automatisch befüllt, wenn der Kunde seine Daten gespeichert hat. Autofill kann die Checkout-Zeit mobil deutlich verkürzen, und das beeinflusst, ob ein Kunde den Kauf abschließt.
Mobile Zahlungsarten anbieten
Mobile Zahlungsarten wie digitale Wallets lassen Kunden den Kauf per biometrischer Bestätigung abschließen, statt Kartendaten von Hand einzugeben. Für Kunden am Handy ist es eine spürbare Erleichterung, keine 16-stellige Kartennummer, kein Ablaufdatum und keinen Sicherheitscode tippen zu müssen. Shops, die diese Zahlungsarten neben normalen Kartenzahlungen anbieten, erreichen mobil höhere Conversion-Raten, weil die Reibung im sensibelsten Schritt wegfällt.
Ladezeit mobil
Die Ladezeit trifft mobile Shops härter als Desktop-Shops, weil mobile Verbindungen langsamer und Prozessoren schwächer sind. Eine Seite, die im Breitbandnetz in 2 Sekunden lädt, kann über mobile Daten 6 Sekunden brauchen. Studien zeigen: 53 % der mobilen Besucher erwarten, dass Seiten in unter 3 Sekunden laden. Wer das nicht bekommt, geht.
Bilder komprimieren
Bilder sind der größte Einzelfaktor für die mobile Ladezeit. Jedes Produktbild, jeder Banner und jedes Lifestyle-Foto sollte komprimiert sein, bevor es den Browser erreicht. Moderne Bildformate haben bei gleicher Qualität deutlich kleinere Dateien als ältere Formate.
Lazy Loading schiebt das Laden von Bildern unterhalb des sichtbaren Bereichs auf, bis der Kunde sich ihnen nähert. Der sichtbare Teil der Seite lädt sofort. Alles darunter lädt erst bei Bedarf. Das verbessert die gefühlte Ladegeschwindigkeit, auch wenn das Gesamtgewicht der Seite gleich bleibt.
Skripte reduzieren
Skripte von Drittanbietern wie Analyse-Tracker, Chat-Widgets, Marketing-Pixel und Bewertungstools verlängern die Ladezeit jeder Seite. Jedes Skript muss heruntergeladen, verarbeitet und ausgeführt werden. Mobil dauert das länger als am Desktop. Prüfe, welche Skripte in deinem Shop laufen, und entferne alle, die weder zum Umsatz noch zum Kundenerlebnis beitragen.
Notwendige Skripte lassen sich oft asynchron laden, also nach dem Hauptinhalt der Seite statt davor. So ist die Seite nutzbar, bevor die Skripte fertig geladen sind. Das verbessert die Core-Web-Vitals-Werte und das Erlebnis der Kunden.
Auf echten Geräten testen
Die Entwicklertools des Browsers enthalten einen Mobilsimulator, mit dem du deinen Shop wie auf einem Handy siehst. Der Simulator ist praktisch, um das Layout zu prüfen, bildet aber die Leistung eines echten Geräts in einem echten Netz nicht genau ab. Ein Mittelklasse-Handy mit 4G verhält sich anders, als der Simulator auf einem schnellen Desktop-Rechner zeigt.
Teste regelmäßig auf echten Geräten. Probleme, die im Simulator unsichtbar sind, etwa verzögerte Touch-Ereignisse, Schriftdarstellung und bestimmte Layoutfehler, fallen auf echten Geräten sofort auf. Hast du keinen Zugriff auf mehrere Geräte, gibt es kostenlose Online-Tools, die deinen Shop über echte Hardware in echten Netzen darstellen.
Mobile SEO jenseits der Ladezeit
Ladezeit und Core Web Vitals sind die meistdiskutierten Aspekte der mobilen SEO. Aber einige weitere Faktoren beeinflussen, wie gut dein Shop in den mobilen Suchergebnissen rankt.
Vermeide Interstitials, die mobil den Hauptinhalt verdecken. Pop-ups und Overlays, die die Seite gleich nach dem Laden blockieren, werden vom mobilen Suchalgorithmus von Google abgestraft. Nutzt du ein Pop-up zur E-Mail-Erfassung oder ein Cookie-Banner, sollte es den Hauptinhalt nicht verdecken, bevor der Besucher die Seite sehen konnte.
Achte darauf, dass alle Inhalte, die in deinem Desktop-Shop sichtbar sind, auch mobil erreichbar sind. Steckt Inhalt mobil hinter einem "Mehr lesen"-Schalter, indexiert Google womöglich den eingeklappten Zustand statt des vollen Textes. Bei Produktbeschreibungen und Kategorietexten, die zu deinem Ranking beitragen, sollte der volle Text mobil ohne zusätzliche Taps zugänglich sein.
Die interne Verlinkung sollte am Desktop und mobil gleich sein. Hat dein Desktop-Shop einen prominenten Bereich mit verwandten Produkten und Links zu anderen Kategorien, sollte die mobile Version diese Links auch enthalten. Navigationslinks, mit denen Google die Struktur deines Shops versteht, sollten mobil nicht verschwinden.
So geht WEMASY mit mobilen Geräten um
Das E-Commerce-System von WEMASY erzeugt responsive Shopseiten, die sich standardmäßig jeder Bildschirmgröße anpassen. Produktseiten, Kategorieseiten und Checkout sind so gestaltet, dass sie die Anforderungen der Mobile-First-Indexierung von Google erfüllen. Der Checkout unterstützt mobile Zahlungsarten und richtig typisierte Formularfelder. Die Core-Web-Vitals-Leistung steckt in Hosting und Auslieferung des Systems, du musst sie nicht von Hand optimieren. Was in welchem Tarif enthalten ist, siehst du auf der Preisseite.
Häufig gestellte Fragen
Wie prüfe ich, ob mein Shop mobilfreundlich ist?
Die Google Search Console enthält einen Bericht zur mobilen Nutzerfreundlichkeit. Er markiert konkrete Probleme auf deinen Seiten, etwa zu kleinen Text, zu eng stehende klickbare Elemente oder Inhalte, die breiter sind als der Bildschirm. PageSpeed Insights zeigt dir die Core-Web-Vitals-Werte getrennt für Mobilgeräte und Desktop. Beide Tools sind kostenlos und liefern konkrete, umsetzbare Ergebnisse statt eines pauschalen Bestanden oder Durchgefallen. Mit dem Website-Builder von WEMASY richtest du das direkt in deinem Shop ein.
Beeinflusst mobiles Design mein Google-Ranking?
Ja, direkt. Google nutzt die Mobile-First-Indexierung, dein Shop wird also anhand seiner mobilen Version bewertet. Die Core-Web-Vitals-Werte, die von mobilen Faktoren wie Ladegeschwindigkeit und Layout-Stabilität abhängen, sind ein bestätigtes Rankingsignal. Ein Shop, der mobil gut abschneidet, hat einen Rankingvorteil gegenüber einem, der das nicht tut, auch wenn die Desktop-Versionen gleichwertig sind.
Was ist das häufigste Problem im mobilen Checkout?
Die Reibung in Formularen ist das häufigste Problem. Checkout-Formulare für Maus und Tastatur erfordern auf dem Touchscreen zu viel Aufwand. Am meisten bringen diese Maßnahmen: richtige Eingabetypen, damit die passende Tastatur erscheint, weniger Felder, aktiviertes Autofill und mobile Zahlungsarten, bei denen niemand Kartendaten von Hand eingeben muss. Wer diese vier Punkte behebt, sieht meist eine messbare Verbesserung bei den abgeschlossenen mobilen Checkouts.
Wie wirkt sich die mobile Ladezeit auf den Umsatz aus?
Der Zusammenhang ist direkt und gut belegt. Studien zeigen einen Rückgang der Conversion-Rate um rund 4 % pro zusätzlicher Sekunde Ladezeit. Ein Shop, der in 1 Sekunde lädt, konvertiert deutlich besser als derselbe Shop mit 4 Sekunden. Gerade bei mobilen Shops, wo die Netzbedingungen schwanken und Besucher langsame Seiten schneller verlassen, bringen Verbesserungen der Ladezeit oft den schnellsten Ertrag aller technischen Investitionen.
Soll ich einen separaten mobilen Shop bauen oder Responsive Design nutzen?
Responsive Design, bei dem sich ein einziger Shop je nach Bildschirmgröße anpasst, ist der Standard und das, was Google empfiehlt. Separate mobile Seiten bedeuten mehr Wartungsaufwand, können zu Indexierungsunterschieden führen und sind schwerer synchron zu halten, wenn du Produkte und Inhalte aktualisierst. Gibt es keinen besonderen betrieblichen Grund für ein getrenntes mobiles Erlebnis, ist Responsive Design unter einer einzigen URL die richtige Wahl.
Wie senke ich die mobile Warenkorbabbruchrate?
Mobile Warenkorbabbrüche entstehen aus einer Mischung aus Reibung und Ablenkung. Am meisten helfen: ein vereinfachter Checkout mit möglichst wenigen Schritten und Feldern, ein Gast-Checkout ohne Kontoerstellung, mobile Zahlungsarten ohne manuelle Karteneingabe und eine schnell ladende Checkout-Seite. Auch Retargeting per E-Mail bei abgebrochenen Warenkörben hilft, Besuche zurückzuholen, in denen der Kunde den Kauf nicht in einer einzigen Sitzung abgeschlossen hat.