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

Question

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

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

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

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

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

我不确定可以从中节省多少。我曾想从主文件中删除弯矩库，并且还懒加载您看到的 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 Universal进行服务器端还原和seo

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