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

Question

我正在努力提高我的角度6 SPA SEO分数，我正在使用Lighthouse审核找出导致性能下降的特定/主要问题，以便获得更高的评分。

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

如您所见，一个大问题是First Contentful Paint，它也与另一个问题-“ Minimize main-thread work”]有关。我阅读了有关这些问题的文章，其中大部分已经完成。

但是，我的主要JavaScript文件确实出现问题。我运行-webpack-bundle-analyzer来查看我的代码中发生了什么，并得到以下图像：

我已经在使用延迟加载，因此，例如，您可以看到red上最大的文件与用户模块有关，该用户模块仅在登录后才加载，因此不相关，但是，main green上的文件始终会被加载，并且purple文件也将始终被加载：“ lazy-public-script.js”。

我不确定可以从中节省多少。我曾考虑从主文件中删除弯矩库，然后延迟加载您看到的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组件，然后将其他组件作为延迟加载。