我们在之前的文章中探讨了移动端页面速度和谷歌推动移动优先索引的努力。基于为众多移动端电子商务网站构建和优化提供咨询的经验，我发现了数百种优化策略。在这篇文章中，我将分享根据我的经验，影响移动端页面速度的五大问题。同时，我也会提供评估和快速修复这些问题的建议。
5. 跟踪标签（Tracking Tags）
广告服务的激增导致网站安装了数十个像素代码，从而拖慢了性能；许多网站正确地依赖 Google Tag Manager，却未能优化该平台内的标签，因此 Google Lighthouse 经常将 Tag Manager 标记为移动端页面速度的问题。
解决方法是评估何时需要触发标签。对于大多数网站来说，标签无需立即触发。相反，应调整 Tag Manager 中的触发器设置，使其在页面加载完成后再触发。
4. WordPress 插件
全球约有 20% 的网站使用 WordPress，其中许多网站拥有十几个或更多插件来管理各种功能，但其中很少有插件经过速度优化。
很难建议如何优化每一个插件，应与开发人员合作找出一个或两个拖慢网站的插件，通常是支持表单或页内公开评论的插件，专注于少数损害性能的插件，然后尝试在页面完全加载后 再 加载它们，这一过程称为“DOM 完成”。
3. JavaScript
JavaScript 在互联网上无处不在。它通常用于管理网站的各种交互功能，并且往往被编写成一个庞大且单一的代码块。然而，这会加重移动设备的负担，因为设备必须在用户能够与页面交互之前，先下载并处理这个庞大的代码块。
根据我的经验，在绝大多数网站中，只有 5% 的已下载 JavaScript 代码是使页面准备好供用户使用的必要部分。然而，大多数移动用户被迫等待五到十秒钟，直到整个 JavaScript 被处理完毕，才能继续操作。
最简单的修复方法是将 JavaScript 拆分成更小的代码块。让你的开发人员仅向移动浏览器提供处理页面所需的 JavaScript 量，然后将其余的 JavaScript 推迟到页面可供用户使用时再加载。
2. 未优化的图片
无论大公司还是小公司，都常犯一个最明显的移动端速度错误：使用过大的图片文件。
这里的修复方法很简单。将所有图片转换为新的 WebP 格式。它能以比旧格式小一半的文件体积呈现高质量图像。
至少，应将 PNG 和 SVG 文件格式替换为 JPEG。你可能会惊讶于有多少 10 MB 的 JPEG 文件毫无理由地拖累了你的用户。扫描你整个图片文件目录，找出非 JPEG 格式的文件，然后将其替换。最常见的罪魁祸首？就是你的 Logo！
1. 未缓存的组件
大多数网站所有者理所当然地认为，内容分发网络（CDN）上的缓存功能可以加快页面速度。因此，他们要么在托管服务器上开启“缓存”开关，要么付费使用第三方 CDN。但他们网站的大量组件可能仍未被缓存，导致页面速度几乎没有改善。
确定网站上哪些文件未被缓存需要相当多的调查工作，我更喜欢使用 Pingdom 的一款免费工具，它会扫描您的网站并评估每个 URL 中每个文件的下载速度，Pingdom 不仅直观地显示了缓慢的文件，还显示了下载过程中哪部分耗时最多。
下载一个文件包含四个组成部分：(i) 调用服务器，(ii) 建立安全响应，(iii) 等待响应，以及 (iv) 接收文件。大多数网站管理员认为第四项，即接收文件，是导致下载缓慢的原因。然而，根据我的经验，前三项往往是更耗时的部分，通常是因为文件没有缓存在距离下载者地理位置较近的服务器上。
Walmart.com 的主页就是一个很好的例子。在移动设备上下载其中一个基础 HTML 文件非常快，仅需 7.6 毫秒。但沃尔玛服务器确认我已请求该文件的响应时间却花了 21 倍之久。
在移动设备上从 Walmart.com 下载基础 HTML 文件非常快，仅需 7.6 毫秒，但等待 Walmart 服务器确认请求的时间却是其 21 倍。点击图片放大。来源：Pingdom。
进一步深入查看，我发现该文件确实已被缓存。然而，Cookie 的设置不当导致未存储该文件。见下方将“cache-control”设置为“no-store”的行。
当我迅速向沃尔玛（我前雇主）指出这一问题时，工作人员意识到错误并立即为许多设置不当的文件开启了缓存。你可以在 CDN 的设置中进行相同的更改，或者联系你的域名主机提供商。在 WordPress 中，一个插件即可快速配置缓存。
修复 Walmart 主页的缓存大大提升了页面速度。点击图片放大。来源：Pingdom。