24 · 改善移动体验与加载速度

本页为文字教程；视频与配套媒体仍以实际发布状态为准。

返回课程总览 · 返回模块

本课交付：移动任务记录与图片资源清单

本课不以跑出一个漂亮分数为结束，而检查真实用户能否在较小屏幕上输入、生成、核对和复制。示范站使用英文商品事实，重点观察键盘展开后按钮是否仍能到达、长结果是否易读、错误与等待状态是否清楚。

先记录修改前的设备、浏览器、网络条件、页面版本和测试输入。没有真实设备时可以使用受控浏览器检查，并明确限制，不把桌面模拟写成真机验收。任何改动之后，都用尽量一致的条件复测。

跟做一：把移动任务完整走一遍

从工具页进入，依次填写每个字段、修改长文本、提交、等待、编辑并复制。不要只检查首屏截图。记录横向滚动、键盘遮挡、焦点消失、结果区跳动与复制失败等现象，按是否阻止任务排序，而不是先调整装饰。

再把网络变慢，观察用户能否知道请求是否已经被接受。等待状态应准确，不假装模型已经完成；重试前需要识别原任务，避免一段不稳定网络触发多次调用。布局优化不能替代这些业务状态，但可以让用户更清楚地接管失败。

跟做二：定位真实加载瓶颈

web.dev 的 LCP 优化指南强调先理解主要内容加载过程，并区分实验室与真实用户测量。Optimize Largest Contentful Paint | web.dev 因此，先找到首屏主要元素和资源瀑布，再决定改什么。若延迟主要来自文档响应，只压缩一张非首屏图片不会解决全部问题；若大图占用网络，就需要处理资源尺寸与发现方式。

记录图片、脚本、字体与接口分别花费的时间，避免把上游生成耗时算成页面图片加载。一次测量只能说明特定条件，后续还要观察真实用户分布。不要声称改成某种格式就保证排名提升，或用本机缓存命中证明首次访问很快。

跟做三：按用途准备图片，而非只改后缀

本课程的交付规范是网站公开插图使用 COS 托管的 WebP，并保留可追溯原始素材。它是本项目的管理约定，不是搜索引擎要求所有网站必须使用同一存储商。为每张图记录用途、原始文件、尺寸、编码文件、公开地址与替代文本，避免同一素材在多个前端目录各存一份。

Google 图片文档支持 WebP 等格式，并建议使用标准图片元素、合适的响应资源与清楚上下文。Google image SEO best practices 因此，转换后要检查真实字节与类型，不能把 PNG 文件改名为 webp 就当作完成。图中文字、小尺寸线条与透明区域也需要人工检查，防止为了减小文件而破坏教学内容。

跟做四：做一次可比较的编码实验

Google 的 cwebp 文档提供质量、无损与尺寸等选项。cwebp command reference | Google WebP 下面只是针对自有测试素材的示例，需要确认本地已经安装相应工具，输出另存，不覆盖原件：

cwebp -q 80 input.png -o illustration-v1.webp

不要把八十当成所有素材的最佳值。比较不同设置后的文件大小、实际显示尺寸和文字边缘，并选择足够清楚的版本。若需要更小显示资源，按实际页面需求调整尺寸，再核对画面没有意外裁切。编码成功只是一个步骤，发布地址与页面引用仍需验证。

跟做五：上传后从读者路径核对

上传 COS 后，检查公开地址返回成功、Content-Type 与 WebP 一致，并抽查下载字节确实对应所选版本。使用新的版本地址可以减少同名覆盖造成的旧缓存问题。页面设置合理的宽高与替代文本，避免图片出现时把输入与按钮推来推去。

对非首屏素材可以使用适合的延后加载策略，但不要机械地让主要首屏图也迟迟不被发现。保留源码、网络面板和最终页面三层证据。若正式地址仍返回旧文件，就先定位缓存或引用位置，不通过清空用户资料来解决媒体更新。

加练：验证素材发布后的真实类型

为一张自有插图记录原件与编码文件的校验值、尺寸和大小，上传后再下载公开地址，核对它不是同名旧文件或错误 HTML。只看到地址以 webp 结尾还不够，响应类型和实际内容都应一致；这一步可以发现错误路径、缓存和上传未完成。

随后用手机尺寸检查图中的文字与线条是否清楚，图片出现时输入区是否跳动。若为了压缩而使教学内容难以辨认，应换尺寸或编码设置，不把最小文件自动当成最佳结果。

这份清单也用于后台替换图片：采用新版本地址，并确认页面读到最新资料。你交付的是从素材、存储到用户画面的完整证据，不是一个本地压缩命令的成功提示。

独立作业与验收

提交一轮移动任务记录、修改前后同条件测量，以及至少一张图片从原件到编码、托管和引用的清单。明确哪些观察来自实验室、哪些来自真实设备；比较结果不填写虚构分数。

最后找一个未参与改动的人重新完成任务。如果文件更小却更难理解，或者按钮更整齐却被键盘挡住，就回到问题本身。优化应以用户完成任务为结果，性能指标、图片字节与界面细节共同提供证据，不能互相替代。