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 Sie mobil. Google hat die Umstellung auf Mobile First abgeschlossen. Das heißt, die mobile Version Ihrer Seite ist maßgeblich. Die Bestätigung dazu finden Sie im Beitrag von Google Search Central. Fehlen mobil Inhalte oder strukturierte Daten, verlieren Sie Sichtbarkeit. Sorgen Sie also dafür, dass mobil alles vollständig ist.

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

SEO beginnt mobil

Richten Sie Ihre Inhalte in der mobilen Ansicht aus. Prüfen Sie, ob Headlines, Textblöcke, Bilder, interne Links und strukturierte Daten mobil vollständig und zugänglich sind. Nutzen Sie die URL-Prüfung in der Search Console. Wählen Sie den Smartphone-Agent. Vergleichen Sie gerenderte HTML-Strukturen zwischen mobil und Desktop. Achten Sie auf identische Canonicals und korrekte hreflang-Paare. Vermeiden Sie noindex auf mobilen Pfaden.

So gehen Sie vor

• Top-Landingpages identifizieren
• Mobil auf Lesbarkeit und Klicktiefe prüfen
• Interne Links in den ersten Absätzen platzieren
• Kategorie-Introtext kurz halten, Filter erkennbar machen
• Produktdaten als strukturierte Daten ergänzen

Was häufig fehlt

• Reduzierte Inhalte in Akkordeons ohne sinnvolle Labels
• Unsichtbare Filter auf kleinen Displays
• Niedrige Bildqualität bei wichtigen Produkten
• Unklare Navigationshierarchie

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. Sie verbessern 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

Zeigen Sie Versandkosten früh. Nennen Sie die Lieferzeit konkret. Nennen Sie die Rückgabe klar. So reduzieren Sie 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

Messen Sie nur im Labor, sehen Sie nicht den Alltag. Messen Sie nur im Feld, finden Sie die Ursache nicht. Sie brauchen beides. Nutzen Sie Lighthouse und WebPageTest im Labor. Nutzen Sie CrUX und ein eigenes RUM-Setup im Feld. Richten Sie Events für LCP, CLS und INP ein. Halten Sie 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 Ihnen der Beitrag auf web.dev. So steuern Sie Verbesserungen mit Daten.

Ihr 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 messen Sie 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

Ihre Erfahrung