问题标签 [web-vitals]

根据核心 Web Vitals，只有 3 个核心 Vitals 用于衡量任何网站 LCP（最大内容绘制）、FID（首次输入延迟）和 CLS（累积布局偏移）的用户体验。根据Pagespeedinsights或 CRUX 仪表板，我的网站的 FID 处于良好限制，即 90% 的用户的输入延迟小于 100 毫秒

如果我对登陆我网站的用户体验进行块优化（拆分、延迟加载），会有什么好处吗？

我知道它会影响 TBT（总阻塞时间）、TTI（交互时间），但无论如何我的 FID 是否更小也没关系。我的理解正确吗？

I've optimized my WordPress site performance and also checked its performance using web.dev

But still, have the following issues that I couldn't solve:

1. Remove unused CSS
2. Remove unused JS
3. Initial server response time was short

How can I Solve this issues?

我正在努力优化最大内容绘制(LCP)，但无法根据设备大小预加载正确数量的 LCP 候选图像。

问题：

• 在小屏幕上，单个图像显示在轮播中
• 在更大的屏幕上，最多可以显示四个图像
• 我无法控制所述图像的大小，这意味着任何图像都可以成为 LCP 候选者
• 在小型设备上加载所有四个图像是不行的：浪费带宽和性能损失

所需的解决方案：

• 在小屏幕上只预加载一张图片
• 在大型设备上预加载所有四个图像

我的第一个想法是显而易见的，使用linkels 的media属性来决定加载什么；但是，无论如何都会下载所有资源（参考文献1、2）。

我不喜欢我目前最好的“解决方案”：无论如何都使用link's imagesrcset+imagesizes属性来加载第一个图像，而在小型设备上，后者的图像为 1px x 1px。

例如

显然非常hacky。有这样做的“正确”方法吗？我错过了什么吗？

我注意到 Chrome 网络选项卡中的 TTBF 值与 WebVitals 记录的不同。理想情况下，它应该是完全相同的值，但有时在某些情况下会出现 2-3 秒的巨大差异。

我正在使用 Next.js 并使用reportWebVitals来记录各自的性能指标。

这是一个示例 repo、应用程序 url和屏幕截图以供参考。

使用performance.timing.responseStart - performance.timing.requestStart返回比依赖 WebVitals TTFB 值更合适的值。

知道可能出了什么问题吗？是否是 WebVitals 上的错误，我不应该使用它，或者在我最终使用/记录值时出错？

需要你的意见。一直在努力让网络生命体征进入绿色区域。并在灯塔的手动测试中获得好成绩。例如，我的页面在我执行的数十次测试中获得 CLS=0（桌面）。然而，谷歌搜索控制台最近对大多数 0.5 及以上页面的验证报告 :( 每当我手动运行时，我无法让 CLS 超过 0，所以我不知道去哪里找。

与 LCP 情况类似——在移动设备上测试 1.7 秒，在搜索控制台 4.2 秒（（（（（（

有没有人面临同样的问题？有什么线索吗？提示？

Getting a negative score on Glide js and struggling to find a way to fix. I assume it the usual that others are seeing where on the first load the whole carousel loads and all slides. Just not sure how to fix.

taking insight from here for possible fix

CLS slider api fixes

我正在优化 WordPress 网站的速度（目前仅在移动设备上），除了 CLS 之外都取得了成功。在优化 CSS 交付（使用 WP-Rocket）后，CLS 变得非常高，但我没有看到任何布局变化，即使我使用开发工具（性能测试）。（在移动）

这是示例：https ://trustmyscience.com/israel-a-pratiquement-eradique-la-covid-19/

1. 结果在这里，通过 CSS 交付优化

所以这似乎是一种无形的布局转变，Lighthouse 将其视为真正的布局转变。灯塔向我展示了问题来自于<div class="entry-content body-color clearfix link-color-wrap progresson">. 因此，它似乎与所有文章内容的某些“包装”有关，可能会因为某些 CSS 规则而转移到背景中（不可见）？

2. 这里，具有最高布局偏移的元素
3. 布局偏移最大的元素（详细）

当我停用 CSS 交付优化时，CLS 几乎回到 0（但 LCP 太高）。

4. 没有 CSS 交付优化的结果

由于 LCP 的重要性，我需要此 CSS 交付优化，但由于 Core Web Vitals 中引入 CLS，我现在还需要解决此问题，并且需要找到 Lighthouse 检测为 LS 的内容。另外，也许，灯塔需要对此进行更正？因为它不是可见的布局转变......

您对如何解决这个问题有任何想法吗？还是您认为我需要联系 LS 开发人员向他们展示这一点？

预先感谢您的帮助。

问候，

我正在使用 reportwebvitals 来收集与性能相关的数据。我看到以下值：

我知道一个好的 LCP 分数低于 2.5 秒，一个好的 FID 分数低于 100 毫秒。给定值，哪个键准确地指示了这个分数？

我试图浏览可用的文档，但无法理解如何得出这些时间结果。有人可以帮忙吗？

谢谢！

尽管我在加载时调用了facebook 评论插件，但作为Main-Thread Blocking Time的一部分，我在 web-vitals 上得到了一个负分。

当我使用https://web.dev/measure审核我的网站时，我得到的建议之一是“以低分辨率提供图像”。

从下面的屏幕截图中可以看出，我显示的图像尺寸与实际尺寸相符。我不知道这里出了什么问题以及预期的大小是多少。

如果我把图像放大，我会得到一个相反的错误，说我的图像尺寸不合适，应该减小尺寸。

所有这些图像都有一个明确的高度 48px 并width: auto;使其具有响应性。

有什么建议可以解决这个问题吗？

提前致谢。