- name
- mobile-ux-audit
- description
- Audit the mobile shopping experience of an ecommerce store for friction points including page load speed, thumb-reach interactions, form length, checkout flow, and pay-method breadth. Use when mobile conversion rate is lagging desktop, before a major redesign, or quarterly as a hygiene pass.
Mobile UX Audit
Mobile is usually 65–80% of ecommerce traffic and ~50% of revenue. The gap between traffic share and revenue share is the audit's job: find the thumb-reach errors, the slow hero images, the checkout fields that kill the sale.
Quick Reference
| Decision | Strong | Acceptable | Weak |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤2.0s on 4G | 2.0–2.5s | >2.5s |
| INP (Interaction to Next Paint) | ≤150ms | 150–300ms | >300ms |
| CLS (Cumulative Layout Shift) | ≤0.05 | ≤0.1 | >0.1 |
| Tap targets | ≥44×44pt with ≥8pt spacing | 40pt with tight spacing | <40pt, close together |
| Checkout fields | ≤8 fields, one-page | 10–12 fields, 2 pages | 15+ fields, 3+ pages |
| Pay methods | Apple Pay, Google Pay, card, 1 local | Card + PayPal | Card only |
| Guest checkout | Default, no account required | Account optional after checkout | Forced account creation |
Problems this skill solves
- Conversion rate 40% lower on mobile than desktop with no clear diagnosis.
- Cart abandonment spiking at the address-entry step — usually a mobile-keyboard/autofill problem.
- PDP hero image taking 4+ seconds to load because the team uses the same 3000px-wide asset as desktop.
- Checkout buttons in the top third of the screen requiring an awkward thumb stretch.
- Apple Pay / Google Pay not enabled on a store where 70% of users are on iOS or Android.
- Modals and popups that cover the close button on small screens.
- Tap targets smaller than the thumb pad, producing fat-finger errors on filters and quantity steppers.
Workflow
Step 1 — Measure Core Web Vitals in the field
Pull the last 28 days of real-user metrics from PageSpeed Insights (CrUX), Google Search Console, or your RUM tool (Datadog, New Relic, Sentry, or Shopify's built-in). Record p75 LCP, INP, CLS for mobile. Compare to the Quick Reference table. Lab-test tools (Lighthouse) give consistent scores but do not reflect real users — always lead with field data.
Step 2 — Walk the funnel on a real device
Not an emulator, not Chrome DevTools device mode. Use an actual iPhone and an actual mid-range Android (Pixel 6a or similar — not the latest flagship). Walk: home → category → PDP → add to cart → cart → checkout → payment. Note every friction: slow load, mis-sized tap target, layout shift, confusing state, keyboard-covers-field moment.
Step 3 — Audit thumb reach
The comfortable thumb zone on a 6-inch phone is the bottom two-thirds of the screen. Anything in the top third (headers, close buttons, primary CTAs) requires a reach or a hand shift. Map every primary CTA on the funnel and flag anything above the middle.
Step 4 — Audit form fields
List every field in the checkout. Score each: required or optional, keyboard type (email, tel, numeric), autocomplete attribute, inline validation. Target ≤8 required fields total. Common kill-fields: "confirm password," "phone number for delivery updates," "how did you hear about us."
Step 5 — Audit the payment step
List enabled pay methods. For every market the store serves:
- Apple Pay enabled with domain verification? Required for iOS conversion.
- Google Pay enabled? Required for Android conversion.
- One local method per region (iDEAL in NL, Bancontact in BE, Klarna / Afterpay for installments, SEPA in EU, Pix in BR, UPI in IN).
- Card fields with proper keyboard (numeric, cardtype icons, CVV as numeric).
- 3DS flow is not full-page redirect (use inline 3DS).
Step 6 — Image and asset audit
- Hero images: served as WebP or AVIF, responsive srcset, ≤200KB at mobile breakpoint.
- Below-fold images: lazy-loaded.
- Fonts: WOFF2, subset to used characters, preloaded for critical text.
- No layout shift from image or ad loads (
widthandheightattributes or aspect-ratio boxes). - Video: don't autoplay. If used, poster image first, lazy-load the
<video>element.
Step 7 — Document findings with priority
Produce a ranked list: P0 (blocks checkout), P1 (measurably hurts conversion), P2 (polish). Each item gets the friction described, the screen(s) affected, and a concrete fix.
Example 1 — Shopify store, 62% mobile traffic, 28% mobile conversion rate vs. desktop
Findings from a 2-hour audit:
- P0: Apple Pay not enabled despite 58% of mobile users on iOS. Domain unverified in Apple Pay portal. Estimated impact: +8–12% mobile checkout completion.
- P0: Checkout has 14 fields including optional company name, phone "for delivery," and a captcha that fails 30% of the time on mobile. Impact: +5–8% checkout completion from field reduction.
- P1: Hero image is a 4000px JPEG at 1.2MB. Re-export at 1200px WebP (~120KB). LCP drops from 3.8s to 1.9s.
- P1: Add-to-cart button top-right of PDP on mobile, requiring thumb reach. Move to sticky-bottom.
- P1: Filter modal on category page covers the close-X behind the OS status bar on iPhone. Add 44pt top padding.
- P2: "Suggested for you" section loads below the hero with a 300ms layout shift (CLS 0.18). Reserve space.
- P2: Login prompt appears after 15 seconds on every page. Reduce to once-per-session.
Estimated combined lift: 20–30% on mobile conversion over 4–6 weeks after deployment.
Example 2 — Headless store (Next.js + commerce API), strong desktop, poor mobile INP
The team already optimizes LCP and CLS and has green Core Web Vitals on desktop. Mobile INP is 420ms — users tap and nothing happens for nearly half a second.
- P0: Main-thread blocked by an analytics bundle firing synchronously on every route change. Move to a web worker or defer 2 seconds after route settle. Expected INP drop: 420ms → 180ms.
- P0: The "add to cart" handler calls three tracking scripts synchronously before showing the cart drawer. Fire tracking async, show drawer immediately. Expected: drawer opens in <100ms instead of 600ms.
- P1: Image carousel on PDP uses a heavy library (40KB) that blocks interaction. Swap for CSS-scroll-snap approach, 2KB, same UX.
- P1: Variant selector re-renders the entire PDP on each change. Memoize properly or split into a sibling component.
- P2: Service worker caches stale HTML for 24h, so bug fixes don't reach users fast. Reduce TTL to 1h and add a "fresh version available" toast.
Strong teams still have mobile-INP debt. The fix is usually "less JavaScript on tap," not "smaller hero image."
Common mistakes
- Auditing only on the latest iPhone. A mid-range Android at 4G is the real median user.
- Using Lighthouse as the only signal. Lab scores miss cold-start jank and main-thread contention.
- Treating mobile as "desktop minus width." The thumb pattern, keyboard behavior, and attention span are fundamentally different.
- Fixing LCP with a CDN and declaring victory. LCP is three factors: server response, render-blocking resources, and hero-asset size. The CDN only touches one.
- Forcing account creation before checkout. This is a 20%+ conversion hit on cold traffic.
- Modals with no visible close button on 4-inch screens. Test on a small device; buttons crop out.
- Infinite-scroll product listing without pagination cues. Users feel lost and leave.
- Autoplay video on mobile. Eats data, battery, and autoplay policies often block it anyway.
- Sticky headers that eat 20% of vertical real estate. On a phone, every pixel counts.
- Not testing with JavaScript disabled. Many mobile users have flaky JS loading; a site that only works with full JS is broken for them.
Resources
references/output-template.md— Audit report template with P0/P1/P2 structure.references/core-web-vitals.md— How to measure and interpret LCP, INP, CLS in the field.references/checkout-checklist.md— Mobile checkout audit checklist with field-by-field notes.references/thumb-zones.md— Thumb-reach diagrams and interaction patterns.assets/mobile-audit-checklist.md— Full pre-publish audit checklist.