A practical, plain‑English guide based on a production study during the pandemic era
Reality Check
Mobile is your primary storefront. When pages drag, shoppers bounce. During and after the COVID surge, traffic shifted to phones on variable networks, and many stacks kept shipping desktop‑sized assets to low‑power devices. The result: slow Largest Contentful Paint (LCP), janky layouts, and lost revenue.
The Post‑COVID Problem: More Mobile, Less Patience
Consumer behavior changed fast. Post‑COVID, a larger share of buyers browse and checkout on their phones - often on congested 4G or shared Wi‑Fi - while expecting app‑like speed. Heavy JavaScript, oversize images, render‑blocking fonts, and eager third‑party tags turn these sessions into long spinners and layout jumps.
Common pain points:
- Monolithic JS bundles delay interactivity on low‑end CPUs.
- Non‑responsive images waste bandwidth and inflate LCP.
- Fonts and third‑party scripts block rendering and cause layout shifts.
- Checkout flows assume desktop precision; thumbs and slow networks are less forgiving.
What Worked for Us (Production Study Summary)
In a two‑week A/B on mobile traffic, a focused set of optimizations improved page load and conversion. Here's a simplified summary of lab and field metrics:
12 Actionable Mobile E‑Commerce Wins
These are practical, low‑risk changes you can ship without a full rebuild. Treat bytes and main‑thread milliseconds like a budget, and protect them like margin.
1) Make Your Hero Image LCP‑Friendly
Your LCP is often the hero image. If you ship a desktop‑sized JPEG to every device, you're paying a bandwidth tax and waiting longer for first impressions. Use <picture> with AVIF/WebP plus a JPEG fallback. Always set intrinsic width/height to reserve space and prevent layout shifts. Preload only the LCP image - nothing else - so the browser prioritizes the right bytes.
- Serve 320/640/1024 variants via a CDN.
- Set sizes for common breakpoints so the browser picks the right resource.
- Use eager loading only for the above‑the‑fold hero; lazy‑load the rest.
2) Ship Less JavaScript on First Paint
Mobile CPUs are slower and single‑threaded parsing/compilation is expensive. Split your bundle by route, and lazy‑load non‑essential widgets (reviews, recs, chat). Defer analytics or experimentation code until after first interaction or idle time.
- Target ≤ 300 kB initial JS on PDP/PLP.
- Use route‑level code splitting and React.lazy/Suspense or dynamic imports.
- Load polyfills only when needed (feature detection).
3) Inline Just Enough Critical CSS
Above‑the‑fold styles help you paint fast, but inlining entire frameworks bloats HTML and delays TTFB. Extract a minimal critical CSS chunk and load the rest asynchronously.
- Keep critical CSS ~10--14 kB.
- Avoid blocking
@font‑facein the critical block. - Audit unused selectors and purge at build time.
4) Stop Blocking on Web Fonts
Brand typography matters, but not more than first paint. System font stacks render instantly; subset brand fonts to WOFF2 and use font‑display: swap so text appears immediately and upgrades later.
- Replace icon fonts with inline SVGs.
- Host fonts on your domain to leverage HTTP/2 prioritization.
- Keep to 1--2 weights; variable fonts only if carefully subset.
5) Right‑Size Every Image
Most e‑commerce payloads are images. Serve modern codecs, generate multiple sizes, and lazy‑load below‑the‑fold media. A simple image CDN rule (format=auto, quality cap, width param) cuts bytes without hurting visual quality.
- Prefer AVIF/WebP, fall back to JPEG.
- Constrain max dimensions for thumbnails and carousels.
- Add decoding='async' to let painting proceed.
6) Budget the Main Thread
Jank comes from main‑thread contention: layout thrashing, long tasks, heavy JSON parsing. Batch DOM reads/writes, debounced event handlers, and hand off heavy work to Web Workers.
- Keep any single task < 50 ms; split long tasks.
- Schedule non‑critical work with requestIdleCallback.
- Measure Long Tasks in RUM to find offenders.
7) Govern Third‑Party Tags
Third‑party scripts quietly eat your budget. Put every vendor on a diet and load them async/defer by default. Consent‑gate anything non‑essential; remove tags you don't measure.
- Cap each vendor to ~50 kB and ~50 ms on main.
- Self‑host where possible; avoid document.write.
- Load heatmaps/recorders only on selected pages.
8) Cache Like You Mean It
Caching turns repeat visits into instant experiences. Use immutable asset URLs with long TTLs. A Service Worker can precache the shell and the last‑viewed PDP to speed back/forward and session continuity.
- Adopt stale‑while‑revalidate for lists/search.
- Version assets in filenames to keep caches honest.
- Warm critical pages via edge/CDN when safe.
9) Thumb‑First, Friction‑Free Checkout
Checkout should feel inevitable once intent is high. Optimize for thumbs: large tap targets, autofill everything, Apple/Google Pay, and minimal steps. Keep users on the same route to avoid full reloads.
- Use CSS transforms/opacity for subtle motion only.
- Inline SVG icons; avoid layout‑triggering effects.
- Validate inline; never clear fields on errors.
10) Load by Connection Quality
One size does not fit all networks. Detect effective connection type or RTT and progressively enhance. On slow links, skip high‑res carousels and defer secondary content. On fast links, upgrade assets.
- Gate non‑critical features behind network hints.
- Offer a "data saver" toggle that sticks in local storage.
- Prefer streaming and progressive decoding where possible.
11) Measure Real Users and Gate Releases
Lab tools are great for repeatability; real‑user monitoring (RUM) tells you what customers feel. Track LCP/CLS/interaction timing by device and network. Enforce budgets in CI and fail on regressions.
- Instrument element‑timing for the hero to track real LCP.
- Alert when pass‑rate drops or long tasks spike.
- Block deploys that exceed byte or timing budgets.
12) Make Performance a Product Requirement
Speed is a feature. Publish budgets next to design specs and review perf diffs in every PR. Celebrate wins with dashboards so teams see the business impact of technical discipline.
- Document target budgets per route (JS, images, CSS).
- Pair perf and accessibility reviews in design QA.
- Schedule quarterly clean‑ups of third‑party scripts.
Copy/Paste: LCP‑Safe Hero (HTML)
<picture>
<source
type="image/avif"
srcset="/sku.avif?w=320 320w, /sku.avif?w=640 640w, /sku.avif?w=1024 1024w"
sizes="(max-width:600px) 90vw, (max-width:1024px) 60vw, 600px"
/>
<source
type="image/webp"
srcset="/sku.webp?w=320 320w, /sku.webp?w=640 640w, /sku.webp?w=1024 1024w"
sizes="(max-width:600px) 90vw, (max-width:1024px) 60vw, 600px"
/>
<img
src="/sku.jpg?w=640"
alt="Product"
width="600"
height="600"
loading="eager"
decoding="async"
/>
</picture>
Final Thoughts
You don't need a rebuild to win on mobile. Responsive images and leaner JavaScript deliver faster paints and fewer blockers, compounding into real business gains. Write budgets, enforce them in CI, and design for real mobile constraints. The results will follow.
By Roman Fedytskyi - Head of Software Development Office at JetSoftPro.