Javascript 提高移动设备中的Pagespeed性能-LCP/CLS/互动时间|呼叫专家用户

从大约两个月前开始，我就重新开始了我的完全定制的电子商务工作，关于优化前端的页面速度，考虑到谷歌机器人现在对参数进行测量，例如CLS和LCP，对于这些参数，他们具有关键性，并且部分决定特定页面是否在谷歌爬虫的索引下

我做了我管理的所有优化，比如：

• 在线提取关键css
• 所有非关键CSS合并并内联解析
• mod_页面速度
• CDN下的镜像与JS
• nginx优化
• 在可能的情况下，将非核心JS移动到靠近阀体闭合的下方
• 延迟非关键的JS
• 预加载、预回迁和许多其他我现在不记得的事情都是在漫长的学习模板的夜晚完成的

所以现在，与前两个月相比，我取得了很大的成绩

我唯一无法解释的是，当桌面版还不错的时候，我有很多时间在移动模式下进行交互、CLS和LCP

我一直在困惑自己，试图找到解决问题的关键

这是产品页面的一个示例：

与产品页面相比，这里的主页具有可接受的值，但交互时间仍远高于桌面：

提前感谢所有对我有帮助的专家模式用户。

为什么我的手机成绩低于桌面？ 移动测试使用和来模拟4G上的中端设备，因此移动测试的分数总是较低

您可能会发现页面加载方式与Lighthouse应用节流方式（以及如何使Lighthouse使用应用节流以便您可以实时看到减速）之间的差异很有用，但是我在这个答案中包含了关键信息，以及它如何应用于您的环境

模拟网络节流 运行审计时，它会对每个请求应用150毫秒的延迟，并将下载速度限制为每秒1.6兆（200千字节），上载速度限制为每秒750兆（94千字节）

这很可能会影响您的资源，因为下载要花费更长的时间

这种节流是通过一种算法而不是应用（它是模拟的）来完成的，因此您不会看到较慢的加载时间

CPU节流 Lighthouse将CPU速度降低4倍，以模拟中端手机的性能

如果JavaScript负载很重，这可能会阻塞主线程并延迟渲染。或者，如果您使用JavaScript动态插入元素，那么出于同样的原因，它可能会延迟LCP

这会影响您列出的项目中的大多数

这种限制也是通过一种算法而不是应用（它是模拟的）来实现的，因此您不会看到较慢的处理时间

你需要做什么来提高你的分数？ 关注你的JavaScript

首先，您有5个阻塞脚本，只需像其他脚本一样向它们添加

defer

（如果您知道如何处理异步JS加载，则更好地添加

async

）

其次，负载超过400kb的JS（未压缩）-如果您注意到您的脚本需要2.3秒来评估

去掉您不需要的任何东西，并在开发人员工具的“性能”选项卡中运行跟踪，学习如何查找长期运行的任务和性能瓶颈

考虑减少网络请求的数量，因为4G网络的延迟更高，如果您有很多请求，这会增加几秒钟的加载时间

结合尽可能多的CSS和JS（你只需要内联你的关键CSS，而不是整个页面的CSS，找到所有使用的项目“上面的折叠”和内联他们只，目前你似乎是发送整个网站的CSS内联，这将增加很多页面的重量）

最后，您的high（部分）是因为您在页面加载时使用JS隐藏项目（例如ID为

comp-modal

的模式似乎是用JS隐藏的），但在JS运行时它们已经呈现出来了，通过将它们隐藏在内联CSS而不是JavaScript中可以轻松修复

除此之外，你只需要遵循灯塔报告给你的指导（你可能还没有太注意“诊断”部分，从旁边有红色三角形或橙色正方形的任何东西开始看，每个项目都提供了可能需要优化的有用信息。）

---

这应该足够让你开始了。

Ehy，最后我解决了CLS的问题，在主徽标（owl carousel的第一个滑块）和产品的img中，将loading=“lazy”切换到loading=“Eanger”，这样在页面加载时这个img总是可见的，这样我就不会改变布局。所以现在，移动设备唯一的主要问题是最大的内容绘制和交互时间。根据您的想法，通过分析我的模板，我可以修复哪些更改？