angular - 如何解决我网站中的性能问题

Question

我正在努力改进我的 Angular 6 SPA 搜索引擎优化 分数，
我正在使用 Lighthouse 审核来找出导致性能不佳的特定/主要问题，以便获得更好的分数。

这是我在移动设备上运行的网站 (https://www.v-check.co.il) 的更新审核:


如您所见，一个大问题是 第一次内容丰富​​的油漆这也与另一个问题有关 - “最小化主线程工作” .
我阅读了这些问题所附的文章，其中大部分已经完成。

但是，我确实看到我的主要 javascript 文件存在问题。我运行 - webpack-bundle-analyzer 查看我的代码中发生了什么并获得此图像:



我已经在使用延迟加载，因此，您可以在 上看到例如最大的文件。红色 与仅在登录后加载的用户模块有关，因此不相关，但是，主文件 在 绿色 总是被加载，也是 紫色 文件名为: “懒惰的公共(public)脚本.js” .

我不确定我能从中节省多少。我想从主文件中删除时刻库，并延迟加载您看到的翻译文件 he.json , en.json ，甚至尝试最小化 惰性公共(public)脚本.js 文件。

仍然不是性能领域的专家，我不确定我是否正确地解决了这个问题。

我想到的另一个想法是创建一个非常小的模块，它只包含必要的 HTML 和 CSS，从而消除了对 的需求。惰性公共(public)脚本.js 直到用户需要它。

对于如何以正确的方式访问这些问题的任何帮助，我将不胜感激。

Answer 1

服务器端渲染

提高初始性能和 SEO 指标的最大影响将是利用服务器端渲染 (SSR)。 SSR 将显着增加首次内容绘制，对 SEO 至关重要。

SSR 在两个重要方面提供帮助:

通过排除 Angular 运行时来减小初始包大小。

通过向客户端发送已经预渲染的 HTML。

这两者都减少了首次内容绘制 (FCP) 和交互时间 (TTI)。

详细信息请查看官方文档:https://angular.io/guide/universal

生产/缩小构建

从外观上看，正在加载的脚本并没有缩小，如果您正在进行生产构建(ng build --prod)，情况就不应该如此。缩小的脚本大大减少了包的大小。最好只部署最终产品的生产版本。

延迟加载图像(延迟离屏图像)

之后，如 Lighthouse 审计所示，该页面上有许多最初加载的图像。将图像推迟到需要时将改进 FCP/TTI 指标。

您似乎已经在使用一些延迟加载，但它似乎并没有像 DevTools 中观察到的那样完成工作。查看这个包以获得更多“Angular 原生”延迟加载:https://www.npmjs.com/package/ng-lazyload-image .

图像尺寸(适当尺寸的图像)

除了捆绑大小之外，您还可以考虑减小图像的大小。如 Lighthouse 所示，有可能节省 1s。

这既适用于文件大小，也适用于图像的尺寸。

例如，此图像位于 /assets/images/pages/regular/sections/header/1.webp :

223Kb - 您可以使用不同的文件格式 (PNG/JPEG) 和压缩质量来按原样减小文件大小。

1920x1100 - 考虑到该图像在当前使用的屏幕上(iPhone 屏幕内)实际上要小得多，图像的尺寸可能会显着减小。

您可以通过利用其中两个点将该图像缩小到 40-50Kb。对 /assets/images/pages/regular/sections/header/main-photo.webp 上的图像的相同建议- 尺寸和文件大小可以显着减小。

还有其他建议(如 Lighthouse 所指出的，例如删除未使用的 CSS)，但以上三个将在 SEO 和性能方面领先一步。同样，服务器端渲染将是首先要解决的问题。