Shop optimization: Mobile first

Why Mobile is deciding now

Mobile is the first point of contact. In many markets, mobile traffic exceeds desktop traffic. This is shown by ongoing analyses such as... StatCounter Global StatsPeople research on the go, save products, and complete purchases later. Those who deliver a compelling mobile experience lower the bounce rate and increase revenue per session.

Search also ranks you on mobile. Google has completed its Mobile-First strategy. This means the mobile version of your site is the primary ranking factor. You can find confirmation of this in the article by Google Search CenterIf content or structured data is missing on mobile devices, you lose visibility. So make sure everything is complete on mobile.

Since 2024, one key metric has been the focus: INP. INP measures your website's response time to interactions. INP has replaced FID. Its introduction and impact are described in detail below. web.dev As described. Your goal is short response times for clicks, taps, and input. Users notice this immediately.

SEO starts on mobile

Optimize your content for mobile viewing. Check that headlines, text blocks, images, internal links, and structured data are fully accessible on mobile devices. Use URL Inspection in Search Console. Select the smartphone agent. Compare rendered HTML structures between mobile and desktop. Ensure identical canonicals and correct hreflang pairs. Avoid using noindex on mobile paths.

Performance: fast loading, smooth response

Mobile performance rests on three pillars: LCP (Large View Point) for the largest visible element, CLS (Content Layout Stability) for stable layouts, and INP (Input Performance Profile) for fast response times. These metrics are part of the Core Web Vitals. You can improve them with a few focused measures.

Quick levers

• Pictures with srcset and sizes deliver
• Use modern formats such as WebP or AVIF, if compatible.
• Lazy loading for images below the visible area
• Webfonts with font-display: swap load, preload main font
• Delay non-critical JavaScript, clean up bundles
• Use CDN and clean HTTP caching

Practical examples

Set viewport correctly:

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

Responsive images:

<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">

Enable lazy loading:

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

Preload webfont:

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

Reduce interactions:

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

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

Stability against layout shifts

• Set fixed widths and heights for images
• Reserve advertising space and embeds with placeholders
• Define system font as fallback

Mobile UX: clear paths, big goals, minimal typing

Navigation and search

• Place search results prominently, activate autocomplete, maintain synonyms
• Allow filters to scroll horizontally, clearly show active filters
• Use short names for categories and clear icons.

Tap goals

• Target size from approximately 48 dp, around 9 mm, with spacing between elements
• Enlarge links in the running text by adding extra padding

Forms

• Select the appropriate keyboard layout, such as email, number, or phone.
• Leave labels visible, use live validation
• Allow autofill

Code snippets

Correct keyboard layout for each field:

<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">

Enlarge tap targets:

E-news for ambitious developers - read up to get fit 💰Which jobs in e-commerce are the most lucrative and have the greatest future?🛒

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

Product list and product page: Making the decision easier

Show shipping costs early. State the delivery time clearly. Clearly state the return policy. This will reduce abandoned checkouts.

Checkout: mobile, seamless

• Offer guest checkout
• A few steps, making progress visible
• Quick numbers such as Apple PayIntegrate Google Pay, PayPal, and Klarna.
• Enter address using autocomplete and postcode search
• Show errors immediately, receive input

Kleine texts Help. For example: Order today, delivery on Wednesday. That creates clarity and trust.

Technology: a stable foundation for mobile quality

Rendering

• Server-side rendering or static rendering for important pages
• Code splitting by route, island architecture for interactive areas
• Check third-party scripts, load only useful ones

Images and assets

• CDN with image transformations, dynamically delivering sizes
• Inline SVG instead of icon fonts
• Set up preconnect to important domains

examples

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

Service workers for quick follow-up visits:

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

Measurement: Combining lab and field measurements

If you only measure in the lab, you won't see real-world performance. If you only measure in the field, you won't find the root cause. You need both. Use Lighthouse and WebPageTest in the lab. Use CrUX and your own RUM setup in the field. Configure events for LCP, CLS, and INP. Meet the targets: LCP under 2.5 seconds for 75 percent of requests, CLS under 0.1, and INP under 200 milliseconds. Background information on INP can be found in the article on [website/publication name]. web.devThis is how you drive improvements with data.

Your 30-day plan

Week 1: Analysis and Quick Wins

• Check PageSpeed ​​Insights for the most important landing pages
• Identify the largest resources, remove unnecessary scripts
• Enable lazy loading, recompress hero image, preload font
• Check viewport and meta tags, fix duplicate redirects

Week 2: JavaScript and Images

• Measure bundle size, reduce libraries
• Introduce code splitting, enable route-based loading
• Deliver images via CDN at appropriate breakpoints

Week 3: UX and Checkout

• Test search and filters, enlarge tap targets
• Reduce checkout to three sections, activate guest checkout.
• Add quick figures, specify delivery time

Week 4: Validation and Backlog

• A/B test for CTA placement and button texts
• Recheck field data, adjust targets
• Planning the backlog for the next quarter

KPI: what you measure on mobile

• Mobile Conversion Rate Purchases through mobile sessions
• Time to First Byte Make server performance visible
• LCP, INP, CLS Key values ​​for image, interaction, stability
• Checkout Completion Rate Completed purchases through started checkouts
• Search Usage Percentage of sessions with search usage

Checklist: 14 points for today

• Viewport correctly set
• Hero image optimized and pre-loaded
• Responsive images with srcset and sizes
• Lazy Loading active
• Tap targets large enough
• Search prominently and quickly
• Filter usable via swipe
• Checkout with guest purchase
• Fast numbers integrated
• Forms with compatible keyboards
• RUM active for LCP, INP, CLS
• Search Console mobile tested
• Third-party scripts evaluated
• CDN and caching configured

Your experience