PageSpeed Insight 显示 Angular SPA 应用程序的性能较低

Question

我正在运行一个 Angular 应用程序，该应用程序在移动版 PageSpeed Insight 中显示得分非常低（移动版为 41，桌面版为 86）。

我在这里附上错误的屏幕截图。

我确实需要一些帮助来解决这些问题。您提供的任何建议都会很棒！

有关该应用程序的一些详细信息

• 角度17.1
• 我延迟加载了所有路由并仅使用独立组件
• 该应用程序确实有一些第三方库示例：Angular Material、Ngrx、Chartjs...

页面速度测试

移动分数低 - 41

减少 JavaScript 执行时间 1.5 秒

最小化主线程工作 2.4 秒

最大内容绘制元素 5,640 毫秒

Answer 1

您是否在生产版本上运行页面速度索引？如果您在开发模式下运行此程序，您的应用程序将不会得到优化，您将看到误导性的结果。

如果您在本地测试而不将构建部署到 Web 服务器，那么可以使用

ng serve --configuration=production

进行简单测试，看看是否能获得更好的性能结果。

Answer 2

我看到是4G慢速节流。您期望慢速油门得分 >80 吗？您的性能下降主要是由 LCP 和负载延迟引起的。这是一个环境测试，而不是您客户的实际体验。

在另一边，您已将

fetchpriority="high"

和

loading="eager"

添加到

logo_500x300.webp

图像中。

您可以添加

fetchpriority="high"

来改善加载延迟 但是

loading="eager"

并没有比不包含它更好。默认是急切加载（除非您的默认值未设置为延迟加载），

loading="lazy"

会使加载速度变慢。

我们看不到您是否使用了

preload

或

preconnect

或其他东西来改善 DNS 负载。如果您使用过它们，您可以向它们添加

fetchpriority="high"

。