PageSpeed Insights 报告超过 100 个主线程在移动设备上工作？

Question

我有这个网站，我认为加载 真的 很快并且优化得很好，但是每当我 运行 它通过 PageSpeed 时，它在移动设备上的得分很糟糕只有？

以“最小化主线程工作”为主，据称在渲染上花费了 124 秒？

我尝试在 DevTools 中使用“性能”选项卡对其进行调试，但即使 CPU 减速和 3G 速度变慢，我也无法让它显示任何问题。截图中的长任务都和我在Chrome.

安装的Extensions有关

JavaScript 是通过带有“@babel/preset-env”预设的 Babel 运行，然后缩小。

Answer 1

来自哥伦比亚的移动版本在 PageSpeed 中的性能为 82

第一次内容丰富​​的绘画 1,7 秒 互动时间 3,1秒 速度指数 3,3 秒 总阻塞时间 30 毫秒 Renderizado del mayor elemento con contenido 4,5 秒 累积版图转移 0,017

效果很好

Answer 2

对于任何想知道的人，这就是让 PageSpeed 失效的原因：

.hero-image.animated {
    animation: animatedBackground var(--hero-animated-duration) linear;
    background-position: bottom right;
}

移除动画，解决了移动页面得分非常低的问题。