Why mobile is the whole game
70-80% of your ecommerce traffic is mobile. For most consumer categories it's pushing 85%. Desktop conversion is typically 2-3x mobile conversion, which tells you less about desktop being better and more about mobile being broken on most stores.
A well-optimised mobile experience can close the gap, and often flips it: some DTC brands now convert mobile at or above desktop. The difference is specific, measurable, and mostly about hygiene, not innovation.
This post covers what actually moves mobile conversion, with benchmarks, tools, and specific things to fix. Not "design for mobile-first". The specific checks that produce the compound lift.
1. Core Web Vitals and why Google watches them
Google uses Core Web Vitals as a ranking signal and a proxy for experience quality. Beyond the SEO angle, the underlying metrics are strong predictors of conversion.
LCP (Largest Contentful Paint)
Time until the largest above-the-fold element (usually a hero image or H1) renders. Target: under 2.5 seconds on mobile 4G.
Most common causes of bad LCP:
- Hero image uncompressed or too large
- Web font loading blocking render
- Third-party script injection (chat widgets, analytics, A/B test tools) in the
<head>
INP (Interaction to Next Paint)
Time from a user interaction (tap) to the next visual update. Target: under 200ms.
Most common causes of bad INP:
- JavaScript-heavy pages (React/Vue stores without code-splitting)
- Analytics or chat scripts firing synchronously on interaction
- Tap delay on older mobile browsers
CLS (Cumulative Layout Shift)
Things jumping around the page as it loads. Target: under 0.1.
Most common causes:
- Images without width/height attributes
- Ads or third-party embeds loading after content
- Fonts loading and changing text sizing
How to check
Free: PageSpeed Insights runs Lighthouse and reports all three. Test your top-revenue product page, not your homepage. Fix what's red, accept what's amber, move on.
Paid / deeper: WebPageTest.org for waterfall analysis, Chrome DevTools Performance tab for local profiling.
2. Mobile speed under 3 seconds (actual mobile, not throttled desktop)
A desktop browser's "mobile emulator" uses a fast connection and a fast CPU. Real mobile phones use slower connections and slower CPUs. The gap is substantial.
Test on real phones on 4G. If your page takes 2 seconds on Chrome's mobile emulator, it's probably 4-5 seconds on a mid-range Android on 4G.
Biggest speed wins (in order)
- Image optimisation: compress to 80% quality, resize to actually-needed dimensions, serve WebP or AVIF. Shoprocket does this automatically via Cloudflare
- Lazy-load below-fold content. Images, iframes, heavy scripts shouldn't load until scrolled to
- Defer non-critical JavaScript. Analytics, chat widgets, A/B test tools shouldn't block render
- Cache static assets aggressively. 1-year cache on images, fonts, CSS, JS with fingerprinted URLs
- Use a CDN (Cloudflare, Fastly, or your platform's built-in). Serves assets from geographically-close edges
- Reduce third-party scripts. Every pixel and tag adds ~50-200ms; audit what's actually necessary
3. Touch target sizing
Apple's Human Interface Guidelines specify 44×44 pixels minimum touch targets. Google Material specifies 48×48. Most theme "mobile" versions hit neither.
Fixes:
- Buttons at least 44px tall with 8-12px padding inside
- Links in nav at least 44px tall
- Form inputs at least 44px tall (also helps accessibility)
- Spacing between adjacent tap targets at least 8px
Test: open your store on a phone. Try to tap the category nav with your thumb. Are you mis-tapping? That's a touch-target problem.
4. Mobile checkout specifics
Cart and checkout on mobile are where most conversion bleeds. Specific to-do list:
Single-column forms
Two-column forms work on desktop, fail on mobile. Stack every field vertically. No exceptions.
Appropriate input types
- Email field:
type="email"(brings up email keyboard with @ symbol) - Phone:
type="tel"(numeric keyboard) - Postal code:
type="text" inputmode="numeric"for countries with numeric postcodes - Credit card number:
type="text" inputmode="numeric" autocomplete="cc-number"(makes autofill work)
Most platforms get this right natively. Worth checking your form on a phone; if the wrong keyboard comes up, fix it.
Autofill friendliness
Browsers can auto-fill name, address, email, phone, card details if the form's autocomplete attributes are correct. A customer tapping an auto-fill suggestion completes checkout in 3 seconds. Without autofill, they manually type 12+ fields.
Standard autocomplete values: name, email, tel, street-address, postal-code, country, cc-number, cc-exp, cc-csc, cc-name.
Sticky Add-to-Cart on product pages
Scroll down a mobile product page 3 screens and the Add to Cart button is off-screen. Fix: add a sticky bottom bar with the price and Add to Cart that appears once the original button scrolls off.
Apple Pay + Google Pay + Link
These are the single biggest mobile-checkout lifts. One-tap payment with no typing; native biometric authentication.
- Apple Pay: enabled automatically once you verify your domain with Stripe (Shoprocket handles this)
- Google Pay: similar
- Stripe Link: fills the card and address from Link's cross-site identity
Every mobile checkout without these is leaking customers. Enable all three.
5. Form field reduction
Every field on your mobile checkout is a friction point. Audit your fields:
Usually needed:
- Shipping address (name, street, city, postcode, country)
- Payment details (or Apple/Google Pay)
Often over-collected:
- Phone number (only if you need it for delivery / shipping carriers; many don't)
- Date of birth (almost never needed at purchase)
- Company name (only for B2B)
- Newsletter signup (pre-checked where legal; separate checkbox otherwise)
- "How did you hear about us?" (move to post-purchase survey)
Fewer fields = faster checkout = higher completion. Every field you remove is roughly a 5-10% improvement in mobile checkout completion, compounding.
6. Readable type and line length on mobile
- Body copy: 16px minimum (the iOS default and Google's Material guideline)
- Line length: 45-75 characters
- Line height: 1.4-1.6x the font size
- Contrast: WCAG AA minimum (4.5:1 body, 3:1 large text)
If customers pinch to zoom on your product description, your type is too small. If they have to turn the phone sideways to read, your line length is too wide or font is too tight.
7. One-handed use considerations
Most mobile users use their phone one-handed, thumb-reaching from the bottom-right (or bottom-left for lefties). Important interactions should be in that thumb zone.
- Primary CTA (Add to Cart, Checkout, Buy Now) near the bottom
- Navigation hamburger top-left or top-right, within thumb reach
- "Back" button predictable (browser back usually beats custom back buttons)
Don't require double-tapping hard-to-reach areas. Every thumb gymnastic moment loses customers.
8. Mobile-specific product page
Desktop product pages often show everything at once (gallery on the left, details on the right, description below). That layout doesn't translate to mobile; you have to sequence the content.
Effective mobile PDP sequence:
- Hero image (swipeable gallery)
- Title + price
- Variant selector (size, colour)
- Add to Cart (primary CTA)
- Trust signals (rating, free shipping, returns)
- Description (collapsible, fold after 3 lines)
- Specs / details (collapsible)
- Reviews summary with "see all" expansion
- Related products
- FAQ (collapsible)
Below-fold content should be lazy-loaded. A mobile customer often makes the buy decision in the first 3 sections; loading everything slows that decision.
9. Testing on real devices
Not DevTools. Not the browser's mobile emulator. Real phones on cellular connections.
Minimum test rotation:
- iPhone SE (small screen, older device)
- iPhone 15 Pro (newest iOS, Safari)
- Samsung Galaxy mid-range (Android, Chrome)
- Older Android on 4G (surfaces performance issues)
Bonus: ask 3 friends with different phones to try buying something on your store. Watch them. What they struggle with is your fix list.
10. Avoiding mobile-killer patterns
Common mistakes that trash mobile conversion:
Interstitial popups
"Subscribe for 10% off!" popup that covers the screen on mobile landing. Google penalises these in mobile search rankings. Customers hit them and bounce. Use inline signups instead.
Auto-playing video with audio
Wastes bandwidth, annoys users, iOS often blocks it anyway. Auto-play muted is acceptable for hero video; auto-play with sound is user-hostile.
Hover states on touch
"Hover to see details" doesn't work on touch. If your theme still has hover-to-reveal patterns on mobile, they're effectively broken.
Tiny clickable "close" buttons on modals
A 16-pixel X in the corner is unhittable with a thumb. Make close buttons 44×44 or use full-width "Close" buttons at the bottom of modals.
Horizontal scroll on product grids
On mobile, horizontal-scroll product carousels hide 80% of products below the fold. A vertical grid (2 columns on mobile) converts better.
What Shoprocket handles for mobile
Most of the table stakes out of the box:
- Automatic image optimisation: resize + compress + WebP + lazy-load on every product image
- Cart drawer (not full-page cart) is default on mobile
- Sticky mobile Add-to-Cart supported in themed storefronts
- Mobile-responsive checkout with correct input types, autocomplete, stacking
- Apple Pay + Google Pay + Stripe Link one-tap payment via Stripe
- Mobile-responsive live chat widget
- CDN delivery via Cloudflare for every asset
- Core Web Vitals optimised out of the box for the hosted storefront
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
Widget embed users: you control the surrounding page's speed and design. Shoprocket's widget is lazy-loaded and won't block your page render, but the overall page speed is yours to manage.
Tip: Once a quarter, run PageSpeed Insights on your top-3-revenue product pages on mobile. Write down the three Core Web Vitals scores. Next quarter, compare. Trending down is a silent conversion killer; catch it quarterly rather than after the damage.
TL;DR
- Mobile is 70-85% of traffic. Most stores treat it as an afterthought; don't
- Core Web Vitals are the three numbers to track: LCP, INP, CLS. Under 2.5s / 200ms / 0.1
- Test on real devices on 4G, not a browser emulator
- Checkout specifics: single-column forms, correct input types, autocomplete, Apple/Google Pay, sticky CTAs
- Fewer form fields = higher completion. Audit what's actually needed
- Touch targets 44×44 minimum. Spacing between targets 8px minimum
- Thumb zone matters. Primary CTAs near the bottom; hamburgers top-left/right
- Avoid mobile-killers: interstitials, auto-play audio, hover states, tiny close buttons
Start a free trial and get automatic image optimisation + Apple Pay + mobile-native checkout from day one. 14 days, no card.
Building ecommerce tools for independent sellers since 2013.
