# 移动端电商优化：Core Web Vitals、结账，以及真正拉动转化的具体修复

> 70-85% 的电商流量来自移动端。十个具体方面（Web Vitals、触控目标、表单自动填充、Apple Pay、拇指热区）帮你缩小移动端与桌面端的转化差距，附真实的工具和基准。

Ryan Badger - 2025年5月1日 - 阅读约 8 分钟

## 为什么移动端就是全部

你的电商流量中有 70-80% 来自移动端。对大多数消费类品类，这个数字正逼近 85%。桌面端的转化率通常是移动端的 2-3x，这与其说说明桌面端更好，不如说明大多数店铺的移动端本身就是坏的。

一个优化到位的移动端体验可以缩小这个差距，甚至常常把它反转：现在有些 DTC 品牌的移动端转化率已经达到甚至超过桌面端。差别是具体的、可衡量的，而且主要关乎基本功，而不是创新。

本文讲的是真正能拉动移动端转化的东西，附有基准、工具和需要修复的具体事项。不是“移动优先设计”这样的空话，而是能产生复利式提升的那些具体检查项。

## 1. Core Web Vitals，以及 Google 为什么盯着它们

Google 把 Core Web Vitals 当作排名信号，也当作体验质量的代理指标。除了 SEO 这一层，这些底层指标本身就是转化的有力预测因子。

### LCP（最大内容绘制）

首屏上最大的元素（通常是主图或 H1）渲染出来所需的时间。目标：在移动端 4G 下低于 2.5 秒。

LCP 差最常见的原因：

- 主图未压缩，或者尺寸过大
- 网页字体加载阻塞了渲染
- 在 `<head>` 里注入第三方脚本（聊天小部件、分析工具、A/B 测试工具）

### INP（交互到下一次绘制）

从用户交互（点按）到下一次视觉更新的时间。目标：低于 200ms。

INP 差最常见的原因：

- JavaScript 过重的页面（没有做代码拆分的 React/Vue 店铺）
- 分析或聊天脚本在交互时同步触发
- 老旧移动浏览器上的点按延迟

### CLS（累积布局偏移）

页面加载时内容到处跳动。目标：低于 0.1。

最常见的原因：

- 图片没有设置宽高属性
- 广告或第三方嵌入在内容之后才加载
- 字体加载后改变了文字尺寸

### 如何检查

免费：[PageSpeed Insights](https://pagespeed.web.dev/) 会运行 Lighthouse 并报告这三项。测试你收入最高的产品页，而不是首页。红色的修复，黄色的接受，然后继续往前走。

付费 / 更深入：用 WebPageTest.org 做瀑布流分析，用 Chrome DevTools 的 Performance 面板做本地性能剖析。

## 2. 移动端速度低于 3 秒（真实的移动端，而不是限速的桌面端）

桌面浏览器的“移动端模拟器”使用的是快速的网络连接和快速的 CPU。真实的手机则使用更慢的连接和更慢的 CPU。两者的差距相当大。

请在真实手机、4G 网络下测试。如果你的页面在 Chrome 的移动端模拟器上用 2 秒，那在 4G 下的中端安卓手机上，很可能要 4-5 秒。

### 最大的提速收益（按顺序）

1. **图片优化：** 压缩到 80% 质量，调整到真正需要的尺寸，使用 WebP 或 AVIF。Shoprocket 通过 Cloudflare 自动完成这些
2. **对首屏以下的内容做懒加载。** 图片、iframe、较重的脚本不应在滚动到之前加载
3. **推迟非关键的 JavaScript。** 分析工具、聊天小部件、A/B 测试工具不应阻塞渲染
4. **积极缓存静态资源。** 对带指纹 URL 的图片、字体、CSS、JS 设置 1 年的缓存
5. **使用 CDN**（Cloudflare、Fastly，或你的平台内置的）。从地理位置较近的边缘节点提供资源
6. **减少第三方脚本。** 每个像素和标签大约增加 50-200ms；审查哪些是真正必要的

## 3. 触控目标尺寸

Apple 的《人机界面指南》规定触控目标至少为 44×44 像素。Google Material 规定为 48×48。大多数主题的“移动端”版本两者都达不到。

**修复：**

- 按钮高度至少 44px，内部留 8-12px 内边距
- 导航中的链接高度至少 44px
- 表单输入框高度至少 44px（也有助于无障碍）
- 相邻点按目标之间的间距至少 8px

测试：在手机上打开你的店铺。试着用拇指点按分类导航。你是不是老点错？那就是触控目标的问题。

## 4. 移动端结账的细节

移动端的购物车和结账，是大多数转化流失的地方。具体待办清单：

### 单列表单

双列表单在桌面端可行，在移动端则行不通。把每个字段都纵向堆叠。没有例外。

### 合适的输入类型

- 邮箱字段：`type="email"`（调出带 @ 符号的邮箱键盘）
- 电话：`type="tel"`（数字键盘）
- 邮政编码：对使用纯数字邮编的国家，用 `type="text" inputmode="numeric"`
- 信用卡号：`type="text" inputmode="numeric" autocomplete="cc-number"`（让自动填充生效）

大多数平台原生就做对了这一点。值得在手机上检查一下你的表单；如果弹出的键盘不对，就修复它。

### 对自动填充友好

只要表单的 `autocomplete` 属性正确，浏览器就能自动填写姓名、地址、邮箱、电话、银行卡信息。顾客点一下自动填充建议，3 秒就能完成结账。没有自动填充，他们就得手动输入 12 个以上的字段。

标准的 autocomplete 取值：`name`、`email`、`tel`、`street-address`、`postal-code`、`country`、`cc-number`、`cc-exp`、`cc-csc`、`cc-name`。

### 产品页上的吸底“加入购物车”

在移动端产品页向下滚动 3 屏后，“加入购物车”按钮就离开了屏幕。修复：添加一个吸底栏，显示价格和“加入购物车”，当原按钮滚出视野时出现。

### Apple Pay + Google Pay + Link

这是对移动端结账提升最大的单一因素。一键支付，无需打字；原生生物识别验证。

- **Apple Pay：** 在 Stripe 验证你的域名后自动启用（Shoprocket 会处理这个）
- **Google Pay：** 类似
- **Stripe Link：** 通过 Link 的跨站身份自动填入银行卡和地址

没有这些的移动端结账，每时每刻都在流失顾客。把三个都启用。

## 5. 精简表单字段

你移动端结账上的每一个字段，都是一个摩擦点。审查你的字段：

**通常需要：**

- 邮箱
- 收货地址（姓名、街道、城市、邮编、国家）
- 支付信息（或 Apple/Google Pay）

**常常收集过多：**

- 电话号码（只有在配送 / 物流承运商需要时才收集；很多并不需要）
- 出生日期（购买时几乎从不需要）
- 公司名称（仅限 B2B）
- 新闻邮件订阅（在法律允许的地方预先勾选；否则用单独的复选框）
- “你是怎么知道我们的？”（挪到购买后的问卷里）

字段越少 = 结账越快 = 完成率越高。你每删掉一个字段，大约就能让移动端结账完成率提高 5-10%，并且是复利式的。

## 6. 移动端上易读的字号和行宽

- **正文：** 至少 16px（iOS 的默认值，也是 Google Material 的准则）
- **行宽：** 45-75 个字符
- **行高：** 字号的 1.4-1.6x
- **对比度：** 至少达到 WCAG AA（正文 4.5:1，大字 3:1）

如果顾客在你的产品描述上双指缩放，说明你的字太小了。如果他们得把手机横过来才能阅读，说明你的行宽太宽，或者字距太紧。

## 7. 单手使用的考量

大多数手机用户是单手使用，拇指从右下角（左撇子则是左下角）够到屏幕。重要的交互应该放在那个拇指热区里。

- 主要行动按钮（加入购物车、结账、立即购买）靠近底部
- 导航汉堡菜单放在左上或右上，在拇指可及范围内
- “返回”按钮要可预期（浏览器自带的返回通常胜过自定义的返回按钮）

不要要求用户双击难以够到的区域。每一次需要拇指“体操”的时刻，都会流失顾客。

## 8. 针对移动端的产品页

桌面端的产品页常常一次性展示所有内容（左边是图库，右边是详情，下面是描述）。这种布局无法直接搬到移动端；你必须为内容排好先后顺序。

有效的移动端产品详情页（PDP）顺序：

1. 主图（可滑动的图库）
2. 标题 + 价格
3. 规格选择器（尺码、颜色）
4. 加入购物车（主要行动按钮）
5. 信任信号（评分、包邮、退货）
6. 描述（可折叠，3 行后折叠）
7. 规格 / 详情（可折叠）
8. 评价摘要，带“查看全部”展开
9. 相关商品
10. FAQ（可折叠）

首屏以下的内容应该懒加载。移动端的顾客往往在前 3 个板块里就做出了购买决定；把所有东西都加载出来，只会拖慢这个决定。

## 9. 在真实设备上测试

不是 DevTools。不是浏览器的移动端模拟器。而是使用蜂窝网络的真实手机。

最低限度的测试轮换：

- iPhone SE（小屏幕、较旧的设备）
- iPhone 15 Pro（最新的 iOS、Safari）
- 三星 Galaxy 中端机（安卓、Chrome）
- 使用 4G 的较旧安卓手机（暴露性能问题）

加分项：请 3 位用不同手机的朋友在你的店铺里试着买点东西。看着他们操作。他们卡住的地方，就是你的修复清单。

## 10. 避开移动端的“杀手”模式

会毁掉移动端转化的常见错误：

### 插页式弹窗

在移动端落地页上盖住整个屏幕的“订阅即享 9 折！”弹窗。Google 会在移动搜索排名中惩罚这类做法。顾客一碰到就跳走。改用内嵌式的订阅表单。

### 带声音自动播放的视频

浪费带宽，惹恼用户，而且 iOS 往往本来就会拦截。主图视频静音自动播放是可以接受的；带声音自动播放则对用户充满敌意。

### 触屏上的悬停状态

“悬停查看详情”在触屏上行不通。如果你的主题在移动端仍然保留悬停显示的模式，那它们实际上是坏的。

### 模态窗口上小得点不到的“关闭”按钮

角落里一个 16 像素的 X，用拇指根本点不中。把关闭按钮做成 44×44，或者在模态窗口底部使用通栏的“关闭”按钮。

### 商品网格上的横向滚动

在移动端，横向滚动的商品轮播会把 80% 的商品藏在首屏以下。纵向网格（移动端两列）转化更好。

## Shoprocket 在移动端负责什么

大部分入场门槛级的功能都开箱即用：

- **自动图片优化：** 每张商品图片都会调整尺寸 + 压缩 + WebP + 懒加载
- **购物车抽屉（而非整页购物车）** 是移动端的默认方式
- **吸底的移动端“加入购物车”** 在带主题的店面中受支持
- **适配移动端的结账**，输入类型正确、支持自动填充、纵向堆叠
- 通过 Stripe 提供 **Apple Pay + Google Pay + Stripe Link** 一键支付
- **适配移动端的在线聊天小部件**
- 每个资源都通过 Cloudflare 提供 **CDN 分发**
- 托管店面**开箱即针对 Core Web Vitals 做了优化**

```
<!-- 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>
```

使用小部件嵌入的用户：周围页面的速度和设计由你掌控。Shoprocket 的小部件是懒加载的，不会阻塞你的页面渲染，但整体页面速度仍需你自己管理。

> **提示：**每个季度，在移动端对你收入最高的 3 个产品页运行一次 PageSpeed Insights。记下三项 Core Web Vitals 的分数。下个季度再对比。趋势下滑是悄无声息的转化杀手；按季度发现它，好过等损失造成之后才察觉。

## 一句话总结

- **移动端占流量的 70-85%。** 大多数店铺把它当作事后补救；别这样
- **Core Web Vitals 是要追踪的三个数字：** LCP、INP、CLS。分别低于 2.5s / 200ms / 0.1
- **在真实设备上、4G 网络下测试，** 而不是用浏览器模拟器
- **结账细节：** 单列表单、正确的输入类型、自动填充、Apple/Google Pay、吸底行动按钮
- **表单字段越少** = 完成率越高。审查哪些是真正必要的
- **触控目标至少 44×44。** 目标之间的间距至少 8px
- **拇指热区很重要。** 主要行动按钮靠近底部；汉堡菜单放在左上/右上
- **避开移动端杀手：** 插页弹窗、带声音自动播放、悬停状态、过小的关闭按钮

[开始免费试用](https://app-v3.shoprocket.io/signup)，从第一天起就拥有自动图片优化 + Apple Pay + 移动端原生结账。14 天，无需绑定银行卡。

---

- HTML version: https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion
- Language: 中文 (zh)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md)