Shop-Optimierung: Mobile first

Warum Mobile jetzt entscheidet

Mobile ist der erste Kontakt. In vielen Märkten liegt der mobile Traffic über dem Desktop-Anteil. Das zeigen laufende Auswertungen wie die StatCounter Global Stats. Menschen recherchieren unterwegs, speichern Produkte und schließen später ab. Wer mobil überzeugt, senkt die Absprungrate und steigert den Umsatz pro Sitzung.

Auch die Suche bewertet dich mobil. Google hat die Umstellung auf Mobile First abgeschlossen. Das heißt, die mobile Version deiner Seite ist maßgeblich. Die Bestätigung dazu findest du im Beitrag von Google Search Central. Fehlen mobil Inhalte oder strukturierte Daten, verlierst du Sichtbarkeit. Sorge also dafür, dass mobil alles vollständig ist.

Seit 2024 steht eine Kennzahl im Fokus. INP misst die Reaktionszeit deiner Seite auf Interaktionen. INP hat FID abgelöst. Die Einführung und die Auswirkungen sind auf web.dev beschrieben. Dein Ziel sind kurze Reaktionszeiten bei Klicks, Taps und Eingaben. Das spüren Nutzer sofort.

SEO beginnt mobil

Richte deine Inhalte in der mobilen Ansicht aus. Prüfe, ob Headlines, Textblöcke, Bilder, interne Links und strukturierte Daten mobil vollständig und zugänglich sind. Nutze die URL-Prüfung in der Search Console. Wähle den Smartphone-Agent. Vergleiche gerenderte HTML-Strukturen zwischen mobil und Desktop. Achte auf identische Canonicals und korrekte hreflang-Paare. Vermeide noindex auf mobilen Pfaden.

Performance: schnell laden, flüssig reagieren

Mobile Performance steht auf drei Säulen. LCP für das größte sichtbare Element. CLS für stabile Layouts. INP für schnelle Reaktionen. Diese Kennzahlen sind Teil der Core Web Vitals. Du verbesserst sie mit wenigen, fokussierten Maßnahmen.

Schnelle Hebel

• Bilder mit srcset und sizes ausliefern
• Moderne Formate wie WebP oder AVIF einsetzen, wenn kompatibel
• Lazy Loading für Bilder unterhalb des sichtbaren Bereichs
• Webfonts mit font-display: swap laden, Hauptschrift preladen
• Unkritisches JavaScript verzögern, Bundles aufräumen
• CDN und sauberes HTTP Caching nutzen

Beispiele aus der Praxis

Viewport korrekt setzen:

<meta name="viewport" content="width=device-width, initial-scale=1">

Responsive Bilder:

<img
  src="/img/produkt-640.webp"
  srcset="/img/produkt-640.webp 640w,
          /img/produkt-960.webp 960w,
          /img/produkt-1280.webp 1280w"
  sizes="(max-width: 640px) 95vw, (max-width: 960px) 70vw, 640px"
  alt="Produktbild">

Lazy Loading aktivieren:

<img loading="lazy" decoding="async" alt="Detail" src="/img/detail.webp">

Webfont vorab laden:

<link rel="preload" as="font" href="/fonts/Inter-Var.woff2" type="font/woff2" crossorigin>

Interaktionen entlasten:

// Lange Tasks aufbrechen
function heavy() { /* ... */ }

document.querySelector('#cta').addEventListener('click', () => {
  setTimeout(heavy, 0); // Event-Loop freihalten
});

Stabilität gegen Layout-Shifts

• Für Bilder feste Breiten und Höhen setzen
• Werbeplätze und Embeds mit Platzhaltern reservieren
• Systemschrift als Fallback definieren

Mobile UX: klare Wege, große Ziele, wenig Tippen

Navigation und Suche

• Suche prominent platzieren, Autocomplete aktivieren, Synonyme pflegen
• Filter horizontal scrollen lassen, aktive Filter deutlich zeigen
• Kategorien kurz benennen, klare Icons einsetzen

Tap-Ziele

• Zielgröße ab etwa 48 dp, rund 9 mm, mit Abstand zwischen Elementen
• Links im Fließtext mit zusätzlichem Padding vergrößern

Formulare

• Passende Tastatur wählen, etwa E-Mail, Zahl, Telefon
• Labels sichtbar lassen, Live-Validierung nutzen
• Automatisches Ausfüllen erlauben

Code-Snippets

Richtige Tastatur pro Feld:

<input type="email"   inputmode="email"   autocomplete="email"   placeholder="E-Mail">
<input type="tel"     inputmode="tel"     autocomplete="tel"     placeholder="Telefon">
<input type="number"  inputmode="numeric" autocomplete="one-time-code" placeholder="Code">

Tap-Ziele vergrößern:

.tap { min-width: 48px; min-height: 48px; padding: 10px 12px; display: inline-flex; align-items: center; justify-content: center; }

Produktliste und Produktseite: Entscheidung leichter machen

Zeige Versandkosten früh. Nenne die Lieferzeit konkret. Nenne die Rückgabe klar. So reduzierst du Abbrüche im Checkout.

Checkout: mobil ohne Reibung

• Gast-Checkout anbieten
• Wenige Schritte, Fortschritt sichtbar machen
• Schnellzahlen wie Apple Pay, Google Pay, PayPal, Klarna integrieren
• Adresse mit Autocomplete und Postleitzahl-Suche erfassen
• Fehler sofort zeigen, Eingaben erhalten

Kleine Texte helfen. Beispiel. Bestelle heute, Lieferung am Mittwoch. Das schafft Klarheit und Vertrauen.

Technik: stabile Basis für mobile Qualität

Rendering

• Server Side Rendering oder Static Rendering für wichtige Seiten
• Code-Splitting nach Route, Insel-Architektur für interaktive Bereiche
• Third-Party-Skripte prüfen, nur Nützliches laden

Bilder und Assets

• CDN mit Bildtransformationen, Größen dynamisch liefern
• Inline-SVG statt Icon-Fonts
• Preconnect zu wichtigen Domains setzen

Beispiele

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.example.com">

Service Worker für schnelle Wiederbesuche:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}

Messung: Lab und Feld kombinieren

Misst du nur im Labor, siehst du nicht den Alltag. Misst du nur im Feld, findest du die Ursache nicht. Du brauchst beides. Nutze Lighthouse und WebPageTest im Labor. Nutze CrUX und ein eigenes RUM-Setup im Feld. Richte Events für LCP, CLS und INP ein. Halte die Ziele ein. LCP unter 2.5 Sekunden bei 75 Prozent der Aufrufe. CLS unter 0.1. INP unter 200 Millisekunden. Hintergrund zu INP liefert dir der Beitrag auf web.dev. So steuerst du Verbesserungen mit Daten.

Dein Plan für 30 Tage

Woche 1: Analyse und Quick Wins

• PageSpeed Insights für die wichtigsten Landingpages prüfen
• Größte Ressourcen identifizieren, unnötige Skripte entfernen
• Lazy Loading aktivieren, Hero-Bild neu komprimieren, Schrift preladen
• Viewport und Meta-Tags kontrollieren, doppelte Weiterleitungen fixen

Woche 2: JavaScript und Bilder

• Bundle-Größe messen, Bibliotheken reduzieren
• Code-Splitting einführen, Routenbasiertes Laden aktivieren
• Bilder via CDN in passenden Breakpoints ausliefern

Woche 3: UX und Checkout

• Suche und Filter testen, Tap-Ziele vergrößern
• Checkout auf drei Abschnitte kürzen, Gastkauf aktivieren
• Schnellzahlen ergänzen, Lieferzeit konkret nennen

Woche 4: Validierung und Backlog

• A/B-Test für CTA-Platz und Button-Texte
• Felddaten erneut prüfen, Ziele anpassen
• Backlog für das nächste Quartal planen

KPI: das misst du mobil

• Mobile Conversion Rate Käufe durch mobile Sitzungen
• Time to First Byte Serverleistung sichtbar machen
• LCP, INP, CLS Kernwerte für Bild, Interaktion, Stabilität
• Checkout Completion Rate abgeschlossene Käufe durch begonnene Checkouts
• Search Usage Anteil Sitzungen mit Suchnutzung

Checkliste: 14 Punkte für heute

• Viewport korrekt gesetzt
• Hero-Bild optimiert und vorab geladen
• Responsive Bilder mit srcset und sizes
• Lazy Loading aktiv
• Tap-Ziele groß genug
• Suche prominent und schnell
• Filter nutzbar per Swipe
• Checkout mit Gastkauf
• Schnellzahlen integriert
• Formulare mit passenden Tastaturen
• RUM für LCP, INP, CLS aktiv
• Search Console mobil geprüft
• Third-Party-Skripte bewertet
• CDN und Caching konfiguriert

Deine Erfahrung