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 Stats . People 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 devices. Google has completed its transition to Mobile-First. This means the mobile version of your site is paramount. You can find confirmation of this in the Google Search Central article . If mobile content or structured data is missing, you'll 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. It has replaced FID. Its introduction and impact are described on web.dev . Its 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 the URL Inspection tool 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.

So go ahead

• Identifying top landing pages
• Check mobile readability and click depth
• Place internal links in the first paragraphs.
• Keep category introductory text short, make filters easily identifiable
• Supplement product data as structured data

What is often missing

• Reduced content in accordions without meaningful labels
• Invisible filters on small displays
• Low image quality for important products
• Unclear navigation hierarchy

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:

.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

Display shipping costs early. Specify the delivery time. Clearly state the return policy. This will reduce abandoned checkout processes.

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

Short texts help. For example: Order today, delivery on Wednesday. This 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're missing out on real-world performance. If you only measure in the field, you're missing out on 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. Maintain the targets: LCP under 2.5 seconds for 75 percent of requests, CLS under 0.1 seconds, and INP under 200 milliseconds. Background information on INP can be found in the article on web.dev . This 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 your mobile device

• 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