问题标签 [web-vitals]

我的公司已要求我向我们的网站添加一些网站速度指标，以帮助确定不是最佳的用户体验。使用自定义 HTML Google Tag Manager (GTM) 标签，我为 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP) 添加了 PerformanceObserver(s)。

我根据https://web.dev/user-centric-performance-metrics/的指南实现了观察者

问题是在某些页面上 LCP 低于 FCP。根据我的理解，这不应该发生，因为即使第一次油漆也是最大的油漆，数量应该是一样的。

谁能解释一下这是否可行以及在什么情况下可以？

我的移动网站在谷歌页面洞察力中的得分很差，因为谷歌广告我只得到了 25 分，而在桌面上我得到了 77 分。

如何在不延迟加载第三方脚本的情况下减少移动网站的总阻塞时间？

我们正在使用 cdn.thisiswaldo.com/static/js/7475 脚本来调用谷歌广告。

我还使用此脚本延迟加载谷歌广告

这是移动设备的实验室数据：

First Contentful Paint 2.6 秒

速度指数 14.3 秒

最大的内容涂料 7.6 秒

交互时间 14.5 秒

总阻塞时间 990 毫秒

累积布局偏移 0.084

这是诊断 诊断屏幕截图

以下是阻止网站加载的第三方广告列表。 阻止第三方代码

为了在 Core Web Vitals 的 CLS 上工作，我需要找到一种方法来img在屏幕上的图像为 100% 宽度时设置标签的高度，因为每当调整窗口大小时，图像的高度都会发生变化。我正在开发的网站是基于 WordPress 构建的，并找到了解决方法。所以，我将写如何在 WordPress 上管理它。

假设我有一个带有 10 个方法的打字稿类，并且该文件导出了该类的一个新实例作为其默认导出。然后我有另一个文件，比如 React 功能组件，它导入这个类并在该类上调用一个方法。

这将如何优化？Webpack/Babel 可以只为使用的方法提取代码，还是包含整个类，我会有一堆未使用的代码？

避免类并导出每个函数会更好吗？

我的目标是使导出的包更小，并且让 Lighthouse 更少抱怨未使用的 JavaScript。

无法编译 -/src/reportWebVitals.js 找不到模块：无法解析“web-vitals”。由于新反应JS，找不到发生了什么。这是reportWebVitals.JS 文件。在此先感谢您的帮助。

“/src/reportWebVitals.js 模块未找到：无法解析 'E:​​\ReactResources\RectProjects\test-app\src' 中的 'web-vitals'”

随着新的网络生命体征的到来，我的粘性导航/菜单出现了问题。事实上，大多数页面都会有:-(

问题是我使用了一种像引导词缀这样的方法来使菜单在离开视口时具有粘性。但是每次菜单离开视口（并进入它）并且位置设置从relative/static/absolute到fixed它时，它都会增加 CLS（累积布局移位）。我意识到将位置更改为fixed将导致布局偏移，因为该元素已从图层中移除，并且所有后续元素都将移至顶部。

但是：这就是我想出一些解决方案的原因，我认为最好的方法是在菜单周围使用具有特定高度的包装器。因此，当菜单的位置变为固定时，包装器仍然存在并且位置或高度没有变化，这意味着没有后续元素必须移动。但 CLS 仍在计数。而且我不知道该怎么做才能使我的菜单变得粘稠而不影响重要的 CLS。顺便说一句，由于没有足够的浏览器支持，我不能使用 position: sticky。因为我的研究是正确的position: sticky作品，不会对 CLS 产生负面影响，所以我的解决方案没有，尽管用户**根本看不到任何区别**....

这里有一些更直观的伪代码：

有任何想法吗？非常感谢！

我正在尝试使用 GTM 将数据从 webVitals 发送到谷歌分析。

使用这个包：https ://github.com/GoogleChrome/web-vitals#load-web-vitals-from-a-cdn

GTM 抱怨： 第 3 行错误，字符 38：此语言功能仅支持 ECMASCRIPT6 或更好的模式：对象解构。

我认为问题出在函数调用上。我试图将函数修改为：

var sendToGoogleAnalytics = function({name, delta, id}){...

似乎这不是问题。有人能指出 linter 不喜欢什么吗？

我们网站上的页面的 CLS 始终接近于零。这是有道理的，因为它们是服务器呈现的 HTML 页面，具有简单的静态布局。

最近我们添加了 content-visibility: auto 的使用，如下所示（仅添加到首屏部分）：

https://web.dev/content-visibility/

这在浏览器中没有明显的影响，但根据开发工具的“性能”选项卡、chrome 灯塔测量和在webpagetest.org 上的重复运行，对绘制/渲染指标产生了预期的显着好处

但是，我们注意到在 google pagespeed 洞察力的实验室数据部分中，累积布局偏移 (CLS) 急剧上升了 0.006 到 1.000+：

https://www.godaddy.com

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.godaddy.com

还有人观察这个吗？灯塔如何测量 CLS 的潜在错误？

我希望能够在我们的暂存环境中使用https://web.dev/measure/，但不幸的是，我们的暂存环境受到严格限制，仅允许某些 IP 访问它。

我的问题是。是否可以将https://web.dev/measure/列入白名单，以便我可以在我们的陈述环境中运行这些测试？

我正在尝试使用 GTM 和 GA4 实施 Web Vitals 监控。

为此，我使用了由 Simo Ahava 创建的自定义 GTM 模板。关联

从我所见，我已经正确地完成了这个实现——我可以看到预览时需要推送到数据层的变量

这就是我将它们推送到 GA4 的方式：

现在问题在 GA4 结束。我可以看到填充到 GA4 的事件。但是，当我转到分析中心并尝试创建自定义报告时，我可以获得事件的计数，但它们的值显示为 0

在 GA4 中使用 DebugView 时，我确实可以看到值被正确推送

所以我的问题是......我在这里做错了什么？为什么值不显示？

编辑：我尝试了更多的东西。仍然没有工作，但想给你和更新。

我在 GA4 中添加了自定义指标和维度，希望能解决这个问题。

Web Vitals 价值的自定义指标

Web Vitals 名称的自定义维度

我尝试了所有可能的组合：

1. 维度：事件名称（默认一个），指标：Web Vitals Value
2. 维度：Web Vitals 名称（自定义），指标：Web Vitals 值
3. 维度：Web Vitals 名称（自定义），指标：事件价值

他们都没有工作。然而，这是我发现的一些奇怪的东西。当使用 Web Vitals Name 作为维度时，我也无法选择名称。这让我相信我首先犯了某种错误。

也许这会有所帮助....