piffy
1
我希望提高网站的 Web Vitals，特别是 LCP。我遇到了问题，LCP 时间约为 2.7 秒（应低于 2.5 秒）。根据 https://web.dev/optimize-lcp：
具体来说，LCP 衡量的是从用户开始加载页面到视口内最大的图像或文本块渲染完成的时间。
我已经将问题归结为我编写的一个横幅主题组件。我挂载为一个名为“above-main-container”的小部件的横幅图像，几乎在所有页面上都是屏幕上绘制的最大对象。
代码
<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("my-banner", {
tagName: "div",
html() {
return h("img.banner-center", {src: settings.banner_image, fetchpriority: "high", style: "aspect-ratio: 925 / 359 ; width: 100%"})
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/banner">
{{mount-widget widget="my-banner"}}
</script>
我认为发生的情况是：包含图像的 div 是使用 JavaScript 挂载的，因此在运行此 JavaScript 代码之前，在刷新 Discourse 页面时需要发生一系列先决条件。这会导致横幅在 2.5 秒后才被获取，从而损害 LCP 指标。
我已尝试使用 fetchpriority="high" 优先加载横幅图像，如代码所示。但我认为这并没有解决根本的计时问题。
关于如何优先渲染此特定主题组件，有什么建议吗？将其转换为插件是否更好？我是否有其他方法可以尽早注入横幅？谢谢！
3 个赞
piffy
2
也许我的问题太详细了。如果有人知道答案，这里有一个更简单的问题：
页面重新加载时，插件的元素会比主题组件渲染得更早吗？
Falco
(Falco)
3
如果您的横幅比我们用于 Introducing Discourse Splash - A visual preloader displayed while site assets load 的元素大，那么您的 LCP 将会很糟糕。
如果您认为主要问题是图像资源的下载，您可以添加类似以下内容：
<link rel="prefetch" href="http://example.com/myimage.webp" />
到您主题中的 HEAD 元素。
2 个赞
piffy
4
我目前过得很糟糕 
哈哈哈
我已经切换到使用 CDN，但这并没有帮助。正如我提到的，我认为获取横幅的调用发生得太晚了，而不是获取时间。我会尝试预取看看它是否有区别！
在此期间，直到我找到解决方案，我所做的是，除非您已登录，否则不显示横幅。看起来谷歌主要根据搜索流量计算 LCP，在我的情况下，搜索流量通常是未登录用户。
1 个赞
Falco
(Falco)
5
LCP 将来自所有使用 Google Chrome 的用户，包括 Android、Windows、MacOS、Linux 和 Chromebook。
如果您来自这些设备上的匿名用户的页面浏览量多于登录用户，是的，您的 LCP 将反映这些匿名用户的性能。
2 个赞
piffy
6
知道了。
你认为我可以通过使启动画面动画变大来解决这个问题吗？
Falco
(Falco)
7
这非常复杂。
首先，我刚检查过，启动画面已经占用了整个屏幕（100vh 和 100% 宽度）。
但是，如果某些用户的 Discourse 启动足够快，他们将不会看到启动画面。对于这些人来说，LCP 将由足够大的元素设置。在您的情况下是横幅，所以您受限于它。
我会尝试预取 meta 标签，并确保它是一个经过高度优化的资源，并且您的所有资源都通过 CDN 提供，CDN 的 PoP 靠近您的用户所在的位置。
4 个赞
piffy
11
当然，我总是可以把它缩小或者做些别的什么，但我更希望有一个不影响美观的解决方案。
piffy
12
我尝试了这个可能的解决方案，但不幸的是，它似乎没有起到任何作用。为了进行健全性检查，我还将横幅图像替换为一个微小的图像，但对 LCP 也没有任何影响。不过，感谢您的建议。
我不知道主题组件如何被注入页面的内部工作原理，但我的印象是，当横幅组件被注入时，已经太晚了。我的下一个尝试是将其作为插件来尝试。
