Angular PWA 应用程序：如何处理页面速度洞察中的“最小化主线程工作”和“减少 JavaScript 执行时间”建议

Question

我有一个有角度的 PWA 应用程序。它在起始页显示了很多内容，因此需要从服务器加载内容。这需要一些时间，并且必须完成大量 Javascript 工作。

Google 页面速度洞察率页面为 10/100。它显示“最小化主线程工作 12.4 秒”和“减少 JavaScript 执行时间 7.7 秒”是我应该做的重要更改。

我有两个问题：

1. SEO机构告诉我，这对我的网站排名有非常不好的影响。这是真的吗？谷歌真的会因为在一开始就加载所有内容而降低 PWA SPA 的排名吗？我的意思是，将普通网站与 PWA SPA 应用程序放在一个桶中并不是一个好主意，该应用程序在开始时需要加载一点，但之后真的很快
2. 存在什么可能性，可以针对 PWA SPA 进行优化。我的意思是，SPA 在启动时总是需要做很多事情。我不知道如何优化它？

一些来自大公司的 PWA 示例，它们在页面速度洞察力方面的评分也很差。

• 星巴克
• 品脱
• 德本汉姆

Answer 1

是的，加载时间确实会影响排名，而 SPA 对此非常不利。

您可以采取的一种方法是为您想要索引的内容建立一个常规网站，如果用户想要这样做，则安装一个 PWA（两者可以在同一个域上）。

优点是从谷歌和随机访问者的角度来看，它是一个正常且快速的多页面网站。但一旦安装，它就是一个真正的、动态的 PWA。缺点是它需要更多的工作。

如果您更愿意将所有内容仅保留为一个 SPA PWA，那么我建议您研究代码拆分和延迟加载，并组织您的代码，以便您只加载最初所需的最少代码，然后仅在需要时加载其余代码用过。

最后要考虑的一件事是使用网络工作者来完成繁重的工作而不是主线程。例如，如果你必须进行 API 调用，最好在 web worker 中进行，然后在本地有数据后更新主线程，因为它真的很流畅。