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

Question

我正在努力提高我的 Angular 6 SPA SEO 分数， 我正在使用 Lighthouse 审核来找出导致性能不佳的特定/主要问题，以便获得更好的分数。

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

如您所见，一个大问题是First Contentful Paint，它也与另一个问题有关 - “最小化主线程工作”。 我阅读了这些问题所附的文章，其中大部分已经完成。

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

我已经在使用延迟加载，因此，例如，您可以看到 red 上最大的文件与仅在登录后加载的用户模块有关，因此它不相关，但是， 绿色上的主文件总是被加载，并且紫色文件名为：“lazy-public-script.js”。

我不确定我能从中节省多少。我想从主文件中删除 moment 库并延迟加载您看到的翻译文件 he.json、en.json，甚至尝试最小化lazy-public-script.js 文件。

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

我想到的另一个想法是创建一个非常小的模块，它只包含必要的 HTML 和 CSS，并且在用户需要之前消除对 lazy-public-script.js 的需求它。

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

Answer 1

服务器端渲染

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

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

1. 通过排除 Angular 运行时来减小初始包大小。
2. 通过向客户端发送已经预渲染的 HTML。

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

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

生产/缩小构建

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

图像延迟加载（延迟离屏图像）

根据 Lighthouse 审计结果，该页面上有许多最初加载的图像。将图像推迟到需要时将改进 FCP/TTI 指标。

您似乎已经在使用一些延迟加载，但它似乎并没有像 DevTools 中观察到的那样发挥作用。查看此包以了解更多“角度原生”延迟加载：https://www.npmjs.com/package/ng-lazyload-image。

图像大小（适当大小的图像）

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

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

例如这张图片位于/assets/images/pages/regular/sections/header/1.webp:

1. 223Kb - 您可以使用不同的文件格式 (PNG/JPEG) 和压缩质量来按原样减小文件大小。
2. 1920x1100 - 考虑到该图像在当前使用的屏幕上（iPhone 屏幕内）实际上要小得多，因此图像的尺寸可能会显着减小。

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

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

Answer 2

首先使用延迟加载： 仅在应用模块中添加 home 组件，并作为延迟加载加载其他组件。

第二次使用 Angular 通用的服务器端重新编辑和 seo

您还可以将图像加载为延迟加载，在初始化时您必须在加载图像时使用默认图像，然后从默认图像替换。