移动端优化，我踩过的坑比你吃过的盐还多
说实话，我特别烦那种把移动端优化等同于刷分的行为。Lighthouse 跑个 90+，截图发朋友圈，配文“又搞定一个”——然后呢？用户真的觉得快了吗？我早期就这么干过。贼蠢。后来我被现实狠狠抽了一巴掌。一个电商客户，优化后所有指标绿油油，转化率反而降了 0.3%。疯了。排查一周才发现，我们为了合并资源把首屏搞成一片白，加载确实快，但用户在 3G 下盯着白屏足足 2 秒——人类对静止的忍耐度，比我们以为的低得多。
速度的幻觉：字面快 ≠ 感觉快
有个词叫“感知性能”，说白了就是骗过眼睛。你用骨架屏，用户就觉得内容在加载；你给按钮加过渡动画，他就觉得操作流畅——即使实际响应时间完全一样。我做过一个缺德实验：把接口延迟人为加到 500ms，但在按钮点击后立即播放一个 300ms 的涟漪动效，然后弹出内容。绝大部分测试者表示“挺快的啊”。
所以你看，FCP、LCP 这些指标当然重要，但它们只是路标，不是终点。真正影响转化的是什么？是用户手指按下那一刻，到反馈出现的那段“死寂时间”。业内管这个叫 TTI？不，那玩意儿太机械。我管它叫“焦虑等待”——人一焦虑就离开，拇指一滑，你的页面就没了。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/ebafced9-808b-4890-8d61-08f4b382cea8.jpg
移动端骨架屏加载效果对比动图
我现在优化首屏，先不做别的，就盯着两个事：最短可行内容和最大信任动作。最短可行内容，就是页面上必须有一丁点东西立刻出现，哪怕只是一个标题、一个占位图形；最大信任动作，就是让用户能立刻做点什么——点一个按钮、划一下卡片、甚至只是看到搜索框可聚焦。只要他动了，流失率就断崖下降。
手势的混乱：你以为的直觉，其实是陷阱
有次我设计一个相册浏览，左滑下一张，右滑上一张。自认为符合直觉。测试时一个阿姨两只手指捏合想放大——结果页面直接跳到下一张。她当场懵了。我这才意识到，我们对“标准手势”的假设太傲慢了。安卓党、iOS 党、老年人、手游玩家，每个人肌肉记忆都不同。
移动端最容易被忽视的优化点，其实是触摸区域和手势冲突。iOS 系统边缘滑返回，如果你的内容也有左右滑动，那就是灾难。解决方式？要么在边缘留 20pt 的安全区，要么用垂直滚动替掉次要的水平滚动。我倾向于后者，因为再精妙的容错都不如物理隔绝来得干脆。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/844dd3b4-726f-4479-93ed-2ec3d81b84e5.jpg
移动端手势冲突热区示意图
还有个反直觉的事情：按钮越小，越需要大的点击区。 比如关闭按钮才 24×24pt，但你可把它的 invisible touch target 扩到 44×44pt。用户以为他点中了那个小小的 ✕，其实他的胖手指早就歪了。这个 trick 救过我好几次命，特别是那些设计稿里美到窒息的 FAB 按钮——真按比例的话，点击率能低到让你怀疑人生。
离线不是加分项，是生死线
我永远忘不了那个地铁里的场景。自己公司的内容 App，进去白屏，小菊花转啊转。旁边小哥刷新闻刷得飞起。我后来才知道，那新闻 App 离线缓存了 100 条头条，即使没网，用户也能看个爽。我们的呢？连个壳都没存。
PWA 很多人看不上，觉得难维护。屁，Service Worker 就那么点生命周期，搞明白 fetch 事件，剩下的就是缓存策略。我用 workbox 套个壳，三天上线。效果？二次打开速度从 3.8 秒降到 0.8 秒，用户平均访问时长涨了 27%。更玄学的是，添加到桌面那一下仪式感，居然让留存高出不少——人就是喜欢“拥有”的感觉，哪怕只是个图标。
但别走火入魔。离线不能替代弱网优化。弱网下，你得给用户一个“正在重试”的心理预期，而不是傻等。我一般把请求分三档：即时、延迟、离线兜底。头像这类非关键资源，离线就用本地默认图；评论这种强交互的，放延迟队列里等网络恢复再同步；只有支付和学习视频才一定要实时。分级之后，整个 App 的韧性像换了副骨架。
最后一块拼图：加载顺序的玄学
说个鬼故事。一个新闻站，我们按标准把 CSS 放头、JS 放尾，所有异步加载。结果用户反馈“图片出来得特别慢”。Chrome DevTool 一查，网络请求优雅得像教科书，瀑布图完美。那慢在哪儿？——大脑！因为文字先完整出来了，图片区域却是空白，用户阅读时会下意识等待空白填满，这个过程主观上被拉长了好几倍。我们把核心图片改成和文字同优先级加载（甚至略微提前），满意度立刻回升。什么标准，有时候就是得给人类错觉让路。
回到那句话：移动端优化做到最后，全是在对抗人性。 对抗人的没耐心、对抗人的误操作、对抗人的网络焦虑。数据好看只是及格线，让拇指舒服、让眼睛安心、让每一次点击都有回应，才是真功夫。
哎，不说了，又得去调那该死的 touch-action 了…… 希望楼主常来发帖，持续输出优质内容，我们都会一直支持你。 每一条都很实用，已经记下来了，以后遇到类似问题就能用上。 对这个话题有了更全面的认识，不再只停留在表面理解。
页:
[1]